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

将事件驱动的Adobe客户端数据层与AEM核心组件结合使用，跟踪Adobe Experience Manager网站上特定组件的单击情况。了解如何使用 Experience Platform Launch 中的规则来侦听单击事件、按组件筛选并在带跟踪链接信标的情况下将数据发送到 Adobe Analytics。

将构建的内容

WKND营销团队希望了解哪个行动动员(CTA)按钮在主页上的表现最佳。在本教程中，我们将在Experience Platform Launch中添加一个新规则，该规则监听Teaser和Button组件中的cmp:click事件，并将组件ID和新事件与跟踪链接信标一起发送到Adobe Analytics。

将构建的内容跟踪点击量

目标

在Launch中根据cmp:click事件创建事件驱动的规则。
按组件资源类型筛选不同事件。
设置已单击的组件ID，并使用跟踪链接信标发送事件Adobe Analytics。

前提条件

本教程将继续使用Adobe Analytics收集页面数据，并假定您具有：

启用了Adobe Analytics扩展的Launch属性
Adobe Analyticst/dev报表包ID和跟踪服务器。有关创建新报表包的信息，请参阅以下文档。
Experience Platform Debuggerbrowser扩展配置了您的Launch资产，该资产在https://wknd.site/us/en. html或AEM网站上加载，并且启用了Adobe数据层。

Inspect按钮和Teaser架构

在Launch中制定规则之前，请查看 Button和Teaser的架构，并在数据层实施中检查它们。

导航到https://wknd.site/us/en.html
打开浏览器的开发人员工具并导航到Console。运行以下命令：
```
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"

这些参数基于组件/容器项目架构。我们将在Launch中创建的规则将使用此架构。

创建已单击CTA的规则

Adobe客户端数据层是一个事件驱动的数据层。单击任何核心组件后，将通过数据层调度cmp:click事件。接下来，创建一个规则来监听cmp:click事件。

导航到Experience Platform Launch，并导航到与AEM Site集成的Web属性。
导航到Launch UI中的Rules部分，然后单击Add Rule。
将规则命名为CTA Clicked。
单击事件 > 添加以打开事件配置向导。
在事件类型下，选择自定义代码。

单击主面板中的Open Editor ，然后输入以下代码片段：

var componentClickedHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger Launch 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 Launch Rule, passing in the new `event` object
      // the `event` obj can now be referenced by the reserved name `event` by other Launch 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() 是Launch中的保留名称，将“触发”Launch规则。我们将event对象作为参数进行传递，该参数又将在Launch中由名为event的其他保留名称公开。 Launch中的数据元素现在可以引用各种属性，如下所示：event.component['someKey']。

保存更改。
接下来，在Actions下，单击Add以打开Action Configuration向导。
在Action Type下，选择Custom Code。
单击主面板中的Open Editor ，然后输入以下代码片段：
```
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 的当前状态。
在Launch中保存更改并运行build，以将代码提升到AEM Site上使用的environment。

注意

使用Adobe Experience Platform Debugger将嵌入代码切换到Development环境会非常有用。
导航到WKND Site并打开开发人员工具以查看控制台。选择保留日志。
单击Teaser或Button CTA按钮之一可导航到其他页面。
在开发人员控制台中，观察是否已触发CTA Clicked规则：

创建数据元素

接下来，创建一个数据元素以捕获已单击的组件ID和标题。回想一下，在上一次练习中，event.path的输出与component.button-b6562c963d类似，而event.component['dc:title']的值与“查看行程”类似。

组件ID

导航到Experience Platform Launch，并导航到与AEM Site集成的Web属性。
导航到数据元素部分，然后单击添加新数据元素。
对于名称，输入组件ID。
对于数据元素类型，选择自定义代码。
单击Open Editor并在自定义代码编辑器中输入以下内容：
```
if(event && event.path && event.path.includes('.')) {
    // split on the `.` to return just the component ID
    return event.path.split('.')[1];
}
```
保存更改。

注意

请记住，event对象已可用，其范围基于在Launch中触发Rule的事件。只有在规则中引用了referenced数据元素后，才会设置数据元素的值。因此，在诸如在上一个练习中创建的CTA Clicked规则（但在其他上下文中使用）之类的规则中使用此数据元素是安全的。

组件标题

导航到数据元素部分，然后单击添加新数据元素。
对于名称，输入组件标题。
对于数据元素类型，选择自定义代码。

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

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

保存更改。

向“已单击CTA”规则添加条件

接下来，更新CTA Clicked规则，以确保规则仅在为Teaser或Button触发cmp:click事件时触发。由于Teaser的CTA在数据层中被视为单独的对象，因此务必检查父级以验证它是否来自Teaser。

在Launch UI中，导航到之前创建的CTA已单击规则。
在Conditions下，单击Add以打开Condition Configuration向导。
对于条件类型，选择自定义代码。

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

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。

保存更改。

设置Analytics变量并触发跟踪链接信标

当前，CTA Clicked规则只输出控制台语句。接下来，使用数据元素和Analytics扩展将Analytics变量设置为action。我们还将设置其他操作来触发跟踪链接，并将收集的数据发送到Adobe Analytics。

在CTA Clicked规则删除 Core - Custom Code操作（控制台语句）中：
在Actions下，单击Add以添加新操作。
将Extension类型设置为Adobe Analytics，并将Action Type设置为Set Variables。
为eVars、Props和Events设置以下值：
- evar8 - %Component ID%
- prop8 - %Component ID%
- event8
注意

此处使用%Component ID%，因为它将获取已单击CTA的唯一标识符。使用%Component ID%的潜在缺点是Analytics报表将包含button-2e6d32893a等值。使用%Component Title%可提供更人性化的友好名称，但值可能不唯一。
接下来，通过点按加号图标，在Adobe Analytics - Set Variables的右侧添加一个额外的操作：
将Extension类型设置为Adobe Analytics，并将Action Type设置为Send Beacon。
在Tracking下，将单选按钮设置为s.tl()。
对于链接类型，选择自定义链接，对于链接名称，将值设置为：%Component Title%: CTA Clicked:

这将合并数据元素组件标题中的动态变量和静态字符串CTA Clicked中的动态变量。
保存更改。现在，CTA Clicked规则应具有以下配置：
- 1. 监听事 cmp:click 件。
- 2. 检查事件是否由Buttonor Teaser 触发。
- 3. 将Analytics变量设置为以跟踪组件ID 、eVar 、属性和事件。
- 4. 发送Analytics跟踪链接信标(并且不要将其视为页面查看)。
保存所有更改并构建Launch库，然后将其提升到相应的环境。

验证跟踪链接信标和Analytics调用

现在，CTA已单击规则发送Analytics信标，您应该能够使用Experience Platform调试器查看Analytics跟踪变量。

在浏览器中打开WKND Site。
单击Debugger图标以打开Experience PlatformDebugger。
如前面所述，确保Debugger将Launch资产映射到您的开发环境，并选中控制台日志记录。
打开Analytics菜单，并验证报表包是否设置为您的报表包。
在浏览器中，单击Teaser或Button CTA按钮之一以导航到另一个页面。
返回Experience Platform调试器并向下滚动到网络请求 > 您的报表包。您应该能够找到eVar、prop和事件集。
返回到浏览器并打开开发人员控制台。导航到网站的页脚，然后单击其中一个导航链接：
在浏览器控制台中，观察未满足规则“已单击CTA”的消息"Custom Code"。

这是因为导航组件确实会触发cmp:click事件，但，因为我们根据资源类型检查了，因此不会执行任何操作。

注意

如果看不到任何控制台日志，请确保在Experience Platform调试器的Launch下选中控制台日志记录。