文档AEMAEM 教程AEM Sites 教程

将Adobe客户端数据层与AEM核心组件结合使用 overview

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 中级
  • 开发人员

Adobe客户端数据层引入了一种标准方法，用于收集和存储有关访客在网页上的体验数据，然后使访问这些数据更容易。 Adobe Client Data Layer 与平台无关，而是与核心组件完全集成以用于 AEM。

https://video.tv.adobe.com/v/330112?quality=12&learn=on&captions=chi_hans

NOTE
想要在AEM站点上启用Adobe客户端数据层？ 请在此处查看说明。

探索Data Layer

只需使用浏览器和AdobeWKND实时参考站点的开发人员工具，即可了解浏览器客户端数据层的内置功能。

NOTE
以下屏幕截图摘自Chrome浏览器。

  1. 导航到https://wknd.site/us/en.html

  2. 在​ 控制台 ​中打开开发人员工具并输入以下命令：

    code language-js 
    window.adobeDataLayer.getState();

    要查看AEM站点上数据层的当前状态，请检查响应。 您应该会看到有关页面和各个组件的信息。

    Adobe的数据层响应

  3. 通过在控制台中输入以下内容，将数据对象推送到数据层：

    code language-js 
    window.adobeDataLayer.push({
    "component": {
        "training-data": {
            "title": "Learn More",
            "link": "learn-more.html"
        }
    }
});

  4. 再次运行命令adobeDataLayer.getState()并找到training-data的条目。

  5. 接下来，添加一个路径参数，以仅返回组件的特定状态：

    code language-js 
    window.adobeDataLayer.getState('component.training-data');

    只返回单个组件数据条目

使用事件

最佳实践是根据数据层中的事件触发任何自定义代码。 接下来，探索如何注册和侦听不同的事件。

  1. 在控制台中输入以下帮助程序方法：

    code language-js 
    function getDataObjectHelper(event, filter) {
    if (event.hasOwnProperty("eventInfo") && event.eventInfo.hasOwnProperty("path")) {
        var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
        if (dataObject != null) {
            for (var property in filter) {
                if (!dataObject.hasOwnProperty(property) || (filter[property] !== null && filter[property] !== dataObject[property])) {
                    return;
                }
                return dataObject;
            }
        }
    }
    return;
}

    上述代码检查event对象并使用adobeDataLayer.getState方法获取触发事件的对象的当前状态。 然后，帮助程序方法检查filter，并且仅当当前dataObject满足筛选条件时才返回它。

    note caution
    CAUTION
    在整个练习中刷新浏览器时，而不是 ​很重要，否则控制台JavaScript将丢失。

  2. 接下来，输入在​ 轮播 ​中显示​ Teaser ​组件时调用的事件处理程序。

    code language-js 
    function teaserShownHandler(event) {
    var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/carousel/item"});
    if(dataObject != null) {
        console.log("Teaser Shown: " + dataObject['dc:title']);
        console.log(dataObject);
    }
}

    teaserShownHandler函数调用getDataObjectHelper函数并传递wknd/components/carousel/item的筛选器作为@type，以筛选掉由其他组件触发的事件。

  3. 接下来，将事件侦听器推送到数据层上以侦听cmp:show事件。

    code language-js 
    window.adobeDataLayer.push(function (dl) {
     dl.addEventListener("cmp:show", teaserShownHandler);
});

    cmp:show事件由许多不同的组件触发，例如，在​ 轮播 ​中显示新幻灯片时，或者在​ 选项卡 ​组件中选择新选项卡时。

  4. 在页面上，切换轮播幻灯片并观察控制台语句：

    切换轮播并查看事件侦听器

  5. 要停止侦听cmp:show事件，请从数据层中删除事件侦听器

    code language-js 
    window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function(dl) {
    dl.removeEventListener("cmp:show", teaserShownHandler);
});

  6. 返回页面并切换轮播幻灯片。 请注意，不再记录任何语句，并且事件未被侦听。

  7. 接下来，创建在触发“页面显示”事件时调用的事件处理程序：

    code language-js 
    function pageShownHandler(event) {
    var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/page"});
    if(dataObject != null) {
        console.log("Page Shown: " + dataObject['dc:title']);
        console.log(dataObject);
    }
}

    请注意，资源类型wknd/components/page用于筛选事件。

  8. 接下来，将事件侦听器推送到数据层以侦听cmp:show事件，并调用pageShownHandler。

    code language-js 
    window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function (dl) {
     dl.addEventListener("cmp:show", pageShownHandler);
});

  9. 此时，您应该会立即看到随页面数据触发的控制台语句：

    页面显示数据

    页面的cmp:show事件在页面顶部的每次页面加载时触发。 您可能会问，当页面显然已加载时，为什么会触发事件处理程序？

    Adobe客户端数据层的独特功能之一是，您可以在​ 之前 ​或​ 之后 ​注册事件侦听器。数据层已初始化，这有助于避免出现争用情况。

    Data Layer维护一个队列数组，其中包含按顺序发生的所有事件。 默认情况下，Data Layer将触发在​ 过去 ​发生的事件以及​ 未来 ​发生的事件的事件回调。 可以从过去或将来筛选事件。 在文档中可找到更多信息。

后续步骤

有两个选项可供您继续学习：第一，查看收集页面数据并将其发送到Adobe Analytics教程，以演示如何使用Adobe客户端数据层。 第二个选项是，了解如何使用AEM组件自定义Adobe客户端数据层

其他资源 additional-resources

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d