使用Adobe Analytics收集页面数据

了解如何将Adobe客户端数据层的内置功能与AEM核心组件一起使用来收集有关Adobe Experience Manager Sites中某个页面的数据。 Experience Platform Launch 和 Adobe Analytics 扩展将用于创建规则以将页面数据发送到 Adobe Analytics。 🔗

将构建的内容

页面数据跟踪

在本教程中,您将根据Adobe客户端数据层中的事件触发Launch规则,为应何时触发规则添加条件,并将AEM页面的​页面名称​和​页面模板​发送到Adobe Analytics。

目标

  1. 根据对数据层所做的更改,在Launch中创建事件驱动规则
  2. 在Launch中将页面数据层属性映射到数据元素
  3. 收集页面数据并通过页面查看信标发送到Adobe Analytics

前提条件

需要满足以下条件:

注意

需要将Launch与您的AEM网站集成的帮助? 请观看此视频系列

为WKND站点切换Launch环境

https://wknd.sites 基于开源项目构建的面向公众 的站点, 该项目设计为AEM实施的 🔗 参考和教程。

您可以使用Experience Platform调试器将实时https://wknd.site/切换到​您的 Launch资产,而不是设置AEM环境并安装WKND代码库。 ​当然,如果您自己的AEM站点已启用Adobe客户端数据层,则可以使用该站点

  1. 登录Experience Platform Launch并创建Launch资产(如果尚未登录)。

  2. 确保已创建初始的Launch 并将其提升到Launch 环境

  3. 从库已发布到的环境中复制Launch嵌入代码。

    复制Launch嵌入代码

  4. 在您的浏览器中打开一个新选项卡,然后导航到https://wknd.site/

  5. 打开Experience Platform调试器浏览器扩展

    Experience Platform调试器

  6. 导航到​Launch > 配置,并在​插入的嵌入代码​下,将现有的Launch嵌入代码替换为从步骤3复制的​嵌入代码。

    替换嵌入代码

  7. 在WKND选项卡上启用​控制台日志记录​和​锁定​调试器。

    控制台日志记录

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

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

  1. 导航到https://wknd.site

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

    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"
    

    我们将使用从数据层的页面架构dc:titlexdm:languagexdm:template派生的标准属性,将页面数据发送到Adobe Analytics。

    注意

    没有看到adobeDataLayer javascript对象? 确保在您的网站上启用了Adobe客户端数据层

创建Page Loaded规则

Adobe客户端数据层是一个​事件​驱动的数据层。 加载AEM Page​数据层时,将触发事件cmp:show。 创建将基于cmp:show事件触发的规则。

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

  2. 导航到Launch UI中的​Rules​部分,然后单击​创建新规则

    创建规则

  3. 将规则命名为​Page Loaded

  4. 单击​Events Add​以打开​Event Configuration​向导。

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

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

  6. 单击主面板中的​Open Editor ,然后输入以下代码片段:

    var pageShownEventHandler = 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: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 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: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() 是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("Page Loaded ");
    console.debug("Page name: " + event.component['dc:title']);
    console.debug("Page type: " + event.component['@type']);
    console.debug("Page template: " + event.component['xdm:template']);
    

    event对象从自定义事件中调用的trigger()方法传递。 component 是从自定义事件中的数据层派 getState 生的当前页面。回顾之前由数据层公开的页面架构,以查看现成公开的各种键值。

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

    注意

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

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

    Page Loaded控制台消息

创建数据元素

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

从之前的数据层公开的页面架构中回顾:

数据元素将映射到@typedc:titlexdm:template属性。

组件资源类型

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

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

  3. 对于​名称,输入​组件资源类型

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

    组件资源类型

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

    if(event && event.component && event.component.hasOwnProperty('@type')) {
        return event.component['@type'];
    }
    

    保存更改。

    注意

    请记住,event对象已可用,其范围基于在Launch中触发​Rule​的事件。 只有在规则中引用了​referenced​数据元素后,才会设置数据元素的值。 因此,在规则(如在上一步​中创建的​Page Loaded​规则)中使用此数据元素是安全的,但在其他上下文中使用​则不安全。

页面名称

  1. 单击​Add Data Element

  2. 对于​名称,输入​页面名称

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

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

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

    保存更改。

页面模板

  1. 单击​Add Data Element

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

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

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

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

    保存更改。

  5. 现在,您的规则中应包含三个数据元素:

    规则中的数据元素

添加Analytics扩展

接下来,将Analytics扩展添加到您的Launch资产中。 我们需要将此数据发送到某处!

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

  2. 转到​Extensions > Catalog

  3. 找到​Adobe Analytics​扩展,然后单击​Install

    Adobe Analytics扩展

  4. 在​库管理 > 报表包​下,输入要在每个Launch环境中使用的报表包ID。

    输入报表包ID

    注意

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

    小贴士

    我们建议使用​Manage the library for me选项​作为库管理设置,因为这样可以更轻松地使AppMeasurement.js库保持为最新。

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

    启用使用Activity Map

  6. 在​General > Tracking Server​下,输入您的跟踪服务器,例如tmd.sc.omtrdc.net。 如果您的网站支持https://,请输入SSL跟踪服务器

    输入跟踪服务器

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

向Page Loaded规则添加条件

接下来,更新​Page Loaded​规则以使用​组件资源类型​数据元素,以确保规则仅在​Page​的cmp:show事件发生时触发。 其他组件可以触发cmp:show事件,例如,当幻灯片发生更改时,轮播组件将触发该事件。 因此,为此规则添加条件很重要。

  1. 在Launch UI中,导航到之前创建的​Page Loaded​规则。

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

  3. 对于​条件类型,选择​值比较

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

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

    Page Loaded规则的条件配置

    注意

    可以在自定义代码函数中添加此条件,该函数用于侦听在教程前面创建的cmp:show事件。 但是,在UI中添加该规则,可让可能需要更改规则的其他用户看到更多内容。 此外,我们还可以使用数据元素!

  6. 保存更改。

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

当前,Page Loaded​规则只输出控制台语句。 接下来,使用数据元素和Analytics扩展将Analytics变量设置为​Page Loaded​规则中的​action。 我们还将设置其他操作以触发​页面查看信标​并将收集的数据发送到Adobe Analytics。

  1. 在​Page Loaded​规则​remove Core - Custom Code​操作(控制台语句)中:

    删除自定义代码操作

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

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

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

  4. 在主面板中,选择一个可用的​eVar​并将其设置为数据元素​页面模板​的值。 使用“数据元素”图标“数据元素”图标选择​页面模板​元素。

    设置为eVar页面模板

  5. 向下滚动,在​其他设置​下,将​页面名称​设置为数据元素​页面名称:

    页面名称环境变量集

    保存更改。

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

    添加其他Launch操作

  7. 将​Extension​类型设置为​Adobe Analytics,并将​Action Type​设置为​Send Beacon。 由于这被视为页面查看,因此请将默认跟踪设置保留为​s.t()

    Send Beacon Adobe Analytics操作

  8. 保存更改。Page Loaded​规则现在应具有以下配置:

    最终启动配置

    • 1. 监听事 cmp:show 件。
    • 2. 检查事件是否由页面触发。
    • 3. 为页面名称和页面模 设置 Analytics变量
    • 4. 发送Analytics页面查看信标
  9. 保存所有更改并构建Launch库,然后将其提升到相应的环境。

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

现在,Page Loaded​规则发送了Analytics信标,您应该能够使用Experience Platform调试器查看Analytics跟踪变量。

  1. 在浏览器中打开WKND Site

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

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

  4. 打开Analytics菜单,并验证报表包是否设置为​您的​报表包。 还应填充页面名称:

    Analytics选项卡调试器

  5. 向下滚动并展开​网络请求。 您应该能够找到为​页面模板​设置的​evar:

    Evar和页面名称集

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

    点进轮播页面

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

    不满足条件

    这是因为轮播会触发cmp:show事件​,但是​由于我们对​组件资源类型​进行了检查,因此不会触发任何事件。

    注意

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

  8. 导航到Western Australia之类的文章页面。 观察页面名称和模板类型更改。

恭喜!

您刚刚使用事件驱动的Adobe客户端数据层和Experience Platform Launch从AEM网站收集数据页面数据,并将其发送到Adobe Analytics。

后续步骤

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

在此页面上