Adobe客户端数据层引入了一种标准方法,用于收集和存储有关访客在网页上体验的数据,然后使访客能够轻松访问这些数据。 Adobe客户端数据层与平台无关,但完全集成到核心组件中以与AEM一起使用。
是否要在您的AEM网站上启用Adobe客户端数据层? 请参阅此处的说明。
您只需使用浏览器的开发人员工具和实时WKND引用站点,即可了解Adobe客户端数据层的内置功能。
下面从Chrome浏览器拍摄的屏幕截图。
打开开发人员工具,并在Console中输入以下命令:
window.adobeDataLayer.getState();
Inspect响应,用于查看AEM网站上数据层的当前状态。 您应会看到有关页面和各个组件的信息。
通过在控制台中输入以下内容,将数据对象推送到数据层:
window.adobeDataLayer.push({
"component": {
"training-data": {
"title": "Learn More",
"link": "learn-more.html"
}
}
});
再次运行命令adobeDataLayer.getState()
并找到training-data
的条目。
接下来,添加一个路径参数,以仅返回组件的特定状态:
window.adobeDataLayer.getState('component.training-data');
最佳做法是根据数据层中的事件触发任何自定义代码。 接下来,探索注册和侦听不同事件。
在控制台中输入以下帮助程序方法:
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
满足筛选器时,才会返回该条件。
在本练习中,要刷新浏览器,不将很重要,否则控制台JavaScript将丢失。
接下来,输入一个事件处理程序,该处理程序将在Carousel中显示Teaser组件时调用。
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
事件。
window.adobeDataLayer.push(function (dl) {
dl.addEventListener("cmp:show", teaserShownHandler);
});
cmp:show
事件由许多不同的组件触发,例如当在轮播中显示新幻灯片时,或在Tab组件中选择新选项卡时。
在页面上切换轮播幻灯片,并观察控制台语句:
从数据层中删除事件侦听器以停止侦听cmp:show
事件:
window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function(dl) {
dl.removeEventListener("cmp:show", teaserShownHandler);
});
返回到页面并切换轮播幻灯片。 请注意,不再记录任何语句,并且事件未被侦听。
接下来,输入将在触发页面显示事件时调用的事件处理程序:
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
。
window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function (dl) {
dl.addEventListener("cmp:show", pageShownHandler);
});
您应会立即看到一个控制台语句已随页面数据一起触发:
页面的cmp:show
事件在页面最顶部的每次页面加载时触发。 您可能会问,当页面显然已加载时,为何触发事件处理程序?
这是Adobe客户端数据层的独特功能之一,其中,可以在数据层初始化后或之前注册事件侦听器。这是避免竞争情况的关键功能。
数据层维护一个队列数组,其中包含依次发生的所有事件。 默认情况下,数据层将触发past中发生的事件以及future中的事件的事件回调。 它可以将事件过滤到过去或未来。 有关更多信息,请参阅此文档。
请参阅以下教程,了解如何使用事件驱动的Adobe客户端数据层来收集页面数据并发送到Adobe Analytics🔗。
或了解如何使用AEM Components🔗自定义Adobe客户端数据层