Data layer design (ACDL)

Data layer design

A data layer is a JavaScript object that holds data before it's sent to analytics. It decouples your site from analytics.

Why have a data layer?

Without it:

// Your page code knows about analytics
s.pageName = "Product";
s.prop1 = "electronics";
s.eVar1 = "summer_campaign";
s.t(); // analytics call directly in page

If you change analytics, you change your page code. Messy.

With a data layer:

// Your page pushes data to a neutral layer
window.adobeDataLayer = [{
  page: { name: "Product", category: "electronics" },
  campaign: { name: "summer_campaign" }
}];

// Tags/Web SDK reads from data layer and sends to analytics
// Your page doesn't care about analytics

If you change analytics, only the mapping changes. Your page is untouched.

ACDL structure

Adobe recommends the Adobe Client Data Layer (ACDL) structure:

window.adobeDataLayer = [{
  page: {
    name: "Product Detail",
    title: "iPhone 15 Pro",
    url: "/product/iphone15",
    category: "Electronics"
  },
  user: {
    id: "user123",
    segment: "premium_member",
    isAuthenticated: true
  },
  cart: {
    items: 1,
    value: 999.99,
    currency: "USD"
  },
  event: "pageLoad"
}];

Standard data layer objects

Events in the data layer

Push a new event object when something happens:

// User adds item to cart
window.adobeDataLayer.push({
  event: "addToCart",
  product: {
    id: "prod123",
    name: "iPhone 15",
    price: 999.99
  }
});

// Tags/Web SDK detects the event and sends it

Mapping to Web SDK

In Adobe Tags, create a rule that listens to the data layer:

Trigger: Data element change (when adobeDataLayer updates) Action: Send event to Web SDK with XDM from data layer

// In the action, extract from data layer and send
alloy("sendEvent", {
  xdm: {
    web: { webPageDetails: { name: _dl.page.name } },
    eventType: _dl.event
  }
});

Best practices

1. Push data before the event: Push page/user data, then push event
2. Use consistent naming: Follow ACDL naming conventions
3. Don't populate analytics variables: The data layer doesn't know about prop1, eVar1. It's neutral.
4. Keep it flat: Don't nest too deep; it's harder to access
5. Document your data layer: Publish a data layer spec for your developers

---

Next: Adobe Tags — data elements and rules