使用Adobe Analytics收集页面数据

注意

Adobe Experience Platform Launch已更名为Adobe Experience Platform中的一套数据收集技术。 因此,在整个产品文档中推出了几项术语更改。 请参阅以下内容 文档 ,以了解术语更改的综合参考。

了解如何使用 使用AEM核心组件Adobe客户端数据层 收集有关Adobe Experience Manager Sites中某个页面的数据。 Experience Platform中的标记Adobe Analytics扩展 用于创建规则以将页面数据发送到Adobe Analytics。

您即将构建的内容

页面数据跟踪

在本教程中,您将根据Adobe客户端数据层中的事件触发标记规则。 此外,为应触发规则的时间添加条件,然后发送 页面名称页面模板 “AEM页面”到Adobe Analytics的值。

目标

  1. 在tag属性中创建一个事件驱动规则,以从数据层捕获更改
  2. 将页面数据层属性映射到标记属性中的数据元素
  3. 使用页面查看信标收集页面数据并将其发送到Adobe Analytics

前提条件

需要以下各项:

  • 标记属性 在Experience Platform中
  • Adobe Analytics 测试/开发报表包ID和跟踪服务器。 请参阅以下文档,了解 创建报表包.
  • Experience Platform调试器 浏览器扩展。 从Chrome浏览器捕获了本教程中的屏幕截图。
  • (可选)带有的AEM Site Adobe客户端数据层已启用. 本教程使用public facing WKND 站点,但欢迎您使用自己的站点。
注意

需要有关集成标记属性和AEM站点的帮助吗? 观看此视频系列.

为WKND站点切换标记环境

WKND 是面向公众的站点,构建于 开源项目 设计作为参考和 教程 适用于AEM实施。

您可以使用Experience Platform调试器执行以下操作,而不是设置AEM环境和安装WKND代码库 切换 实时 WKND站点您的 标记属性。 但是,如果您自己的AEM站点已经具有 Adobe客户端数据层已启用.

  1. 登录Experience Platform和 创建标记属性 (如果您尚未这样做)。

  2. 确保初始标记JavaScript 已创建库 并提升到标记 环境.

  3. 从已将库发布到的标记环境中复制JavaScript嵌入代码。

    复制标记属性嵌入代码

  4. 在浏览器中,打开新选项卡并导航到 WKND站点

  5. 打开Experience PlatformDebugger浏览器扩展

    Experience Platform调试器

  6. 导航到 Experience Platform标记 > 配置 和下 插入的内嵌代码 将现有嵌入代码替换为 您的 从步骤3复制的嵌入代码。

    替换嵌入代码

  7. 启用 控制台日志记录锁定 “WKND”选项卡上的调试器。

    控制台日志记录

验证WKND站点上的Adobe客户端数据层

WKND参考项目 是使用AEM核心组件构建的,具有 Adobe客户端数据层已启用 默认情况下。 接下来,验证是否已启用Adobe客户端数据层。

  1. 导航到 WKND站点.

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

    adobeDataLayer.getState();
    

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

    Adobe数据层状态

  3. 展开响应并检查 page 登入。 您应会看到类似以下的数据架构:

    page-2eee4f8914:
        @type: "wknd/components/page"
        dc:description: WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.
        dc:title: "WKND Adventures and Travel"
        repo:modifyDate: "2020-08-31T21:02:21Z"
        repo:path: "/content/wknd/us/en.html"
        xdm:language: "en-US"
        xdm:tags: ["Attract"]
        xdm:template: "/conf/wknd/settings/wcm/templates/landing-page-template"
    

    要将页面数据发送到Adobe Analytics,让我们使用标准资产,例如 dc:titlexdm:language、和 xdm:template 数据层的ID。

    欲了解更多信息,请查看 页面架构 从核心组件数据架构中。

    注意

    如果您没有看到 adobeDataLayer JavaScript对象? 确保 已启用Adobe客户端数据层 在您的网站上。

创建Page Loaded规则

Adobe客户端数据层是 事件 驱动数据层。 加载AEM Page数据层时,将触发 cmp:show 事件。 创建在以下情况下触发的规则: cmp:show 事件从页面数据层触发。

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

  2. 导航到 规则 部分,然后单击 创建新规则.

    创建规则

  3. 命名规则 页面已加载.

  4. 事件 子部分,单击 添加 以打开 事件配置 向导。

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

    命名规则并添加自定义代码事件

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

    var pageShownEventHandler = function(evt) {
       // defensive coding to avoid a null pointer exception
       if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
          //trigger the Tag Rule and pass event
          console.log("cmp:show 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 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:show into the data layer
    window.adobeDataLayer.push(function (dl) {
       //add event listener for `cmp:show` and callback to the `pageShownEventHandler` function
       dl.addEventListener("cmp:show", pageShownEventHandler);
    });
    

    上述代码片段通过以下方式添加事件侦听器 推送函数 到数据层中。 时间 cmp:show 事件触发于 pageShownEventHandler 调用函数。 在此函数中,添加了一些健全性检查和一个新的 event 使用最新的 数据层的状态 用于触发事件的组件。

    最后 trigger(event) 调用函数。 此 trigger() 函数是标记属性中的保留名称,它 触发器 规则。 此 event 对象作为参数传递,该参数随后被标记属性中的另一个保留名称公开。 标记属性中的数据元素现在可以使用代码段(如)引用各种属性 event.component['someKey'].

  7. 保存更改。

  8. 下一下 操作 点击 添加 以打开 操作配置 向导。

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

    Custom Code操作类型

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

    console.log("Page Loaded ");
    console.log("Page name: " + event.component['dc:title']);
    console.log("Page type: " + event.component['@type']);
    console.log("Page template: " + event.component['xdm:template']);
    

    event 对象传递自 trigger() 在自定义事件中调用的方法。 此处 component 是从数据层派生的当前页面 getState 在自定义事件中。

  11. 保存更改并运行 生成 标记属性中的代码,以将代码提升到 环境 在您的AEM网站上使用。

    注意

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

  12. 导航到您的AEM站点,然后打开开发人员工具以查看控制台。 刷新该页,您应该会看到控制台消息已被记录:

页面加载的控制台消息

创建数据元素

接下来,创建多个数据元素以从Adobe客户端数据层捕获不同的值。 如上一个练习中所见,可以直接通过自定义代码访问数据层的属性。 使用数据元素的优势在于它们可以在标记规则中重复使用。

数据元素映射到 @typedc:title、和 xdm:template 属性。

组件资源类型

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

  2. 导航到 数据元素 部分并单击 创建新数据元素.

  3. 对于 名称 字段中,输入 组件资源类型.

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

    组件资源类型

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

    if(event && event.component && event.component.hasOwnProperty('@type')) {
        return event.component['@type'];
    }
    
  6. 保存更改。

    注意

    请记住 event 对象将变得可用,并根据触发该对象的 规则 标记属性中的。 直到数据元素为 已引用 在规则中。 因此,在规则内使用此数据元素是安全的,例如 页面已加载 在上一步中创建的规则 但是 在其他环境中使用是不安全的。

页面名称

  1. 单击 添加数据元素 按钮

  2. 对于 名称 字段,输入 页面名称.

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

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

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

页面模板

  1. 单击 添加数据元素 按钮

  2. 对于 名称 字段,输入 页面模板.

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

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

    if(event && event.component && event.component.hasOwnProperty('xdm:template')) {
        return event.component['xdm:template'];
    }
    
  5. 保存更改。

  6. 规则中现在应包含三个数据元素:

    规则中的数据元素

添加Analytics扩展

接下来,将Analytics扩展添加到标记资产,以将数据发送到报表包。

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

  2. 转到 扩展 > 目录

  3. 找到 Adobe Analytics 扩展并单击 安装

    Adobe Analytics扩展

  4. 库管理 > 报表包,输入要用于每个标记环境的报表包id。

    输入报表包id

    注意

    在本教程中,您可以将一个报表包用于所有环境,但在现实工作中,您需要使用单独的报表包,如下图所示

    小贴士

    我们建议使用 “为我管理库”选项 作为Library Management设置,因为它使保留 AppMeasurement.js 库为最新。

  5. 选中方框以启用 使用Activity Map.

    启用使用Activity Map

  6. 常规 > 跟踪服务器,输入您的跟踪服务器,例如, tmd.sc.omtrdc.net. 如果您的网站支持,请输入SSL跟踪服务器 https://

    输入跟踪服务器

  7. 单击 保存 以保存更改。

向Page Loaded规则添加条件

接下来,更新 页面已加载 规则以使用 组件资源类型 数据元素,以确保规则仅在 cmp:show 事件用于 页面. 其他组件可以触发 cmp:show 事件,例如,当幻灯片发生更改时,轮盘组件会触发该事件。 因此,请务必为此规则添加条件。

  1. 在标记属性UI中,导航到 页面已加载 之前创建的规则。

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

  3. 对象 完成情况类型 字段,选择 值比较 选项。

  4. 将表单字段中的第一个值设置为 %Component Resource Type%. 您可以使用数据元素图标 数据元素图标 以选择 组件资源类型 数据元素。 将比较器保留设置为 Equals.

  5. 将第二个值设置为 wknd/components/page.

    页面加载规则的条件配置

    注意

    可以在监听的自定义代码函数中添加此条件 cmp:show 之前在教程中创建的事件。 但是,将其添加到UI中可让可能需要对规则进行更改的其他用户更加可见。 此外,我们还可以使用数据元素!

  6. 保存更改。

设置Analytics变量并触发页面查看信标

目前 页面已加载 规则仅输出控制台语句。 接下来,使用数据元素和Analytics扩展将Analytics变量设置为 操作页面已加载 规则。 我们还设置了额外的操作来触发 页面查看信标 并将收集的数据发送到Adobe Analytics。

  1. 在Page Loaded规则中, 移除核心 — 自定义代码 操作(控制台语句):

    删除自定义代码操作

  2. 在操作子部分下,单击 添加 以添加新操作。

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

    将操作扩展设置为Analytics集变量

  4. 在主面板中,选择一个可用的 eVar 和设置为数据元素的值 页面模板. 使用数据元素图标 数据元素图标 以选择 页面模板 元素。

    设置为eVar页面模板

  5. 向下滚动,下 其他设置 设置 页面名称 到数据元素 页面名称

    页面名称环境变量集

  6. 保存更改。

  7. 接下来,在右边添加一个额外的“操作” Adobe Analytics — 设置变量 点按 图标:

    添加其他Tag Rule操作

  8. 设置 扩展 键入到 Adobe Analytics 并设置 操作类型发送信标. 由于此操作被视为页面查看,因此请将默认跟踪设置为 s.t().

    “发送信标Adobe Analytics”操作

  9. 保存更改。此 页面已加载 规则现在应具有以下配置:

    最终标记规则配置

    • 1. 聆听 cmp:show 事件。
    • 2. 检查事件是否由页面触发。
    • 3. 将Analytics变量设置为 页面名称页面模板
    • 4. 发送Analytics页面查看信标
  10. 保存所有更改并构建标记库,提升到适当的环境。

验证页面查看信标和Analytics调用

现在, 页面已加载 规则将发送Analytics信标,您应该能够使用Experience Platform调试器查看Analytics跟踪变量。

  1. 打开 WKND站点 在浏览器中。

  2. 单击“调试器”图标 Experience Platform Debugger图标 以打开Experience PlatformDebugger。

  3. 确保Debugger将标记属性映射到 您的 开发环境,如前面和中所述 控制台日志记录 已选中。

  4. 打开Analytics菜单,并确认已将报表包设置为 您的 报表包。 此外,还应填充页面名称:

    Analytics选项卡调试器

  5. 向下滚动并展开 网络请求. 您应该能够找到 evar页面模板

    设置Evar和页面名称

  6. 返回浏览器并打开开发人员控制台。 点击 轮播 页面顶部的。

    点进轮播页面

  7. 在浏览器控制台中观察控制台语句:

    未满足条件

    这是因为轮播会触发 cmp:show 事件 但是 因为我们检查了 组件资源类型,则不会触发任何事件。

    注意

    如果您没有看到任何控制台日志,请确保 控制台日志记录 已检查 Experience Platform标记 在Experience PlatformDebugger中。

  8. 导航到文章页面,例如 西澳大利亚. 观察页面名称和模板类型的变化。

恭喜!

您刚刚在Experience Platform中使用事件驱动的Adobe客户端数据层和标记从AEM Site中收集数据页面数据并将其发送到Adobe Analytics。

后续步骤

请查看以下教程,了解如何使用事件驱动的Adobe客户端数据层 跟踪Adobe Experience Manager网站上特定组件的单击次数.

在此页面上