使用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. 为​eVarsProps​和​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调试器并向下滚动到​网络请求 > 您的报表包。 您应该能够找到​eVarprop​和​事件​集。

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

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

    单击页脚中的导航链接

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

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

    注意

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

恭喜!

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

在此页面上