将Adobe客户端数据层与AEM核心组件结合使用 overview
Adobe客户端数据层引入了一种标准方法,用于收集和存储有关访客在网页上的体验数据,然后使访问这些数据更容易。 Adobe Client Data Layer 与平台无关,而是与核心组件完全集成以用于 AEM。
探索Data Layer
只需使用浏览器和实时环境的开发人员工具,即可了解Adobe客户端数据层的内置功能 WKND引用站点.
-
打开您的开发人员工具,然后在 控制台:
code language-js window.adobeDataLayer.getState();
要查看AEM站点上数据层的当前状态,请检查响应。 您应该会看到有关页面和各个组件的信息。
-
通过在控制台中输入以下内容,将数据对象推送到数据层:
code language-js window.adobeDataLayer.push({ "component": { "training-data": { "title": "Learn More", "link": "learn-more.html" } } });
-
运行命令
adobeDataLayer.getState()
再次并查找条目training-data
. -
接下来,添加一个路径参数,以仅返回组件的特定状态:
code language-js window.adobeDataLayer.getState('component.training-data');
使用事件
最佳实践是根据数据层中的事件触发任何自定义代码。 接下来,探索如何注册和侦听不同的事件。
-
在控制台中输入以下帮助程序方法:
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将丢失。 -
接下来,输入一个事件处理程序,当 Teaser 组件显示在 轮播.
code language-js function teaserShownHandler(event) { var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/teaser"}); if(dataObject != null) { console.log("Teaser Shown: " + dataObject['dc:title']); console.log(dataObject); } }
此
teaserShownHandler
函数调用getDataObjectHelper
函数并传递一个过滤器wknd/components/teaser
作为@type
过滤掉由其他组件触发的事件。 -
接下来,将事件侦听器推送到数据层,以监听
cmp:show
事件。code language-js window.adobeDataLayer.push(function (dl) { dl.addEventListener("cmp:show", teaserShownHandler); });
此
cmp:show
事件由许多不同的组件触发,例如,当新幻灯片显示在 轮播,或者在中选择新选项卡时 选项卡 组件。 -
在页面上,切换轮播幻灯片并观察控制台语句:
-
停止侦听
cmp:show
事件,从数据层删除事件侦听器code language-js window.adobeDataLayer = window.adobeDataLayer || []; window.adobeDataLayer.push(function(dl) { dl.removeEventListener("cmp:show", teaserShownHandler); });
-
返回页面并切换轮播幻灯片。 请注意,不再记录任何语句,并且事件未被侦听。
-
接下来,创建在触发“页面显示”事件时调用的事件处理程序:
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
用于筛选事件。 -
接下来,将事件侦听器推送到数据层,以监听
cmp:show
事件,调用pageShownHandler
.code language-js window.adobeDataLayer = window.adobeDataLayer || []; window.adobeDataLayer.push(function (dl) { dl.addEventListener("cmp:show", pageShownHandler); });
-
此时,您应该会立即看到随页面数据触发的控制台语句:
此
cmp:show
页面的事件在页面顶部的每次页面加载时触发。 您可能会问,当页面显然已加载时,为什么会触发事件处理程序?AdobeClient Data Layer的独特功能之一是,您可以注册事件侦听器 早于 或 之后 数据层已初始化,这有助于避免出现争用情况。
Data Layer维护一个队列数组,其中包含按顺序发生的所有事件。 默认情况下,Data Layer将触发在中发生的事件的事件回调。 过去 和中的事件 未来. 可以从过去或将来筛选事件。 有关更多信息,请参阅文档。.
后续步骤
有两个选项可供您不断学习,第一个选项是查看 收集页面数据并将其发送到Adobe Analytics 演示使用Adobe客户端数据层的教程。 第二个选项是,学习如何 使用AEM组件自定义Adobe客户端数据层