使用Adobe Analytics跟踪已单击的组件

导航到WKND主页

打开浏览器的开发人员工具并导航到​ 控制台。 运行以下命令：

adobeDataLayer.getState();

上述代码返回Adobe客户端数据层的当前状态。

通过浏览器控制台

展开响应并查找以button-和teaser-xyz-cta条目为前缀的条目。 您应该会看到类似以下的数据架构：

按钮架构：

button-2e6d32893a:
    @type: "wknd/components/button"
    dc:title: "View All"
    parentId: "page-2eee4f8914"
    repo:modifyDate: "2020-07-11T22:17:55Z"
    xdm:linkURL: "/content/wknd/us/en/magazine.html"

Teaser架构：

teaser-da32481ec8-cta-adf3c09db9:
    @type: "wknd/components/teaser/cta"
    dc:title: "Surf's Up"
    parentId: "teaser-da32481ec8"
    xdm:linkURL: "/content/wknd/us/en/magazine/san-diego-surf.html"

上述数据详细信息基于组件/容器项架构。 新标记规则将使用此架构。

导航到Experience Platform并进入与AEM站点集成的Tag属性。

导航到标记属性UI中的​ 规则 ​部分，然后单击​ 添加规则。

将规则​ 命名为CTA已单击。

单击​ 事件 > 添加 ​以打开​ 事件配置 ​向导。

对于​ 事件类型 ​字段，请选择​ 自定义代码。

在主面板中单击​ 打开编辑器，然后输入以下代码片段：

var componentClickedHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger Tag Rule and pass event
      console.debug("cmp:click 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 Tag Rule, passing in the new `event` object
      // the `event` obj can now be referenced by the reserved name `event` by other Tag Property 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:click into the data layer
window.adobeDataLayer.push(function (dl) {
   //add event listener for `cmp:click` and callback to the `componentClickedHandler` function
   dl.addEventListener("cmp:click", componentClickedHandler);
});

上述代码段通过将函数推入数据层来添加事件侦听器。 每当触发cmp:click事件时，都会调用componentClickedHandler函数。 在此函数中，添加了一些健全性检查，并为触发事件的组件使用数据层🔗的最新状态构造了一个新的event对象。

最后调用trigger(event)函数。 trigger()函数是标记属性中的保留名称，它会​ 触发规则。 event对象作为参数传递，而该参数又由标记属性中的另一个保留名称公开。 标记属性中的数据元素现在可以使用代码段（如event.component['someKey']）引用各种属性。

保存更改。

接下来，在​ 操作 ​下，单击​ 添加 ​以打开​ 操作配置 ​向导。

对于​ 操作类型 ​字段，请选择​ 自定义代码。

在主面板中单击​ 打开编辑器，然后输入以下代码片段：

console.debug("Component Clicked");
console.debug("Component Path: " + event.path);
console.debug("Component type: " + event.component['@type']);
console.debug("Component text: " + event.component['dc:title']);

event对象是从自定义事件中调用的trigger()方法传递的。 component对象是从数据层getState()方法派生的组件的当前状态，是触发点击的元素。

保存更改并在标记属性中运行内部版本，以将代码提升到AEM网站上使用的环境。

导航到WKND站点并打开开发人员工具以查看控制台。 另外，选中​ 保留日志 ​复选框。

单击​ Teaser ​或​ 按钮 CTA按钮之一导航到其他页面。

要单击的

在开发人员控制台中观察是否已触发​ CTA Clicked ​规则：

已单击

导航到Experience Platform并进入与AEM站点集成的Tag属性。

导航到​ 数据元素 ​部分，然后单击​ 添加新数据元素。

对于​ Name ​字段，请输入​ 组件ID。

对于​ 数据元素类型 ​字段，请选择​ 自定义代码。

单击​ 打开编辑器 ​按钮，然后在自定义代码编辑器中输入以下内容：

if(event && event.path && event.path.includes('.')) {
    // split on the `.` to return just the component ID
    return event.path.split('.')[1];
}

保存更改。

导航到​ 数据元素 ​部分，然后单击​ 添加新数据元素。

对于​ Name ​字段，请输入​ 组件标题。

对于​ 数据元素类型 ​字段，请选择​ 自定义代码。

单击​ 打开编辑器 ​按钮，然后在自定义代码编辑器中输入以下内容：

if(event && event.component && event.component.hasOwnProperty('dc:title')) {
    return event.component['dc:title'];
}

保存更改。

在标记属性UI中，导航到之前创建的​ CTA Clicked ​规则。

在​ 条件 ​下，单击​ 添加 ​以打开​ 条件配置 ​向导。

对于​ 条件类型 ​字段，请选择​ 自定义代码。

单击​ 打开编辑器，然后在自定义代码编辑器中输入以下内容：

if(event && event.component && event.component.hasOwnProperty('@type')) {
    // console.log("Event Type: " + event.component['@type']);
    //Check for Button Type OR Teaser CTA type
    if(event.component['@type'] === 'wknd/components/button' ||
       event.component['@type'] === 'wknd/components/teaser/cta') {
        return true;
    }
}

// none of the conditions are met, return false
return false;

上述代码首先检查资源类型是否来自​ Button，或者资源类型是否来自​ Teaser ​中的CTA。

保存更改。

在​ CTA Clicked ​规则中，删除 Core - Custom Code ​操作（控制台语句）：

在“操作”下，单击​ 添加 ​以创建操作。

将​ 扩展 ​类型设置为​ Adobe Analytics ​并将​ 操作类型 ​设置为​ 设置变量。

为​ eVars、Props ​和​ Events ​设置以下值：

• evar8 - %Component ID%
• prop8 - %Component ID%
• event8

接下来，通过点按​ 加上 ​图标，在​ Adobe Analytics — 设置变量 ​的右侧添加一个额外的操作：

将​ 扩展 ​类型设置为​ Adobe Analytics，并将​ 操作类型 ​设置为​ 发送信标。

在​ 跟踪 ​下，将单选按钮设置为​ s.tl()。

对于​ 链接类型 ​字段，请选择​ 自定义链接，对于​ 链接名称，将值设置为： %Component Title%: CTA Clicked：

上述配置合并了数据元素​ 组件标题 ​中的动态变量和Clicked 的静态字符串 CTA。

保存更改。 CTA Clicked ​规则现在应具有以下配置：

• 1。 ​收听cmp:click事件。
• 2。 ​检查该事件是否由​ Button ​或​ Teaser ​触发。
• 3。 ​将Analytics变量设置为将​ 组件ID ​作为​ eVar、prop ​和​ 事件 ​进行跟踪。
• 4。 ​发送Analytics跟踪链接信标（并​ 不 ​将其视为页面查看）。

保存所有更改并构建标记库，提升到适当的环境。

在浏览器中打开WKND网站。

单击Debugger图标 以打开Experience PlatformDebugger。

如前面所述，确保Debugger将标记属性映射到​ 您的 ​开发环境，并检查​ 控制台日志记录。

打开Analytics菜单，并确认已将报表包设置为​ 您的 ​报表包。

在浏览器中，单击​ Teaser ​或​ 按钮 CTA按钮之一导航到其他页面。

要单击的

返回Experience Platform调试器，向下滚动并展开​ 网络请求 > 您的报表包。 您应该能够找到​ eVar、prop ​和​ 事件 ​集。

返回浏览器并打开开发人员控制台。 导航到站点的页脚，然后单击其中一个导航链接：

在浏览器控制台中观察到，未满足规则“CTA已单击”的消息​ “自定义代码”。

出现上述消息是因为导航组件确实触发了cmp:click事件​ 但，因为检查资源类型的规则🔗的条件未执行任何操作。