JavaScript for Adobe — Tags (Launch) & Web SDK

Concept

const for values that don’t change, let for ones that do. Objects group related data — the data layer is one big object.

Where it's used

Reading values from the data layer.

const page = window.digitalData.page;
let pageName = page.pageName;
console.log(typeof pageName); // "string"

Practice: In your browser console, read 3 values from a site’s data layer.

Concept

Missing objects throw errors. Optional chaining (?.) and a default (??) keep the tag from breaking.

Where it's used

Custom-code data elements that never return undefined.

return window.digitalData?.page?.pageName
    ?? "unknown page";

Practice: Rewrite a data element so it returns "unknown" when the data layer is missing.

Concept

Functions package reusable logic; if/else and the ternary operator pick values.

Where it's used

Rule conditions such as “only on checkout pages”.

function pageType(path) {
  if (path.startsWith("/checkout")) return "checkout";
  return path === "/" ? "home" : "content";
}
return pageType(location.pathname);

Practice: Write a function that returns a page type for 4 kinds of URL.

Concept

Arrays hold lists; map() transforms each item; filter() keeps matches; forEach() loops.

Where it's used

Turning a cart array into XDM productListItems.

const items = digitalData.cart.items;
return items.map(i => ({
  SKU: i.sku,
  quantity: i.qty,
  priceTotal: i.price * i.qty
}));

Practice: Convert a 3-item cart into productListItems.

Concept

querySelector finds elements; addEventListener reacts to clicks and form submits.

Where it's used

Understanding what a Tags click rule does for you.

document.querySelector("#add-to-cart")
  .addEventListener("click", () => {
    console.log("add to cart clicked");
  });

Practice: Log a message when a specific button is clicked on a test page.

Concept

_satellite.getVar reads a data element; _satellite.track fires a direct-call rule; _satellite.logger logs in debug mode.

Where it's used

Custom code inside Tags rules and debugging in production.

const name = _satellite.getVar("page name");
_satellite.logger.log("Page:", name);
_satellite.track("cart_add");
/ _satellite.setDebug(true) in console

Practice: Create a direct-call rule "cart_add" and fire it from the console.

Concept

The Web SDK command alloy("sendEvent") sends an XDM payload to the Edge Network and returns a Promise.

Where it's used

What the Tags “Send event” action does behind the scenes.

alloy("sendEvent", {
  xdm: {
    eventType: "commerce.productListAdds",
    commerce: { productListAdds: { value: 1 } }
  }
}).then(result => console.log(result));

Practice: Inspect a sendEvent call in Assurance and match it to your schema.

Concept

Console errors, breakpoints in DevTools, the Experience Platform Debugger and Assurance show what actually fired.

Where it's used

QA before every publish.

// In the console
_satellite.setDebug(true);
/ reload page, then filter the console by "satellite"
/ Network tab: filter "interact" for Edge calls

Practice: Find and fix one broken data element on a test property.