使用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属性。

导航至 规则 部分，然后单击 添加规则.

命名规则 已单击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 规则已触发：

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

导航至 数据元素 部分并单击 添加新数据元素.

对象 名称 字段，输入 组件Id.

对象 数据元素类型 字段，选择 自定义代码.

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

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

保存更改。

导航至 数据元素 部分并单击 添加新数据元素.

对象 名称 字段，输入 组件标题.

对象 数据元素类型 字段，选择 自定义代码.

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

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

保存更改。

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

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

对象 完成情况类型 字段，选择 自定义代码.

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

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;

上述代码首先检查资源类型是否来自 按钮 或者，资源类型是否来自内的CTA Teaser.

保存更改。

在 已单击CTA 规则， 移除 该 核心 — 自定义代码 操作（控制台语句）：

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

设置 扩展名 键入至 Adobe Analytics 并设置 操作类型 到 设置变量.

设置以下值 eVar， Prop、和 活动：

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

接下来，在 Adobe Analytics — 设置变量 通过点按 加 图标：

设置 扩展名 键入至 Adobe Analytics 并设置 操作类型 到 发送信标.

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

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

上述配置组合了数据元素中的动态变量 组件标题 和静态字符串 已单击CTA.

保存更改。 此 已单击CTA 规则现在应具有以下配置：

• 1. 聆听 cmp:click 事件。
• 2. 检查事件是否是由触发的 按钮 或 Teaser.
• 3. 设置Analytics变量以跟踪 组件Id 作为 eVar， prop，和 事件.
• 4. 发送Analytics跟踪链接信标(并 非 将其视为页面查看)。

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

打开 WKND站点 在浏览器中。

单击调试器图标 以打开Experience Platform调试器。

确保Debugger将标记属性映射到 您的 开发环境，如前面和 控制台日志记录 已选中。

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

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

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

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

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

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