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

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

将构建的内容

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

将构建的内容跟踪点击量

目标

  1. 根据 cmp:click 事件。
  2. 按组件资源类型筛选不同事件。
  3. 设置已单击的组件ID,并使用跟踪链接信标发送事件Adobe Analytics。

前提条件

本教程是 使用Adobe Analytics收集页面数据 并假定您具有:

Inspect按钮和Teaser架构

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

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

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

    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. 导航到 规则 ,然后单击 添加规则.

  3. 命名规则 已点击CTA.

  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. 下一个 操作 单击 添加 打开 操作配置 向导。

  9. 操作类型 选择 自定义代码.

    自定义代码操作类型

  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. 保存更改并运行 构建 将代码提升到 环境 在您的AEM网站上使用。

    注意

    使用 Adobe Experience Platform Debugger 将嵌入代码切换为 开发 环境。

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

  13. 单击 Teaser按钮 用于导航到其他页面的CTA按钮。

    单击CTA按钮

  14. 在开发人员控制台中,观察 已点击CTA 规则已触发:

    已单击CTA按钮

创建数据元素

接下来,创建一个数据元素以捕获已单击的组件ID和标题。 回顾上次练习中 event.path 类似于 component.button-b6562c963devent.component['dc:title'] 就象《观光旅行》一样。

组件ID

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

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

  3. 对于 名称 enter 组件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 对象可用,其范围取决于触发 规则 中。 只有在数据元素为 引用 在规则中。 因此,在规则内使用此数据元素是安全的,例如 已点击CTA 在上一个练习中创建的规则 在其他环境中使用将不安全。

组件标题

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

  2. 对于 名称 enter 组件标题.

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

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

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

    保存更改。

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

接下来,更新 已点击CTA 规则以确保规则仅在 cmp:clickTeaser按钮. 由于Teaser的CTA在数据层中被视为单独的对象,因此务必检查父级以验证它是否来自Teaser。

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

  2. 条件 单击 添加 打开 条件配置 向导。

  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;
    

    上述代码首先检查资源类型是否来自 按钮 然后检查资源类型是否来自 Teaser.

  5. 保存更改。

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

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

  1. 已点击CTA 规则 删除 the 核心 — 自定义代码 操作(控制台语句):

    删除自定义代码操作

  2. 在Actions下,单击 添加 以添加新操作。

  3. 设置 扩展 键入 Adobe Analytics 并设置 操作类型 to 设置变量.

  4. eVar, Prop​和 事件:

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

    设置eVarProp和事件

    注意

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

  5. 接下来,在 Adobe Analytics — 设置变量 点按 plus 图标:

    添加其他Launch操作

  6. 设置 扩展 键入 Adobe Analytics 并设置 操作类型 to 发送信标.

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

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

    发送链接信标的配置

    这将合并数据元素中的动态变量 组件标题 和静态字符串 已点击CTA.

  9. 保存更改。的 已点击CTA 规则现在应具有以下配置:

    最终启动配置

    • 1.cmp:click 事件。
    • 2. 检查事件是否由 按钮Teaser.
    • 3. 将Analytics变量设置为以跟踪 组件ID as eVar, prop,和 事件.
    • 4. 发送Analytics跟踪链接信标(并执行 not 视为页面查看)。
  10. 保存所有更改并构建Launch库,然后将其提升到相应的环境。

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

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

  1. 打开 WKND站点 中。

  2. 单击Debugger图标 Experience Platform Debugger图标 打开Experience Platform调试器。

  3. 确保Debugger将Launch资产映射到 您的 开发环境,如前面和 控制台日志记录 复选框。

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

    Analytics选项卡调试器

  5. 在浏览器中,单击 Teaser按钮 用于导航到其他页面的CTA按钮。

    单击CTA按钮

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

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

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

    单击页脚中的导航链接

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

    这是因为导航组件会触发 cmp:click 事件 由于我们检查了与资源类型对应的,因此不会执行任何操作。

    注意

    如果您看不到任何控制台日志,请确保 控制台日志记录 在下检查 Launch Experience Platform调试器中。

恭喜!

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

在此页面上