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

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

将构建的内容

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

将构建的内容跟踪点击量

目标

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

前提条件

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

Inspect按钮和Teaser架构

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

  1. 导航到https://wknd.site/us/en.html

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

    adobeDataLayer.getState();

    这会返回Adobe客户端数据层的当前状态。

    通过浏览器控制台的数据层状态

  3. 展开响应并查找前缀为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事件。

  1. 导航到Experience Platform Launch，并导航到与AEM Site集成的Web属性。

  2. 导航到Launch UI中的​Rules​部分，然后单击​Add Rule。

  3. 将规则命名为​CTA Clicked。

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

  5. 在​事件类型​下，选择​自定义代码。

    将规则命名为“CTA已单击”并添加自定义代码事件

  6. 单击主面板中的​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']。

  7. 保存更改。

  8. 接下来，在​Actions​下，单击​Add​以打开​Action Configuration​向导。

  9. 在​Action Type​下，选择​Custom Code。

    自定义代码操作类型

  10. 单击主面板中的​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 的当前状态。

  11. 在Launch中保存更改并运行build，以将代码提升到AEM Site上使用的environment。

    注意

    使用Adobe Experience Platform Debugger将嵌入代码切换到​Development​环境会非常有用。

  12. 导航到WKND Site并打开开发人员工具以查看控制台。 选择​保留日志。

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

    单击CTA按钮

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

    已单击CTA按钮

创建数据元素

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

组件ID

  1. 导航到Experience Platform Launch，并导航到与AEM Site集成的Web属性。

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

  3. 对于​名称，输入​组件ID。

  4. 对于​数据元素类型，选择​自定义代码。

    组件ID数据元素表单

  5. 单击​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​规则（但在其他上下文中使用）之类的规则中使用此数据元素是安全的。

组件标题

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

  2. 对于​名称，输入​组件标题。

  3. 对于​数据元素类型，选择​自定义代码。

  4. 单击​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。

  1. 在Launch UI中，导航到之前创建的​CTA已单击​规则。

  2. 在​Conditions​下，单击​Add​以打开​Condition Configuration​向导。

  3. 对于​条件类型，选择​自定义代码。

    CTA点击条件自定义代码

  4. 单击​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。

  5. 保存更改。

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

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

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

    删除自定义代码操作

  2. 在Actions下，单击​Add​以添加新操作。

  3. 将​Extension​类型设置为​Adobe Analytics，并将​Action Type​设置为​Set Variables。

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

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

    设置eVarProp和事件

    注意

    此处使用%Component ID%，因为它将获取已单击CTA的唯一标识符。 使用%Component ID%的潜在缺点是Analytics报表将包含button-2e6d32893a等值。 使用%Component Title%可提供更人性化的友好名称，但值可能不唯一。

  5. 接下来，通过点按​加号​图标，在​Adobe Analytics - Set Variables​的右侧添加一个额外的操作：

    添加其他Launch操作

  6. 将​Extension​类型设置为​Adobe Analytics，并将​Action Type​设置为​Send Beacon。

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

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

    发送链接信标的配置

    这将合并数据元素​组件标题​中的动态变量和静态字符串​CTA Clicked​中的动态变量。

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

    最终启动配置

    • 1. 监听事 cmp:click 件。
    • 2. 检查事件是否由Buttonor ​​Teaser 触发。
    • 3. 将Analytics变量设置为以 跟 踪组件ID 、eVar 、属性​和 事件。
    • 4. 发送Analytics跟踪链接信标(并且不 ​​要将其视为页面查看)。

  10. 保存所有更改并构建Launch库，然后将其提升到相应的环境。

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

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

  1. 在浏览器中打开WKND Site。

  2. 单击Debugger图标Experience Platform Debugger图标以打开Experience PlatformDebugger。

  3. 如前面所述，确保Debugger将Launch资产映射到​您的​开发环境，并选中​控制台日志记录。

  4. 打开Analytics菜单，并验证报表包是否设置为​您的​报表包。

    Analytics选项卡调试器

  5. 在浏览器中，单击​Teaser​或​Button CTA按钮之一以导航到另一个页面。

    单击CTA按钮

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

    点击时跟踪的Analytics事件、evar和prop

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

    单击页脚中的导航链接

  8. 在浏览器控制台中，观察未满足规则“已单击CTA”的消息​"Custom Code"。

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

    注意

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

恭喜！

您刚刚使用事件驱动的Adobe客户端数据层和Experience Platform Launch来跟踪Adobe Experience Manager网站上特定组件的单击次数。

在此页面上