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

更新时间：2028年7月7号

长期以来，行业依赖 W3C 的 Customer Experience Digital Data Layer（CEDDL）标准，通过静态的 digitalData 对象管理页面数据。但随着单页应用（SPA）和事件驱动架构的普及，这种“一次性赋值”的数据层难以应对动态交互和异步加载场景。

Adobe 于 2020 年推出 Adobe Client Data Layer（ACDL），作为新一代事件驱动的数据层解决方案。它不仅统一了数据暴露方式，更内置状态管理和事件监听能力，无缝集成 Adobe 生态（Analytics、Launch、Target、AEP），让前端追踪从“拼凑式开发”进化为“标准化工程化”。

认识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 从全局状态中读取，以避免覆盖问题。

有疑问可以在底部留言