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

在本文档中，我们将介绍在使用Adobe Analytics跟踪单页应用程序(SPA)时，您应遵循并注意的一些最佳实践。 本文档将重点介绍如何使用AdobeExperience Platform Launch，这是推荐的实施方法。

初始说明：

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

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

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

设置数据层

当在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。 您更可能需要此功能，因此此选项被视为最佳实践。 但是，您网站上的每个函数都可以确定最合适的方法。 在本文档中，我们将假定您需要使用此自定义事件方法。

示例： 在此 🔗 帮助文档中，有指向已实施的示例SPA站点(和其 Analytics 他Experience Cloud解决方案)的链接，以及描述已实施内容的文档。在这些SPA示例中，使用了以下自定义事件：

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

有关如何/何时触发的更多信息，请参阅上述页面/文档。 您不必使用这些相同的事件名称，但建议使用此处列出的功能作为最佳实践。 以下视频将显示一个示例网站以及在Experience Platform Launch中监听自定义事件的位置。

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

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

• s.t() - "t"表示“track”，是正常的页面查看。即使URL可能不会更改，视图是否会发生足够的更改，以致您​考虑将​视为新的“page”？ 如果存在，请设置s.pageName变量，然后使用s.t()将调用发送到Analytics

• s.tl() - “tl”表示“跟踪链接”，通常用于跟踪页面上的点击次数或小内容更改，而不是全屏更改。如果页面上的更改很小，为此您不会将其视为全新的“page”，请使用s.tl()并且不要担心设置s.pageName变量，因为Analytics将忽略该变量。

提示： 有些人遵循一般准则，即如果屏幕更改超过50%，则应将其视为页面查看和使用 s.t()。如果屏幕变化小于50%，则使用s.tl()。 但是，这完全取决于您以及您认为的新“页面”以及您希望如何跟踪Adobe Analytics中的网站。

以下视频演示了在何处触发s.t()或s.tl()的Launch by Adobe。

清除变量

使用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()的Clear Variables函数，以确保数据收集的质量。

以下视频显示在Launch中清除变量的位置/方法。

其他注意事项

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

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

当SPA页面上发生初始页面加载时，务必要知道，其中任一位置实际上只会在其中运行一次代码。 如果您需要在视图更改或网站上的操作中运行代码，则应当向相应的​规则​添加一个额外的操作(例如，在“页面加载：event-view-end" rule)，以便代码在每次运行rule时都执行。 在规则中创建该操作时，请设置​Extension = Core​和​Action Type = Custom Code。

“混合”SPA/常规网站

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

如果您决定将功能划分为单独的rules，以便您能够更好地控制该功能，请务必记住/记录您已经完成了此操作，以便对一个rule的任何更改也可以对另一个rule进行，从而保护Analytics数据完整性。

通过A4T与Target集成

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

要查看点击量，请使用调试器或数据包探查程序。 您还可以使用Experience Cloud Debugger，该扩展是Chrome扩展，可下载到HERE。 Target 应该首先在页面上触发，以便您也可以在JavaScript控制台或调试器中检查该事件。

其他资源

• SPA在Adobe论坛上的讨论
• 引用架构站点以显示如何在Experience Platform Launch中实施SPA