使用Adobe Analytics收集页面数据

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

将构建的内容

页面数据跟踪

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

目标

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

前提条件

需要满足以下条件：

Experience Platform LaunchProperty
Adobe Analyticst/dev报表包ID和跟踪服务器。有关创建新报表包的信息，请参阅以下文档。
Experience Platform Debuggerbrowser扩展。本教程中的屏幕截图是从Chrome浏览器捕获的。
（可选）启用Adobe客户端数据层的AEM Site。本教程将使用面向公众的站点https://wknd.site/us/en.html，但欢迎您使用自己的站点。

注意

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

为WKND站点切换Launch环境

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

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

登录Experience Platform Launch并创建Launch资产（如果尚未登录）。
确保已创建初始的Launch 库并将其提升到Launch 环境。
从库已发布到的环境中复制Launch嵌入代码。
在您的浏览器中打开一个新选项卡，然后导航到https://wknd.site/
打开Experience Platform调试器浏览器扩展
导航到Launch > 配置，并在插入的嵌入代码下，将现有的Launch嵌入代码替换为从步骤3复制的嵌入代码。
在WKND选项卡上启用控制台日志记录和锁定调试器。

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

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

导航到https://wknd.site。
打开浏览器的开发人员工具并导航到Console。运行以下命令：
```
adobeDataLayer.getState();
```
这会返回Adobe客户端数据层的当前状态。

展开响应并检查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:title、xdm:language和xdm:template派生的标准属性，将页面数据发送到Adobe Analytics。

注意

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

创建Page Loaded规则

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

导航到Experience Platform Launch，并导航到与AEM Site集成的Web属性。
导航到Launch UI中的Rules部分，然后单击创建新规则。
将规则命名为Page Loaded。
单击Events Add以打开Event Configuration向导。
在事件类型下，选择自定义代码。

单击主面板中的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']。

保存更改。
接下来，在Actions下，单击Add以打开Action Configuration向导。
在Action Type下，选择Custom Code。
单击主面板中的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 生的当前页面。回顾之前由数据层公开的页面架构，以查看现成公开的各种键值。
在Launch中保存更改并运行build，以将代码提升到AEM Site上使用的environment。

注意

使用Adobe Experience Platform Debugger将嵌入代码切换到Development环境会非常有用。
导航到您的AEM站点并打开开发人员工具以查看控制台。刷新页面，此时您应会看到控制台消息已记录：

创建数据元素

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

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

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

组件资源类型

导航到Experience Platform Launch，并导航到与AEM Site集成的Web属性。
导航到数据元素部分，然后单击新建数据元素。
对于名称，输入组件资源类型。
对于数据元素类型，选择自定义代码。
单击Open Editor并在自定义代码编辑器中输入以下内容：
```
if(event && event.component && event.component.hasOwnProperty('@type')) {
    return event.component['@type'];
}
```
保存更改。

注意

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

页面名称

单击Add Data Element。
对于名称，输入页面名称。
对于数据元素类型，选择自定义代码。

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

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

保存更改。

页面模板

单击Add Data Element。
对于名称，输入页面模板。
对于数据元素类型，选择自定义代码。

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

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

保存更改。

现在，您的规则中应包含三个数据元素：

添加Analytics扩展

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

导航到Experience Platform Launch，并导航到与AEM Site集成的Web属性。
转到Extensions > Catalog
找到Adobe Analytics扩展，然后单击Install
在库管理 > 报表包下，输入要在每个Launch环境中使用的报表包ID。

注意

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

小贴士

我们建议使用Manage the library for me选项作为库管理设置，因为这样可以更轻松地使AppMeasurement.js库保持为最新。
选中方框以启用使用Activity Map。
在General > Tracking Server下，输入您的跟踪服务器，例如tmd.sc.omtrdc.net。如果您的网站支持https://，请输入SSL跟踪服务器
单击Save以保存更改。

向Page Loaded规则添加条件

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

在Launch UI中，导航到之前创建的Page Loaded规则。
在Conditions下，单击Add以打开Condition Configuration向导。
对于条件类型，选择值比较。
将表单字段中的第一个值设置为%Component Resource Type%。可以使用数据元素图标选择组件资源类型数据元素。将比较器设置为Equals。
将第二个值设置为wknd/components/page。

注意

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

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

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

在Page Loaded规则remove Core - Custom Code操作（控制台语句）中：
在Actions下，单击Add以添加新操作。
将Extension类型设置为Adobe Analytics，并将Action Type设置为Set Variables
在主面板中，选择一个可用的eVar并将其设置为数据元素页面模板的值。使用“数据元素”图标选择页面模板元素。
向下滚动，在其他设置下，将页面名称设置为数据元素页面名称:

保存更改。
接下来，通过点按加号图标，在Adobe Analytics - Set Variables的右侧添加一个额外的操作：
将Extension类型设置为Adobe Analytics，并将Action Type设置为Send Beacon。由于这被视为页面查看，因此请将默认跟踪设置保留为s.t()。
保存更改。Page Loaded规则现在应具有以下配置：
- 1. 监听事 cmp:show 件。
- 2. 检查事件是否由页面触发。
- 3. 为页面名称和页面模板设置 Analytics变量
- 4. 发送Analytics页面查看信标
保存所有更改并构建Launch库，然后将其提升到相应的环境。

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

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

在浏览器中打开WKND Site。
单击Debugger图标以打开Experience PlatformDebugger。
如前面所述，确保Debugger将Launch资产映射到您的开发环境，并选中控制台日志记录。
打开Analytics菜单，并验证报表包是否设置为您的报表包。还应填充页面名称：
向下滚动并展开网络请求。您应该能够找到为页面模板设置的evar:
返回到浏览器并打开开发人员控制台。单击页面顶部的轮播。
在浏览器控制台中，观察控制台语句：

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

注意

如果看不到任何控制台日志，请确保在Experience Platform调试器的Launch下选中控制台日志记录。
导航到Western Australia之类的文章页面。观察页面名称和模板类型更改。