如何使用Google跟踪代码管理器跟踪单页Web应用

更新时间：2020年5月30日。 在常规网站上跟踪页面浏览量非常容易：您只需在每个页面上添加跟踪代码，然后 完成！每次访客单击内部链接时，浏览器窗口都会刷新，并且新的网页浏览匹配会发送到Google Analytics（分析）。

但是，当涉及到单页网站（或Web应用程序）时，默认跟踪将停止工作。无论用户/访问者在您的网站上做什么，都只会跟踪一个页面视图（第一个页面视图）。这种情况听起来很熟悉吗？

Why does this happen? 让 me show you.

在这篇博客中，我’ll说明如何使用Google跟踪代码管理器（包括SP网站）跟踪单页Web应用。该博客文章内容广泛，因此请做好准备。

 

目录

+显示目录+

• 什么是单页应用程序/网站？
• 安装Google跟踪代码管理器
• 跟踪SPA的多种方法+如何阅读本指南
• 您是否完全需要本指南？
• 选项1 –历史记录更改触发器：
  • 页面URL是否更改（当您从页面A导航到页面B时）？
  • 让’找出历史记录更改侦听器是否有帮助
  • 您是否在GTM预览和调试模式下看到历史记录事件？
  • 您何时从页面A导航到页面B，会看到多少个历史记录事件？
  • GTM中的任何History变量是否返回有用的数据？
  • 使用Google Analytics（分析）标签跟踪单页应用
    • 如果涉及URL更改，则URL片段（＃）
    • 如果URL更改涉及URL片段，并且链接可能包含查询参数
    • 如果“新历史记录片段”变量为空，并且您’重新使用新历史状态
    • 触发
• 选项2 –与Google跟踪代码管理器和开发人员一起跟踪单页Web应用’s help
  • 创建变量
  • 创建一个触发器
  • 更新GA设置变量
• 查看报告
• 流氓转介问题
• 最后的话

 

什么是单页应用程序（SPA）/网站？

Single Page Application (SPA) is a web application or website that loads all of the resources required 至 navigate throughout the site on the first 页load. As the user clicks links 和 interacts with the 页, subsequent content is loaded 动态ally (and the 页technically does not reload, even though it might look differently).

默认的Google Analytics（分析）跟踪在传统网站上效果很好，因为该代码段代码每次用户加载新页面时都会运行。

但是，在单页网站/应用程序中，所有必需的代码都会加载一次，并且在整个用户会话期间不会重新加载页面。 那 is why you see 只要 one 页view in your GA reports。 URL可能会更改，但这仅是为了提供单独页面的感觉。

SPA不能像预期的那样使用许多网络跟踪工具，因为它们是为传统网站编写的，跟踪代码可以在传统网站上检测到何时加载新页面。

But everything is possible 和 you can track such 页面预览s with Tag Manager as well. Continue reading 和 I’我会告诉你兔子洞有多深。

 

安装Google跟踪代码管理器

如果你没有’尚未将Google跟踪代码管理器安装到单页Web应用程序或网站上。我有 发表了博客文章 有几种选择供您考虑。也， 检查您的Google跟踪代码管理器是否正常运行.

唐e? Great, let’s proceed.

 

跟踪SPA的多种方法+如何阅读本指南

破坏者：本指南中介绍了两种技术：使用历史记录更改侦听器（在GTM内），以及每次访问者从一个页面导航到另一页面时，都要求开发人员将综合浏览量推送到数据层。博客文章的前半部分专门介绍“历史更改”（并了解它是否对您有用），而后半部分将介绍如何与开发人员合作。

但是，在我们直接进入配置部分之前，首先需要评估上下文，并找出要选择的跟踪选项。就像我在其他热门博客文章中 表格追踪，使复杂的事情更容易理解，我’ve创建了一个流程图，可以帮助您决定选择哪种跟踪方法（或者在许多情况下，只有一种方法可供您选择）。

如果两种选择都可行，则应与开发人员一起使用’s help + dataLayer.push （因为事实证明它更强大）。继续阅读。

首先，让’快速浏览一下，然后我们’会深入到每一步。

重要： 2020年10月，GTM中的预览模式已更改。因此，工作流程的第一步（如下）也有所变化。预览模式不再消失。而是，使用以下问题开始流程（如下）：“从页面A导航到页面B时，您是否看到以GTM预览模式加载的新页面？

 

您是否完全需要本指南？

上面流程图中的第一个菱形问一个问题： 当您从一页导航到另一页（在同一网站内）时，GTM预览和调试模式是否会快速消失并重新出现？

我知道，这个问题听起来很愚蠢，但请确保100％确定我要您考虑本指南是否正是您所需要的。

What does this question mean? By default, Google Analytics 页面预览 tag fires every time a 页is loaded (meaning that the 页must load completely from scratch). 如果你 navigate from one 页to another, 页B is loaded from zero while 页A is gone.

与页面一起’的代码，还会从头开始加载标签管理器JavaScript代码段。因此，如果您从A页导航到B页，则GTM预览和调试控制台（如果有）’启用）与A页面一起消失（因为该页面现在已被放弃），然后从头开始将其加载到B页面上。

So if on every 页面预览 you notice that the GTM Preview 和 Debug console reloads as well, you’不能与单页应用程序一起使用。阅读我的 GTM初学者指南，而不是。一世’ve explained there how 至 track your first GA 页面预览 with Tag Manager.

另一方面，如果您’re really working with an SPA, every time you navigate from 页A 至 页B, the Preview 和 Debug console stays as it is 和 continues tracking your interactions (e.g. clicks), but not 页面预览s. Why?

那’s，因为在网络跟踪中，“pageview”通常是在加载页面文档和JavaScript跟踪代码（包括Pageview标记）一起加载时。但是，在SPA中，所有后续“pageviews” happen 动态ally, without loading/reloading the 页document. 那’s为什么默认情况下标记管理器和GA均不会跟踪“dynamic” 页面预览s.

因此，您需要进行一些其他配置（甚至在开发人员的帮助下）。

好了，第一个问题已经回答。如果您确实在使用SPA，请让’移动到流程图中的下一个问题。

页面URL是否更改（当您从页面A导航到页面B时）？

如果网址未更改，则必须询问开发人员’的帮助。立即跳到本章“与GTM和开发人员一起跟踪SPA’s help”并继续从那里阅读。如果确实更改了URL，则意味着您仍然有机会自行使用“历史记录更改”侦听器。

根据您的网站，URL更改可能看起来有所不同’重新。在某些网站上，URL片段会发生变化（’是井号＃之后的网址部分。在其他情况下，URL更改可能看起来很随意，例如在常规网站上（例如 /家/ 至 / home / 联系我们）等

如果你 confirm that the URL changes, let’移至另一步骤。

 

找出历史记录更改侦听器是否有帮助

First, you need 至 have enabled at least one 历史 Change 触发 on a 页. Theoretically, it should be able 至 catch such URL changes. When the trigger is enabled on a 页, it activates the 历史 Change listener, a function (more like a set of functions) that is lurking somewhere in the background 和 waiting for a moment when the URL 动态ally changes.

侦听器发现更改后，会将“历史事件”推送到数据层（您将在“预览”和“调试”模式下看到它）。

要启用触发器，请转到 扳机 > 新 并输入以下选项。

接下来，前往 变数。 Google跟踪代码管理器提供了一堆与历史记录更改触发器相关的内置变量。在变量部分中，点击配置（在 内置变量）并启用所有 历史相关 变量。

继续执行流程图中的另一个问题。

 

您是否在GTM预览和调试模式下看到历史记录事件？

现在，让’s enable Google跟踪代码管理器的预览和调试模式 看看听众是否正常。橙色的通知栏应出现在您的帐户中。

启用预览模式后，导航到实现容器的站点，您将在浏览器底部看到一个调试控制台窗口，其中显示有关标签的详细信息，包括它们的触发状态和正在处理的数据。

单击（或滚动）单页Web应用程序（或网站）的各个部分以创建页面URL（换句话说，只需浏览您的单页应用程序/网站）。发生更改后，请在“预览和调试”控制台中仔细查看事件流。

是否 历史 事件出现了吗？如果是的话’好消息！如果没有，请跳至我解释的章节 如何与开发商合作。您将不得不与开发人员合作。

每当访问者导航到您的应用程序/网站的特定部分时， 历史 event will fire. This is a perfect trigger 至 fire the Universal Analytics 页面预览 Tag.

 

从页面A导航到页面B时，您看到多少个历史记录事件？

我问这个问题的原因是答案是’总是1。您应该期望1，但是，有时单页应用程序的编码方式是“历史记录”侦听器捕获两个或多个事件。例如我’在某些情况下，访问者从 /家/ 至 / 页s / contact /.

结果，发生了两个历史事件：

• 有人追踪了 /家/ 至 /页/ 
• 另一个抓住了 /页/ 至  / 页s / contact /.

This means that with Tag Manager, you would have tracked two 页面预览s instead of one. Not accurate.

另一个例子是在一个我看到相同的项目中 历史 事件多次出现。每一个“pageview”导致2或3个历史事件。也不准确。

在这种情况下，如果您使用“历史记录更改”侦听器而未对“历史记录”触发器进行任何修改，则数据将变得and肿且不切实际。

这里有三个选项，其中两个涉及开发人员。

• 选项A： 咨询开发商并询问是否’可以通过将双重历史记录或双重历史事件始终减少为1.来解决此问题。
• 选项B： 再次跳到本章 您必须与开发人员一起实施此跟踪.
• 选项C： 尝试 过滤掉一些历史事件.

 

是否有任何历史变量返回有用的数据？

Since there are several ways how a URL can be 动态ally changed (Simo提到），您可以通过多种方式来检索有关刚刚加载的页面的历史记录信息。让’我们来看两个例子。

当“历史记录”事件出现在GTM预览和调试控制台中时，点击它，然后转到 变数 标签。向下滚动，直到看到与历史记录相关的变量（如果没有）’t，您需要通过转到 变数> Built-in 变数> Configure）。

你看到了什么？

Does the 新历史片段 contain some data? If the URL change involves the hashmark #, 然后 this variable indeed should return some value. 那’s great! We’以后需要在Google Analytics（分析）设置变量中使用该变量。

如果网址（带有＃）已更改，但 新历史片段 变量返回未定义， 试试这个解决方案.

如果URL更改不涉及URL片段（＃），则检查另一个变量 新历史状态。它包含一些信息吗？一个示例可能如下所示：

虽然这是一个好兆头，但我们不’不需要所有的价值。我们’我只需要一把钥匙， 路径。但是，内置的GTM变量不会’t允许您访问该特定参数，因此，我们’将需要使用以下设置创建数据层变量：

We’一会儿需要这个变量。

但是，如果没有“历史记录变量”返回有关访问者已导航页面的有用数据，请咨询开发人员或 跳到本章.

老实说，我没有’没有看到没有任何历史变量包含有用信息的情况，也许’甚至是不可能的。我不确定 -

 

＃7。使用历史记录监听器通过Google Analytics（分析）跟踪单页应用程序

Alright, so now we have arrived at the step where we will combine everything 至 gether 和 will send those 页面预览s 至 Google Analytics.

 

如果涉及URL更改，则URL片段（＃）

通常，Universal标记会自动获取整页URL的值，并将其传输到Google Analytics（分析）服务器。但是，如果您的URL更改涉及井号（＃），则Google Analytics（分析）默认不会捕获它。

We’我需要在 GA设定变数 为了将URL片段值发送到Google Analytics（分析’为什么检查历史记录变量是否包含一些有用的数据很重要。

打开您的GA设置变量（您的Universal Analytics代码使用该变量）。去 更多设置> Fields 至 Set > 页然后输入 {{新 历史片段}}.

 

 

If website’s/app’s address contains not 只要 URL fragment but Page Path as well (e.g. //www.example.com/类别1 /产品2/＃contact-us），解决方案我’上述ve仅会发送 联系我们 到Google Analytics（分析）和 类别1 /产品2 将被忽略。

因此，如果您的单页网站/应用程序地址不仅包含“ URL片段”，而且还包含“页面路径”，则应将Universal Analytics设置更新为此（在所有Google Analytics（分析）标签或GA设置变量中）：

• 代替 页>>>{{新历史片段}}
• 输入 页>>> {{页面路径}} {{新历史片段}}

无论哪种方式，我们都告诉Google Analytics（分析）忽略默认情况下获取的完整页面URL值，并使用的新值 页我们正在发送。

 

如果URL更改涉及URL片段（＃）并且还可能包含查询参数

在某些单页应用程序中’网址可能还包含一些查询参数（例如example.com/?q=product#search）。如果说’在这种情况下，您可以将附加变量与 页 field 至 Google Analytics. 那 variable will return all the query parameters that are present in the URL.

创建一个 JavaScript变数 具有以下设置 window.location.search。

然后转到Google Analytics（分析）设置变量并插入此变量 片段变量之前。最终结果：{{页面主机名}} {{js–window.location.search}} {{新历史片段}}。

附言如果SPA中唯一可能的查询参数是UTM参数，则不要 ’不用担心无需额外发送 页 领域。 Google Analytics（分析）将以另一种方式处理您的流量归因。

 

如果“新历史记录片段”变量为空，并且您’重新使用新历史状态

正如我在前一章中提到的那样，’完全有可能 新历史片段 变量将没有值。如果说’根据您的情况，您需要更深入地研究数据层中存在的内容。这是预览和调试模式下一个历史事件的示例。当我点击 历史 事件，我切换到 资料层 标签。

如你看到的， gtm.oldUrlFragment 和 gtm.newUrlFragment 是空的。但是，还有许多其他有用的信息，例如，以下两项之一：

那’这就是为什么我们应该创建一个 数据层变量 访问数据层中这些值之一。我在这里没有偏好，所以’由您决定选择哪一个。如果你去 gtm.newUrl，创建以下数据层变量。

如果你 decide 至 go with the SubmitUrl，您需要输入从顶层到底层的完整路径。在这种情况下， gtm.newHistoryState.props.submitUrl （记住它’s case-sensitive).

在 页 字段（属于您的Google Analytics（分析）设置变量），而不是{{页面路径}}和{{新历史记录片段}}（如果输入了参数，则查询参数）。

如果您为DLV指定了其他名称，则该其他名称将在 值 屏幕截图中的字段。

 

触发

如果您已完全遵循本指南，则您已经创建了一个“历史记录更改”触发器，用于监听所有事件。如果是，则保持原样。如果你没有’创建它，现在就做。

Assign the 历史 trigger 至 your GA 页面预览 tag.

您可能还需要分配默认值 所有页面 trigger 至 the Google Analytics 页面预览 tag if the 历史 初始页面加载发生时，事件不会在预览和调试模式下出现。

这是什么意思？在某些项目中，我’ve seen a 历史 事件发生在 GTM调试 控制台以及初始页面加载。

首先，你看到 页面预览， 然后 DOM准备就绪 事件，然后 历史。 如果说’您的情况下，您应该使用 只要 页面浏览跟踪中的“历史记录更改”触发器（并避免 所有页面）。否则，第一页浏览量将被跟踪两次，因为 所有页面 触发和第二次，因为 历史 事件。

现在，保存Universal Analytics代码，刷新 预览和调试模式, 和 try interacting with various parts of a single 页app/website. Every time you navigate somewhere, a Universal Analytics 页面预览 Tag should fire.

唐’别忘了查看GA实时报告中的数据。

 

替代选项：使用Google跟踪代码管理器和开发人员跟踪单页应用程序’s help

欢迎来到本指南的第二大章节。您最有可能’由于您的“历史记录更改”跟踪尝试失败或您只是想了解更多信息，因此达到了这一点。

如果（出于某种原因）历史记录更改触发器不是’为您工作（或者有其他原因使您进入本节），’关于如何使用Google跟踪代码管理器跟踪单页网络应用的另一种选择。要求开发者激活 dataLayer.push 每当用户在网站/网络应用程序的页面/状态之间导航时，都应输入代码。

这里’s是开发人员可以使用的示例代码片段：

<script>
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push（{
 'event'：'Pageview'，
 'pagePath': '/something/contact-us',
 'pageTitle': 'Contact us' //some arbitrary name for the 页/state
 }）;
</script>

注意： 的‘pagePath’ 和 ‘pageTitle’ parameters (in that code snippet) should be 动态ally changed 至 the address (and title) of the 页a visitor is currently viewing. A developer should take care of that.

无论如何，该代码是什么意思？

每次用户访问页面的特定部分时，开发人员应激活该小段JavaScript代码。它表明一个“Pageview”发生了，新页面的网址是 / something / 联系我们。 如果页面地址包含一些对您的报告很重要的查询参数（不包括UTM参数），请开发人员将这些参数包括在 页Path key as well.

无论如何，你应该使用这个 dataLayer.push as a triggering condition (that activates the GA 页面预览 tag) 和 然后 send the title 和 页path (page over 至 GA.

为此，请完成以下步骤：

• 创建两个变量（并将它们包括在“ GA设置”变量中）
• 创建一个触发器 (and assign it 至 the Universal Analytics 页面预览 tag).

 

变数

• 标题： dlv– 页Path （dlv代表“Data Layer Variable”)
• 变量类型： 数据层变量
• 数据层变量 名称: 页Path
  此变量将读取 页Path 由开发人员推送到数据层。
  
  

创建第二个变量：

• 标题： dlv– 页面标题 
• 变量类型： 数据层变量
• 数据层变量 名称: 页面标题
  
  

 

触发

• 标题： Custom – 页面预览
• 类型： Custom Event
• 活动名称： Pageview
• 此触发器触发： All events
  

 

更新GA设置变量和Universal Analytics标记

转到您要使用的Google Analytics（分析）设置变量’re using in your SPA’的GTM容器，并包括 页Path和页面标题 变量。

• 要设置的字段： page = {{dlv–pagePath}}和title = {{dlv– 页面标题}}
  

After that, go 至 the Universal Analytics 页面预览 tag 和 add the recently created trigger, 页面预览.

 

查看报告

一旦实现了单页应用程序/网站跟踪的这些选项之一，检查GA报告就变得至关重要。首先，从实时报告开始。

在Google Analytics（分析）界面的左侧，点击实时> Overview. You should be seeing your own 页面预览s there. 如果你 can’t 阅读本故障排除指南.

Once you start seeing your own 页面预览s, you’ll need 至 wait for a while (from 10-20 minutes up 至 24 hours) until you start seeing those 页面预览s in standard reports as well. By saying “Standard”, I mean 行为> Site Content > All 页s.

 

流氓转介问题

使用单页面应用程序并将虚拟页面视图发送到Google Analytics（分析）可能会使您的引荐数据混乱。 Simo Ahava已发布解决方案 如何解决流氓转介问题。因此，在按照我的提示操作如何使用Google跟踪代码管理器跟踪单页网络应用程序之后，请转到Simo’s blog 和 implement his solution 至 o. 那 solution is not an alternative 至 what you’在这里学到的。这是一个补充。

如果您已直接向SPA支付了流量（例如来自Google Ads的流量），这一点尤其重要。

 

使用Google跟踪代码管理器跟踪单页Web应用：结论

The problem with single-page web apps or websites is that regular 页面预览 tracking does not work. All of the necessary code is loaded once 和 the 页does not reload during the entire user session. This is why you see 只要 one 页 view in your GA reports.

但是，这不是死胡同。使用Google跟踪代码管理器中的某些配置（可能还需要开发人员的一些输入），就可以完全跟踪它们。在这篇博客中，我’ve解释了有关如何跟踪单页网站的两个选项：使用GTM’内置的历史记录更改触发器或与开发人员合作。

如果你’不知道选择哪种方法，在这里’s a rule of thumb:

• 如果您有开发资源，则选择开发者的路径是一个更可靠的选择（就跟踪质量而言）。但是，如果这些资源现在不可用，请检查流程图I。’ve包含在本指南的开头。但是，那里’最终仍有机会’最终会要求开发商’的输入。 （如果流程图如此说明）。

顺便说一句，如果您发现有关使用Google跟踪代码管理器跟踪单页Web应用程序的这篇文章很有用，请考虑订阅我的新闻通讯。您’会获得与GTM相关的各种奖金和有用的东西。

我想念什么或您有任何疑问吗？在评论中让我知道。