DocumentationExperience PlatformData Collection

Send Adobe Client Data Layer data with the Web SDK

Last update: November 13, 2026

CREATED FOR:

  • Intermediate
  • Developer

The Adobe Client Data Layer (ACDL) collects data and events on the page, but it doesn’t send them anywhere. To send them to the Adobe Experience Platform Edge Network, connect ACDL events to the Web SDK in one of the following ways:

  • JavaScript library: Your own code listens for ACDL events and calls the Web SDK sendEvent command.
  • Tag extensions: Tag rules use the ACDL extension to trigger on ACDL events and the Web SDK extension to send the data.

Each section of this page shows both approaches.

Prerequisites prerequisites

Your site code pushes the data and events that you want to send. The examples on this page use the following push for each page view:

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push({
  event: "page view",
  page: { title: "Home", language: "en" }
});

You also need the following, depending on your approach:

JavaScript library

The Web SDK base code queues commands until its library loads, and ACDL queues items until its library loads. Because of these queues, you can add the code on this page anywhere after the Web SDK base code, regardless of which library loads first.

Tag extensions

Choose how to map your data mapping

The Web SDK sends data in two objects. Choose one or both:

Object
How mapping works
Use it when
xdm
You build an object that matches your XDM schema from data layer values, in your code or in a tag rule.
You want full control over the payload, or your data layer already resembles your schema.
data
You send data layer values as they are. You map them to XDM in the datastream with Data Prep for Data Collection.
You want to keep mapping logic out of your page code and tag rules, or several sites share one well-governed data layer.

Choose where values come from value-sources

When an ACDL event triggers your code or rule, you can read data layer values from two places:

Source
JavaScript library
Tag extensions
Contains
The pushed object
event.page.title, where event is the listener’s argument
%event.message.page.title%
Only the object that triggered the event.
The computed state
adobeDataLayer.getState("page.title")
A Data layer computed state data element with the path page.title
All data merged from every push so far.

Use the pushed object for values that describe the event itself, such as the product in a cart addition. Use the computed state for values that were pushed earlier, such as user details. When the code or rule runs, the computed state already includes the data from the push that triggered it. See What listeners receive and Use the pushed data in rules.

Send XDM data xdm

The following examples send a page view with the page title from the pushed object.

JavaScript library

Listen for the event and call sendEvent:

code language-js 
window.adobeDataLayer = window.adobeDataLayer || [];

function sendPageView(event) {
  alloy("sendEvent", {
    xdm: {
      eventType: "web.webpagedetails.pageViews",
      web: {
        webPageDetails: {
          name: event.page.title,
          pageViews: { value: 1 }
        }
      }
    }
  });
}

window.adobeDataLayer.push(function(dl) {
  dl.addEventListener("page view", sendPageView);
});

For all listener options, see addEventListener().

Tag extensions

  1. Create a Variable data element with the Web SDK extension. Select XDM, then select your sandbox and schema. This example names the data element XDM variable.

  2. Create a rule, and add an event:

    • Extension: Adobe Client Data Layer
    • Event type: Data layer push
    • Triggers on: Specific named events, with the event name page view
    • Time scope: All

  3. Add an action that fills in the XDM object:

    • Extension: Adobe Experience Platform Web SDK
    • Action type: Update variable
    • Data element: XDM variable
    • Set web.webPageDetails.name to %event.message.page.title%, and set web.webPageDetails.pageViews.value to 1.

  4. Add an action that sends the event:

    • Extension: Adobe Experience Platform Web SDK
    • Action type: Send event
    • Type: web.webpagedetails.pageViews
    • XDM: %XDM variable%

  5. Save the rule, add it to a library, and build the library.

For all event options, see Data layer push.

Each time your site pushes a page view event, the code or rule sends a page view to the Edge Network.

Send interactions the same way. For example, for a push such as { event: "cart add", eventInfo: { sku: "HT105" } }, listen for or trigger on cart add, and read the product from eventInfo. For the XDM fields that describe commerce interactions, see Collect commerce, product, and order information.

Send the data layer for mapping in the datastream data

To map in the datastream instead of in code or rules, send data layer values in the data object, and include an XDM eventType so that the event is classified correctly.

JavaScript library
code language-js 
function sendWithDataPrep(event) {
  alloy("sendEvent", {
    xdm: { eventType: "web.webpagedetails.pageViews" },
    data: this.getState()
  });
}

window.adobeDataLayer.push(function(dl) {
  dl.addEventListener("page view", sendWithDataPrep);
});

Inside an ACDL listener, this refers to the data layer, so this.getState() returns the computed state. To send only part of it, pass a path, such as this.getState("page").

Tag extensions

  1. Create a Data layer computed state data element with the ACDL extension. Select Entire computed state, or select Specific path and enter the path of the data that you want to send. This example names the data element ACDL state.

  2. Create a rule with the same Data layer push event as in Send XDM data.

  3. Add a Send event action from the Web SDK extension:

    • Type: web.webpagedetails.pageViews
    • Data: %ACDL state%

  4. Save the rule, add it to a library, and build the library.

Then, in your datastream, map the fields that you send to your XDM schema. See Data Prep for Data Collection. Data that you don’t map, and that no configured service reads, isn’t stored. Sending the entire computed state also increases the size of each request, so on pages with a large data layer, send only the parts that you map.

Single-page applications spa

In a single-page application, the page stays open while the visitor views many virtual pages, and the data layer history keeps growing. Push a page view event for each virtual page view, and clear the history after you send it. Clearing the history doesn’t change the computed state or remove listeners and rules.

JavaScript library

Clear the history at the end of your page view listener:

code language-js 
function sendPageView(event) {
  alloy("sendEvent", { /* ... */ });
  this.length = 0;
}

See Clear the history.

Tag extensions
Add a Clear data layer history action from the ACDL extension as the last action of your page view rule.

Timing and duplicates timing

Follow these practices so that each event is sent exactly once:

  • Use the all scope. It’s the default in both approaches: the scope option in JavaScript and the Time scope setting in tags. It sends events that were pushed before your listener or rule started listening, such as a page view that was pushed before your script or tag library loaded. Use future only if another part of your implementation already sent the earlier events. See Scope.
  • Send each event from one place. If both your own code and a tag rule send the same data layer event, Adobe receives it twice.
  • JavaScript library: use named functions, and add each listener once. ACDL ignores a second registration of the same function for the same event. However, if code that runs repeatedly passes a new anonymous function each time, ACDL adds a new listener each time, and each event is sent more than once.
  • Tag extensions: trigger on specific event names. A rule that triggers on All data changes runs for every data push, which can send many more events than you expect.
recommendation-more-help
experience-platform-help-collection