在 Adobe Analytics 中跟踪单页面应用程序 (SPA) 时使用最佳实践

在本文档中，我们将描述您在使用 Adobe Analytics 跟踪单页面应用程序 (SPA) 时应遵循和注意的几个最佳实践。 本文档将重点介绍如何使用 Adobe Experience Platform Launch（这是推荐的实施方法）。

初始说明：

  • 以下项目将假设您使用 Experience Platform Launch 在您的网站上实施。如果您未使用 Experience Platform Launch，则这些注意事项仍然存在，但您需要根据实施方法调整它们。
  • 所有 SPA 都是不同的，因此您可能需要调整下面的一些项目以最好地满足您的需求，但我们想与您分享一些最佳实践；在 SPA 页面上实施 Adobe Analytics 时需要考虑的事项。

在 Experience Platform Launch 中使用 SPA 的简单图表

Launch 中的 SPA for Analytics

注意：​如前所述，这是一个简化的图表，说明了如何在 Adobe Analytics 实施中使用 Experience Platform Launch 处理 SPA 页面。 在本页面的以下部分中，我们将讨论您应仔细考虑或采取行动的步骤和任何问题。

设置数据层

在 SPA 页面上加载新内容或在 SPA 页面上执行操作时，您首先要执行的操作之一是更新数据层。 此操作需要在自定义事件触发 Experience Platform Launch 中的规则之前执行，以便 Experience Platform Launch 能够从数据层中获取新值并将它们推送到 Adobe Analytics 中。

下面是一个示例数据层，其元素可以根据您的 SPA 上的视图更改或操作进行更改。 例如，在进行所有/大多数屏幕更改时，通常会更改“pageName”元素，以便在 Experience Platform Launch 中捕获新元素并将其发送到 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>

在 Experience Platform Launch 中设置自定义事件和监听

在页面上加载新内容或在网站上执行操作时，您将需要通知 Experience Platform Launch，以便它能运行规则并将数据发送到 Analytics。 可通过几种不同的方法做到这一点：直接调用规则或自定义事件。

  • 直接调用规则：在 Experience Platform Launch 中，您可以设置直接调用规则，此规则将在直接从页面调用时执行。 如果网站上的页面加载或操作非常简单，或如果它是唯一的并且每次都会执行一组特定的指令（每次将 eVar4 设置为 X 并触发 event2），则可以使用直接调用规则。 请参阅有关创建直接调用规则的 Experience Platform Launch 文档。
  • 自定义事件：要获得更多功能以及动态附加具有不同值的负载的能力，您应设置自定义 JavaScript 事件并在 Experience Platform Launch（您可以在其中使用负载设置变量并将数据发送到 Adobe Analytics 中）中监听这些事件。 您更有可能需要此功能，因此该选项被视为最佳实践。 但您网站上的每项功能均能确定哪种方法最合适。 假设您将需要使用此自定义事件方法，我们将继续浏览本文档。

示例：本帮助文档包含已实施 Analytics（以及其他 Experience Cloud 解决方案）的示例 SPA 网站以及描述已实施项目的文档的链接。 在这些 SPA 示例中，使用了以下自定义事件：

  • event-view-start：此事件将在正在加载的视图/状态的视图开始时触发。
  • event-view-end：即使视图/状态发生更改并且页面上的所有 SPA 组件都已完成加载，也将触发此事件。 这是通常触发对 Adobe Analytics 的调用的事件。
  • event-action-trigger：此事件将在页面上发生除视图/状态加载之外的任何事件时触发。 这可能是点击事件或较小内容更改而没有视图更改。

有关如何/何时触发这些事件的更多信息，请参阅上面引用的页面/文档。 您不必使用这些相同的事件名称，此处列出的功能是推荐的最佳实践。 以下视频介绍了示例网站以及 Experience Platform Launch 中用于监听自定义事件的位置。

在 Experience Platform Launch 规则中运行 s.t() 或 s.tl()

在使用 SPA 时应了解的 Analytics 的最重要事项之一是 s.t() 和 s.tl() 之间的差异。 您将触发 Experience Platform Launch 中的这些方法之一来将数据发送到 Analytics 中，但您需要知道何时发送每个数据。

  • s.t() —“t”表示“跟踪”，即一般页面查看。 即使 URL 可能不会发生改变，视图变更是否足以让您将它​视为​一个新的“页面”？ 如果是这样的话，请设置 s.pageName 变量并使用 s.t() 将调用发送到 Analytics 中

  • s.tl() —“tl”表示“跟踪链接”，通常用于跟踪页面上的点击或少量内容变更，而不是全屏变更。 如果页面更改较少，以使您不会将它视为一个全新“页面”，可使用 s.tl() 且无需设置 s.pageName 变量，因为 Analytics 将忽略它。

提示：​一些人员使用以下一般准则：如果屏幕变更超过 50%，则应将它视为页面查看并使用 s.t()。 如果屏幕变更不到 50%，则使用 s.tl()。 但是，这完全取决于您以及您视为新“页面”的内容以及您希望如何在 Adobe Analytics 中跟踪您的网站。

以下视频说明在何处以及如何在 Adobe Launch 中触发 s.t() 或 s.tl()。

清除变量

在使用 Adobe Analytics 跟踪网站时，您只需在正确的时间将相应数据发送到 Analytics 中。 在 SPA 环境中，Analytics 变量中跟踪的值可以持续存在，并且可能在我们不再需要时重新发送到 Analytics 中。 出于这个原因，Analytics Launch 扩展包含了一个用于清除变量的函数，这样当您运行下一个图像请求并将数据发送到 Analytics 中时，就有了一个全新的状态。

在上面的图表中，我们在流程结束时列出了它，并在您在点击中发送​后​清除变量。 实际上，它可以在发送点击之前或之后完成，但应在您的 Experience Platform Launch 规则中保持一致，以便您始终在设置并发送变量之前或之后清除。 请记住，如果您将在运行 s.t() 之前​清除变量，请确保先清除变量，然后设置新变量，最后再将新数据发送到 Analytics 中。

注意：​运行 s.tl() 时并不总是需要清除变量，因为 s.tl() 要求每次都使用 linkTrackVars 变量以告知 Analytics 将设置哪些变量（自动在 Experience Platform Launch 中的场景后添加）。 这意味着，在使用 s.tl() 时通常不会出现错误的变量，但在 SPA 环境中使用 s.t() 时强烈建议这样做。 正如一开始所讲的，我想推荐它作为最佳实践，在 SPA 环境中对 s.t() 和 s.tl() 使用“清除变量”函数以确保收集高质量数据。

以下视频说明在何处以及如何在 Launch 中清除变量。

其他注意事项

Experience Platform Launch 中的自定义代码窗口

在 Launch Analytics 扩展中，可以在以下两个位置插入自定义代码：库管理部分和额外的“使用自定义代码配置跟踪程序”部分。

Launch Analytics 自定义代码窗口

务必知道的一点是，在 SPA 页面上进行初始页面加载时，这些位置中的任一位置实际上只会在其中运行一次代码。 如果您需要对视图变更或网站上的操作运行代码，则应将其他操作添加到适当的​规则（例如，在“page load: event-view-end”规则中），以使代码在规则运行时执行。 在规则中创建该操作时，请将​扩展设置为核心，并将​操作类型设置为自定义代码。

“混合”SPA/常规网站

一些网站是“常规”页面和 SPA 页面的组合。 在此情况下，您将需要使用适用于两种页面类型的策略。 在网站上配置自定义事件并触发 Experience Platform Launch 中的规则时，请注意，根据哈希更改等，页面上不会有两次点击进入 Analytics。（如果这是您选择用于触发 Experience Platform Launch 规则的方式）。 在这种情况下，您将需要禁止其中一个页面查看，这样它就不会在 Adobe Analytics 中为您提供错误数据。

如果您决定将功能分解为单独的规则，以便您能够更好地控制它，请务必记住/记录您已完成此操作，以便对一条规则的所做的任何更改同样适用于另一条规则，并保护 Analytics 数据完整性。

通过 A4T 与 Target 集成

这里只是一个简单的标注。 如果使用 A4T 与 Target 集成，请确保对同一视图变更的 Target 请求和 Analytics 请求具有相同的 SDID。 这将确保您的数据在解决方案上正确地同步。

要查看点击数，请使用调试程序或数据包嗅探器程序。 您也可以使用 Experience Cloud Debugger，它是一个 Chrome 扩展，可从此处下载。 页面上第一个触发的是 Target，因此您也可以在 JavaScript 控制台或调试程序中检查它。

其他资源

在此页面上