[集成]{class="badge positive"}

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

使用带AEM核心组件的事件驱动的Adobe客户端数据层跟踪Adobe Experience Manager站点上特定组件的单击情况。 了解如何使用tag属性中的规则来侦听单击事件,按组件进行筛选,以及使用跟踪链接信标将数据发送到Adobe Analytics。

您即将构建的内容 what-build

WKND营销团队有兴趣了解哪些Call to Action (CTA)按钮在主页上的表现最佳。 在本教程中,让我们向标记属性添加一个规则,用于侦听​ Teaser ​和​ Button ​组件中的cmp:click事件。 然后,将组件ID和新的事件与跟踪链接信标一起发送到Adobe Analytics。

您将生成哪些跟踪点击次数

目标 objective

  1. 在标记属性中创建一个事件驱动规则,以捕获cmp:click事件。
  2. 按组件资源类型筛选不同的事件。
  3. 设置组件ID并使用跟踪链接信标将事件发送到Adobe Analytics。

先决条件

本教程是使用Adobe Analytics收集页面数据的延续,并假定您拥有:

Inspect按钮和Teaser架构

在标记属性中创建规则之前,请检查Button和Teaser🔗的架构并在数据层实施中检查它们,这很有用。

  1. 导航到WKND主页

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

    code language-js
    adobeDataLayer.getState();
    

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

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

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

    按钮架构:

    code language-json
    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架构:

    code language-json
    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"
    

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

创建CTA点击规则

Adobe客户端数据层是​ 事件 ​驱动的数据层。 无论何时单击任何核心组件,都会通过数据层调度cmp:click事件。 要监听cmp:click事件,让我们创建一个规则。

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

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

  3. 将规则​ 命名为CTA已单击

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

  5. 对于​ 事件类型 ​字段,请选择​ 自定义代码

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

  6. 在主面板中单击​ 打开编辑器,然后输入以下代码片段:

    code language-js
    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'])引用各种属性。

  7. 保存更改。

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

  9. 对于​ 操作类型 ​字段,请选择​ 自定义代码

    自定义代码操作类型

  10. 在主面板中单击​ 打开编辑器,然后输入以下代码片段:

    code language-js
    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. 保存更改并在标记属性中运行内部版本,以将代码提升到AEM网站上使用的环境

    note note
    NOTE
    使用Adobe Experience Platform Debugger将嵌入代码切换到​ 开发 ​环境可能很有用。
  12. 导航到WKND站点并打开开发人员工具以查看控制台。 另外,选中​ 保留日志 ​复选框。

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

    要单击的 CTA按钮

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

    已单击 CTA按钮

创建数据元素

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

组件Id

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

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

  3. 对于​ Name ​字段,请输入​ 组件ID

  4. 对于​ 数据元素类型 ​字段,请选择​ 自定义代码

    组件ID数据元素表单

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

    code language-js
    if(event && event.path && event.path.includes('.')) {
        // split on the `.` to return just the component ID
        return event.path.split('.')[1];
    }
    
  6. 保存更改。

    note note
    NOTE
    请注意,event对象已变得可用,并根据在标记属性中触发​ 规则 ​的事件设定了作用域。 在数据元素在规则中为​ 引用 ​之前,不会设置数据元素的值。 因此,可以安全地在诸如上一步骤​ 中创建的​ Page Loaded ​规则内使用此数据元素,但 ​在其他上下文中使用是不安全的。

组件标题

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

  2. 对于​ Name ​字段,请输入​ 组件标题

  3. 对于​ 数据元素类型 ​字段,请选择​ 自定义代码

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

    code language-js
    if(event && event.component && event.component.hasOwnProperty('dc:title')) {
        return event.component['dc:title'];
    }
    
  5. 保存更改。

向CTA点击规则添加条件

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

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

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

  3. 对于​ 条件类型 ​字段,请选择​ 自定义代码

    CTA点击条件自定义代码

  4. 单击​ 打开编辑器,然后在自定义代码编辑器中输入以下内容:

    code language-js
    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变量设置为​ 操作。 让我们再设置一个额外的操作来触发​ 跟踪链接,并将收集的数据发送到Adobe Analytics。

  1. 在​ CTA Clicked ​规则中,删除 Core - Custom Code ​操作(控制台语句):

    删除自定义代码操作

  2. 在“操作”下,单击​ 添加 ​以创建操作。

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

  4. 为​ eVarsProps ​和​ Events ​设置以下值:

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

    设置eVarProp和事件

    note note
    NOTE
    使用了此处%Component ID%,因为它保证了所单击CTA的唯一标识符。 使用%Component ID%的潜在缺点是Analytics报表包含诸如button-2e6d32893a之类的值。 使用%Component Title%会提供一个更人性化的名称,但值可能不是唯一的。
  5. 接下来,通过点按​ 加上 ​图标,在​ Adobe Analytics — 设置变量 ​的右侧添加一个额外的操作:

    向标记规则添加额外操作

  6. 将​ 扩展 ​类型设置为​ Adobe Analytics,并将​ 操作类型 ​设置为​ 发送信标

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

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

    配置发送链接信标

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

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

    最终标记规则配置

    • 1。 ​收听cmp:click事件。
    • 2。 ​检查该事件是否由​ Button ​或​ Teaser ​触发。
    • 3。 ​将Analytics变量设置为将​ 组件ID ​作为​ eVarprop ​和​ 事件 ​进行跟踪。
    • 4。 ​发送Analytics跟踪链接信标(并​ ​将其视为页面查看)。
  10. 保存所有更改并构建标记库,提升到适当的环境。

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

现在​ CTA Clicked ​规则发送了Analytics信标,您应该能够使用Analytics Debugger查看Experience Platform跟踪变量。

  1. 在浏览器中打开WKND网站

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

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

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

    Analytics选项卡调试器

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

    要单击的 CTA按钮

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

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

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

    单击页脚中的导航链接

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

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

    note note
    NOTE
    如果未看到任何控制台日志,请确保在Experience Platform调试器的​ Experience Platform标记 ​下选中​ 控制台日志记录

恭喜!

您刚刚在Experience Platform中使用了事件驱动的Adobe客户端数据层和标记来跟踪AEM网站上特定组件的单击情况。

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d