了解在单页面应用程序 (SPA) 上实施 Adobe Analytics 的一些最佳实践。 这包括使用推荐的实施方法 Experience Platform Tags。
初始说明:
注意:这是一个简化的图表,说明了如何在 Adobe Analytics 实施中使用 Experience Platform Tags 处理 SPA 页面。 以下各节确定了需要考虑的步骤和问题。
加载新内容或 SPA 页面上发生操作时,请先更新数据层。 该操作必须在触发规则的自定义事件在 Experience Platform Tags 中执行之前发生。 这可确保将数据层中的正确值推送到 Tags 中,然后推送到 Adobe Analytics 中。
下面是一个示例数据层。 鉴于在您的 SPA 页面上采取的操作,这些元素中的任何一个都可能会根据初始视图或视图的后续更改而更改。 例如,在全部或多数视图更改时,通常要求传入唯一的“pageName”值以区分 Adobe Analytics 报告中的视图值。
<script>
digitalData = {
pageInstanceID: "Launch Demo Site",
page:{
pageInfo:{
pageID: '2745374',
pageName: 'acs demo - product listing page'
},
attributes:{
project: "Experience Platform Launch Project"
}
},
user : [ {
"profile" : [ {
"attributes" : {
"gender" : "male",
"age" : "35"
}
} ]
}],
libraries : {
adobe : {
launch : {
state : 0, // 0 = not loaded , 1 = loaded
domain : "assets.adobedtm.com"
}
}
}
};
</script>
当加载新内容或 SPA 页面上发生操作时,需要通知 Experience Platform Tags 以运行将数据发送到的规则 Analytics。 可通过几种方法做到这一点:直接调用规则或自定义事件。
示例: 在本帮助文档,有指向实施 Analytics 和其他 Experience Cloud 解决方案的 SPA 示例站点的链接。 在这些示例中,使用了以下自定义事件:
有关如何以及何时触发这些事件的更多信息,请参阅上面引用的页面和文档。 您不需要在实施中使用相同的事件名称。 所用方法的功能用例对于理解为每种方法的推荐最佳实践至关重要。 以下视频演示了 Experience Platform Tags 中用于监听自定义事件的示例 SPA 页面和示例代码。
在使用 SPA 时应了解的 Analytics 的重要概念是 s.t()
和 s.tl()
之间的差异。 您的代码触发 Experience Platform Tags 中的一个或另一个方法,将数据发送到 Analytics。
s.t() –“t”表示“跟踪”,即页面查看。 如果视图的变化足以让您考虑它是一个新的“页面”,请使用此调用。为 s.pageName 变量设置唯一值,并使用 s.t()
将数据发送到 Analytics。
s.tl() –“tl”表示“跟踪链接”,即链接点击或小内容更改。 如果视图更改最小,请使用 s.tl()
将关于交互的唯一值传递给 Analytics。传入的变量不是 s.pageName,因为当接收到 s.tl()
调用时,Analytics 会忽略此变量。
提示:作为一般准则,如果屏幕变化超过 50%,请使用 s.t()
页面视图调用。 除此以外,请使用 s.tl()
。 但是,在考虑构成新“页面”的操作以及如何在 Adobe Analytics 报告中呈现时,请根据您的判断。
以下视频说明在 Tags 中触发 s.t()
或 s.tl()
的位置和方式。
在正确的时间将正确的数据发送到 Analytics。 在 SPA 环境中,存储在 Analytics 变量中的值会持续存在,并在您不再需要时重新发送到 Analytics。 函数存在于 Analytics Tags 扩展以清除变量,可确保下次调用不会错误地将数据发送到 Analytics。
上图显示了您发送数据后清除的变量。 实际上,这可能发生在调用之前或之后,但是,为了实现更干净的实施,Experience Platform Tags 规则是一致的。 如果在执行 s.t()
之前清除变量,则在调用后立即设置新变量,然后继续将新数据发送到 Analytics。
注意:运行 s.tl()
时并不总是需要清除变量。 此调用需要使用 linkTrackVars 变量来指示 Analytics 要设置哪些变量。 此调用通过配置在 Experience Platform Tags 自动发生。它防止错误变量与 SPA 环境中 s.t()
调用的行为形成对比。 为了确保实现最干净和最可靠的实施,在 SPA 环境中为两个调用使用“清除变量”功能可能更容易。
以下视频说明在何处以及如何在 Tags 中清除变量。
在 Tags Analytics 扩展中,可以在以下两个位置插入自定义代码:“库管理”和“使用自定义代码配置跟踪程序”分区。
这些位置中的任何一个都会运行其中包含的代码一次,以便初始页面加载 SPA 页面。 如果代码应该在视图或操作更改上运行,请在适当的规则(例如,“页面加载:event-view-end”规则)中实施该代码,以确保每次规则运行时,该代码都会执行。在规则中创建该操作时,请将扩展设置为核心,并将操作类型设置为自定义代码。
有些网站由传统页面和 SPA 页面组成。 在这种情况下,请使用适用于这两种页面类型的策略。 在站点上配置自定义事件并触发 Experience Platform Tags 中的规则时,请确保根据哈希更改等,页面上不会有两次点击进入 Analytics。 在这种情况下,请抑制其中一个页面视图,以防止重复数据传入 Adobe Analytics。
如果您决定将功能划分为独特的规则从而获得更多控制权,请记住记录您已完成此操作。 如果你更换规则,请对另一条规则进行相同更改。
通过 A4T 与 Target 集成时,请确认 Target 和 Analytics 在同一视图或操作上发送的请求传递相同的 SDID 参数值。 这可以确保数据在后端正确地同步。
要查看这些点击,请使用调试程序或数据包监控的工具。 Adobe 为此提供了 Experience Platform Debugger。 它是一个 Chrome 扩展程序,可以在此处下载。Target 应该在首先在页面上执行。 这也可以在调试程序中进行验证。