使用Adobe Analytics收集页面数据

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

将构建的内容

页面数据跟踪

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

目标

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

前提条件

需要满足以下条件：

Experience Platform Launch 属性
Adobe Analytics 测试/开发报表包ID和跟踪服务器。请参阅以下文档以了解创建新报表包.
Experience Platform调试器浏览器扩展。本教程中的屏幕截图是从Chrome浏览器捕获的。
（可选）AEM Site与 Adobe客户端数据层已启用. 本教程将使用面向公众的网站 https://wknd.site/us/en.html 但欢迎您使用自己的网站。

注意

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

为WKND站点切换Launch环境

https://wknd.site 是基于开源项目设计为参考和教程适用于AEM实施。

您可以使用Experience Platform调试器，而不是设置AEM环境并安装WKND代码库开关实况 https://wknd.site/ to 您的启动资产。当然，如果您自己的AEM网站已经具有 Adobe客户端数据层已启用

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

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

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

导航到 https://wknd.site.
打开浏览器的开发人员工具，然后导航到 控制台. 运行以下命令：
```
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 页面数据层加载后，它将触发事件 cmp:show. 创建基于 cmp:show 事件。

导航到Experience Platform Launch，并导航到与AEM Site集成的Web属性。
导航到规则，然后单击 创建新规则.
命名规则 Page Loaded.
单击事件添加打开 事件配置 向导。
在 事件类型 选择 自定义代码.

单击 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'].

保存更改。
下一个操作单击添加打开 操作配置 向导。
在 操作类型 选择 自定义代码.
单击 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 在自定义事件中。回想一下页面架构由数据层公开，以便查看现成公开的各种键。
保存更改并运行构建将代码提升到环境在您的AEM网站上使用。

注意

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

创建数据元素

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

回想一下页面架构由数据层公开：

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

组件资源类型

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

注意

记得 event 对象可用，其范围取决于触发规则中。只有在数据元素为引用在规则中。因此，在规则内使用此数据元素是安全的，例如 Page Loaded 在上一步中创建的规则但在其他环境中使用将不安全。

页面名称

单击 添加数据元素.
对于名称 enter 页面名称.
对于 数据元素类型 选择 自定义代码.

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

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

保存更改。

页面模板

单击 添加数据元素.
对于名称 enter 页面模板.
对于 数据元素类型 选择 自定义代码.

单击 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属性。
转到扩展 > 目录
找到 Adobe Analytics 扩展，单击安装
在 库管理 > 报表包，输入要在每个Launch环境中使用的报表包id。

注意

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

小贴士

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

向Page Loaded规则添加条件

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

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

注意

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

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

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

在 Page Loaded 规则删除 the 核心 — 自定义代码 操作（控制台语句）：
在Actions下，单击添加以添加新操作。
设置扩展键入 Adobe Analytics 并设置 操作类型 to 设置变量
在主面板中，选择可用的 eVar 和设置为数据元素的值 页面模板. 使用数据元素图标选择 页面模板 元素。
向下滚动，在下 其他设置 set 页面名称 到数据元素 页面名称:

保存更改。
接下来，在 Adobe Analytics — 设置变量 点按 plus 图标：
设置扩展键入 Adobe Analytics 并设置 操作类型 to 发送信标. 由于这被视为页面查看，因此请将默认跟踪设置保留为 s.t().
保存更改。的 Page Loaded 规则现在应具有以下配置：
- 1. 听 cmp:show 事件。
- 2. 检查事件是否由页面触发。
- 3. 为 页面名称 和 页面模板
- 4. 发送Analytics页面查看信标
保存所有更改并构建Launch库，然后将其提升到相应的环境。

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

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

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

这是因为传送会触发 cmp:show 事件但因为我们对 组件资源类型，则不会触发任何事件。

注意

如果您看不到任何控制台日志，请确保 控制台日志记录 在下检查 Launch Experience Platform调试器中。
导航到文章页面(如西澳大利亚. 观察页面名称和模板类型更改。