Adobe Client Data Layer in Adobe Launch (Tags): Step-by-Step Implementation

Step 1 of 12: 1Install the Adobe Client Data Layer extension

In the Data Collection interface, open your Tags property and go to Extensions. Open the catalog, filter for Adobe Client Data Layer, select Install, leave the default settings and select Save.

Why: the extension provides the listener event, the data elements and the actions used in the rest of this guide. With the default settings it creates a data layer named adobeDataLayer.

Do not rename the data layer unless you must. The extension view allows a different name, but the original adobeDataLayer object is still instantiated and then duplicated to the new name, which makes debugging harder.

Step 2 of 12: 2Initialize the data layer above the Tags embed code

Edit your page template so the data layer array exists before the Tags embed code loads. Then push the page data with an event key.

Why: items pushed before the library loads are queued in the array and processed once the extension starts. The line window.adobeDataLayer = window.adobeDataLayer || []; is the same pattern the AEM Core Components use. The event key is what lets a rule listen for this push by name.

Replace YOUR_TAGS_EMBED_CODE_URL with the embed code of your development environment.

<head>
  <script>
    window.adobeDataLayer = window.adobeDataLayer || [];
    window.adobeDataLayer.push({
      event: "page-load",
      page: {
        name: "home",
        type: "landing"
      }
    });
  </script>
  <script src="YOUR_TAGS_EMBED_CODE_URL" async></script>
</head>

Step 3 of 12: 3Push an interaction event from a click handler

Add a script that pushes an add-to-cart event when a visitor clicks a button marked with data-add-to-cart. Add the matching button to the page body.

Why: each user interaction type gets its own named event, such as "registration-start" or "add-to-cart". Rules then listen to these events by name. The product object travels with the event, so a data element can read it.

<button type="button" data-add-to-cart>Add to cart</button>

<script>
  document.addEventListener("click", function (e) {
    var button = e.target.closest("[data-add-to-cart]");
    if (!button) {
      return;
    }
    window.adobeDataLayer.push({
      event: "add-to-cart",
      product: {
        id: "SKU-1001",
        name: "Trail Backpack",
        price: 89.9
      }
    });
  });
</script>

Step 4 of 12: 4Create a Computed State data element for the page name

In Data Elements, add a new element named Page Name. Choose the Adobe Client Data Layer extension as the extension and Computed State as the data element type. Point it at the state path page.name.

Why: Computed State returns the merged state of everything pushed so far, so you read a value by its path and do not parse individual pushes. The data element offers the global state or a specific state: choose the specific state and enter the path.

Step 5 of 12: 5Create a Computed State data element for the product ID

Add a second data element named Product ID. Use the same extension and the Computed State type, with the path product.id.

Why: the add-to-cart rule needs the product that was just pushed. Because the state is merged, the value is available as soon as the push has been processed.

Step 6 of 12: 6Create the page-load rule with a Data Pushed event

In Rules, create a rule named ACDL - Page Load. Add an event, choose the Adobe Client Data Layer extension and select Data Pushed as the event type. Set it to listen for a specific event and enter page-load.

Why: the documentation describes three listening modes: all data changes, all events, and a specific event. A specific event is the most precise and avoids firing on unrelated pushes.

A push with data and an event key is tracked by the all-data-changes listener. A push that has only an event key and no data is not. If your page-load push carries no data, listen for the specific event, not for data changes.

If your interface offers a scope setting, the core library accepts past, future and all. Choose all here so the rule still fires when the push ran before the library loaded.

Step 7 of 12: 7Add Adobe Analytics actions to the page-load rule

In the same rule, add an action from the Adobe Analytics extension that sets variables. Map a page name variable to the data element %Page Name%. Add a second action that sends the beacon.

Why: the first action fills the Analytics variables from the data layer and the second sends them. The exact action and field labels come from the Adobe Analytics extension and can change with its version, so match them to what your interface shows. Follow the Adobe Analytics extension documentation on Experience League for them.

If you need page-type logic, add a condition on %Page Name% or on a second data element instead of creating another event.

Step 8 of 12: 8Create the add-to-cart rule

Create a rule named ACDL - Add To Cart. Add a Data Pushed event for the specific event add-to-cart. Add the Analytics actions that set variables, with the product variable mapped to %Product ID%, followed by the action that sends the beacon.

Why: this rule is independent of the page-load rule, so a missing product value cannot block the page view. Each event name maps to one rule, which keeps the rule list readable.

If you run rule components in sequence, check the open GitHub issue titled "add compatibility to Adobe Client Data Layer extension in Adobe Tags while using run rule components in sequence enabled" in the adobe-client-data-layer repository before you rely on that setting.

Step 9 of 12: 9Add the changes to a development library and build it

Open Publishing, select your development library, add all changed resources, save and build it.

Why: the rules and data elements run on the page only after the library that contains them is built for the environment whose embed code you installed. Confirm that this is the environment your test page loads.

Step 10 of 12: 10Inspect the merged state in the browser console

Load the test page, open the developer tools and run getState with and without a reference. Click the button, then run it again.

Why: getState(reference) returns the merged state of all pushed data, so it proves that your pushes arrived and merged as expected before you look at Tags at all. This is the same call the AEM Core Components documentation uses to inspect a page.

// Whole merged state
window.adobeDataLayer.getState();

// Only the page object
window.adobeDataLayer.getState("page");

// After clicking the button
window.adobeDataLayer.getState("product");

Step 11 of 12: 11Log events with a listener registered through a callback

Register a temporary listener in the console by pushing a function. Click the button to see the event logged. Use scope: "all" so past events are replayed.

Why: the core API says getState(), addEventListener() and removeEventListener() should be reached through a callback that guarantees the data layer is initialized, using adobeDataLayer.push(function (dl) { ... }). The options.scope value accepts past, future or all. Remove the listener afterwards so it does not stay active.

window.adobeDataLayer.push(function (dl) {
  function logEvent(event) {
    console.log("ACDL event received:", event);
  }
  dl.addEventListener("add-to-cart", logEvent, { scope: "all" });

  // Remove it again when you are done testing
  // dl.removeEventListener("add-to-cart", logEvent);
});

Step 12 of 12: 12Confirm the Analytics requests in the Network panel

Open the Network panel, reload the page and look for the Analytics request that the page-load rule sent. Click the button and look for the second request.

Why: a request per rule shows that the whole chain works: page push, listener, data element, Analytics action. Open each request and check that the page name and the product ID match the values you pushed.