Adobe Client Data Layer（ACDL）详解：新一代数据层标准化实践

 更新时间：2028年7月7号

认识ACDL

Adobe Client Data Layer（ACDL） 是一套由 Adobe 官方维护的数据层标准与 JavaScript 实现库。其核心职责包括：

• 统一管理页面上的静态数据（如页面信息、用户属性）和动态行为事件（如点击、提交、视图加载）
• 以结构化的 JSON 格式向前端工具暴露数据，成为“前端数据的唯一可信来源”
• 提供 push、getState、addEventListener、removeEventListener 四个标准 API，支持事件驱动和状态追溯

ACDL 默认使用全局变量名 adobeDataLayer（可在Adobe Launch 扩展中配置）。

ACDL的使用案例

以下步骤适用于常规网站（非 AEM）在 Adobe Launch 中接入 ACDL。

Step 1：安装ACDL扩展

在 Adobe Launch 属性的「Extensions」中搜索并安装 Adobe Client Data Layer 扩展。安装后，扩展会自动初始化 window.adobeDataLayer 对象（变量名可自定义，默认即此）。

Step 2：在页面用发送数据

通过push方法发送自定义事件及关联数据：

adobeDataLayer.push({"event":"myEvent",
                                  "data":{"foo":"bar",
                                         "key":"value"}})

event：事件名称，用于 Adobe Launch 规则触发条件。

data：自定义数据对象，可包含任意键值对（支持嵌套）。

Step 3：自动记录最新数据

ACDL会自动将 push 的内容合并进全局 State，而非覆盖。例如连续推送：

adobeDataLayer.push({ "page": { "name": "Home" } });
adobeDataLayer.push({ "page": { "section": "Products" } });

最终状态为 { page: { name: “Home”, section: “Products” } }。该状态可通过 adobeDataLayer.getState() 随时读取，无需额外配置。

这一步就是前面提到的内置状态管理，它是自动的，不需要你做什么设置。

Step 4：Adobe Launch中创建事件侦听器

新建一个Rules，命名为ACDL，在Rules新建event，做如下设置：

这个设置的意思是，当myEvent触发的的时候才执行，也就是接收到ACDL的数据。

Step 5：创建数据元素提取数据

若要从状态中读取 data.foo 的值，新建 Data Element，然后做如下设置：

这个是ACDL内置的传入数据的方法，data.foo就拿到bar，如果是data.key，就拿到的value。（这种方式有时候会拿不到数据）然后这个data element就可以被Rules或Extensions引用。

Step 6：配置Action发送至Adobe Analytics

在规则的 Action 中，选择 Adobe Analytics – Set Variables，将前面创建的 Data Element 映射到相应的 eVars 或 Props，然后调用 Send Beacon 发送数据。

如果要检查ACDL是否已经将数据发送出去，可以在浏览器的控制台里用adobeDataLayer去查询。

AEM环境中的特殊用法

AEM里面已经集成有ACDL的，可以开启使用。

以https://wknd.site/content/wknd/us/en.html为例，这个站点是AEM建立的，且开启了ACDL，可以在代码查看中通过关键字“ adobeDataLayer.push”找到ACDL的数据：

它发送的数据就有json数据，而且格式还比较特别，可以在浏览器控制台下看看它具体的数据结构：

发送的数据page里面签到一个page-2eee4f8914，这个动态的页面id，而且里面还有一个特别的数据结构，里面有很多的数据。

像这种情况就不能像一般的ACDL那么处理的，这类情况需要用自定义js去监听event，然后重构数据层里面的信息，提取page-2eee4f8914里面的数据从重新发送，使得能够被Adobe Launch获取和使用。

新建一个Rules，命名为Page Load。

Event选择Custom Code，然后将下面的代码监听event的代码黏贴进入：

ar pageShownEventHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger Launch Rule and pass event
      console.debug("cmp:show event: " + evt.eventInfo.path);
      var event = {
         //include the path of the component that triggered the event
         path: evt.eventInfo.path,
         //get the state of the component that triggered the event
         component: window.adobeDataLayer.getState(evt.eventInfo.path)
      };

      //Trigger the Launch Rule, passing in the new `event` object
      // the `event` obj can now be referenced by the reserved name `event` by other Launch data elements
      // i.e `event.component['someKey']`
      trigger(event);
   }
}

//set the namespace to avoid a potential race condition
window.adobeDataLayer = window.adobeDataLayer || [];
//push the event listener for cmp:show into the data layer
window.adobeDataLayer.push(function (dl) {
   //add event listener for `cmp:show` and callback to the `pageShownEventHandler` function
   dl.addEventListener("cmp:show", pageShownEventHandler);
});

在配置发送数据之前，我们还可以通过data element去获取page-2eee4f8914里面的具体的数据，假设现在想获取@type这个信息：

那么可以新建一个data element，命名为AA，选择Custom Code，然后将以下代码黏贴进去：

if(event && event.component && event.component.hasOwnProperty('@type')) {
    return event.component['@type'];
}

这段代码的作用就是监听Rule里面的自定义代码触发的事件，然后返回具体的值。

设置后可以在浏览器控制台测试，看是否拿到信息：

已经拿到@type的值，同理可以拿到其他的值到data element。

然后将这些值设置成eVars或props发送给Adobe Analytics。

Adobe数据层和ACDL的对比

• 左边的是Adobe数据层，它是页面上静态的数据，所以是“=”。
• 右边的是ACDL，它是主动主动推送数据，可以看到它有个push的字段，这个是ACDL函数，ACDL一共有4个函数，如”push() getState() addEventListener() removeEventListener()。

ACDL和GTM的数据层对比

ACDL与GTM的DataLayer非常类似，如发送的调用的函数，里面的数据结构都高度相似，但ACDL的会更强，它支持数据嵌套、json格式的数据，其实adobeDataLayer和dataLayer都可以修改的，可以就GTM可以ACDL数据层数据，ACDL可以获取GTM里的数据层数据。

延伸阅读：GA4 vs Adobe Analytics：DataLayer设计思路深度对比

重要注意事项：连续push的覆盖问题

在 Adobe Launch 中，连续多次 push 相同路径的数据，后一次会覆盖前一次的状态，而非合并，导致所有事件获取到的都是最后的值。

adobeDataLayer.push({
  event: 'first push',
  foo: {
    bar: 'stamp'
  }
});
adobeDataLayer.push({
  event: 'second push',
  foo: {
    bar: 'baz'
  }
});

此时无论监听 first push 还是 second push，foo.bar 最终均为 baz。

两种临时解决方案：

• 延迟发送：在 Action 中设置延迟（如 setTimeout）再读取状态，但这会影响实时性，不推荐。
• 直接使用事件对象：在 Action 中通过 %event.fullState.foo.bar% 引用该次 push 中的原始值，绕过状态读取。此方法更可靠，但需注意仅在事件触发时可用。

建议优先采用第二种方案，即在规则的变量映射中，直接使用 event.fullState 路径，而非通过 Data Element 从全局状态中读取，以避免覆盖问题。