Google 跟踪代码管理器和单页应用答案

【问题标题】：Google Tag Manager and Single Page appsGoogle 跟踪代码管理器和单页应用
【发布时间】：2016-01-22 19:38:16
【问题描述】：

我正在尝试将 Google 跟踪代码管理器与我的 Ember 应用集成。我很难理解如何通知 GTM 页面已更改，并发送页面查看事件。

我在网上阅读了很多东西，主要是围绕为“虚拟页面”或其他东西创建一个新变量，但显然这远非理想。

我希望能够只使用dataLayer.push 来通知页面实际更改。有没有我没有找到的简单方法，或者在 SPA 上使用 GTM 进行跟踪真的很痛苦？

【问题讨论】：

很好奇，如果 VPV 远非理想，那么在您的 SPA 案例中，什么对您来说是理想的。 VPV 几乎是您唯一的选择，当然，除非您更改站点的页面架构。也就是说，要使用 VPV，您需要在每次“页面”更改时推送一个事件，然后触发一个浏览量标签，该标签会触发并设置一个新的页面名称（即您的 VPV）。
@nyuen 你似乎知道你在说什么。我只是想知道为什么它不像 GA 那样简单，我可以在其中执行 ga('send', 'pageview') 并且 GA 会通知页面已更改。
@nyuen 也可以，GA 可以通知页面直接从 GTM 更改，所以我不必触发ga('send', 'pageview') 然后dataLayer.push？
我不认为只有 GA 会更容易。棘手的部分是告诉 GA when 触发综合浏览量，因为您可能已经知道，除非您告诉 GA“嘿，用户刚刚滚动到此部分，否则仅向下滚动页面不会触发综合浏览量- 触发一个事件！”。所以这就是您可能需要做的 - 将事件推送到 dataLayer 中，以便您的综合浏览量代码知道何时触发。
嗯，我目前只在页面更改时使用 GA，没什么特别的。问题是已经为这个事件配置了 GA，当 GTM 必须配置时，对吧？

【解决方案1】：

您肯定需要将事件推送到 dataLayer 中，然后您可以在 GTM 中触发 GA 页面查看标记。因此，要将事件推送到 DL：

dataLayer.push({'event':'virtualPageView'});

然后设置一个名为“vpv”的触发器，该触发器在名为“virtualPageView”的自定义事件上触发。将该触发器添加到 GA 标记。

最好的办法也是在发送事件时通过虚拟页面的详细信息发送。这样，您可以设置将这些 dataLayer 属性值拉入页面视图调用的变量。所以你可以这样做：

dataLayer.push({
  'event':'virtualPageView',
  'page':{
    'title':'contact us',
    'url':'/contact'
  }
});

因此，您将设置一个名为“DL-page title”的变量（例如），它是 'page.title' 的 dataLayer 值和另一个名为 'DL-page url' 的变量，它是 'page 的 dataLayer 值.url'。

然后，您设置一个新的 Universal Analytics 代码，该代码具有您所有常用的综合浏览量设置，但有 2 个“要设置的字段”（在更多设置下）。将 'title' 设置为 {{DL-page title}} 并将 'page' 设置为 {{DL - page url}}

最后将触发器设置为“vpv”，您会发现每次将事件 + 数据推送到数据层时，都会触发一个带有虚拟页面标题和虚拟 URL 的 pageView。

【讨论】：

我已经尝试过了，我遇到了一个主要问题，因为我不断将事件推送到 dataLayer，因为 dataLayer 在页面间持续存在，所以我得到了指数级的事件。
@Sunny 我想你的意思是你得到了一个大的 dataLayer 数组，因为你不断地将页面视图事件推入其中。这是在单页应用程序中像这样使用 DL 的一个缺点。不要忘记 DL 只是网页上的一个数组。如果您愿意，您可以随时清除它。
@dmpg_tom @Sunny dataLayer 限制为 300 个条目，并将根据需要自行清理：simoahava.com/gtm-tips/datalayer-declaration-vs-push/…

【解决方案2】：

这是很久以前被问到的。使用 GTM 的当前功能集，您可以轻松设置 SPA 页面跟踪，而不会有太多麻烦。

首先，转到Triggers 并创建一个新触发器。选择History Change 作为触发器类型。这将创建一个触发器，每次位置历史记录更改时都会触发。

然后创建一个Universal Analytics 类型的新Tag 并按照下面的屏幕截图进行设置。

[

至于触发器，设置之前定义的历史更改触发器，就大功告成了。每次在您的 SPA 中发生导航时，都会触发具有正确页面路径的页面查看事件。

编辑：正如trognaders 在评论中指出的那样，这不会跟踪初始页面视图。要进行补救，只需为您的代码添加一个额外的触发器，该触发器会在页面查看事件（所有页面）上触发。请看下面的截图。

【讨论】：

你是一个真正的保护者，徒劳地尝试了网上列出的所有东西，所有疯狂的解决方案，你的最简单，就像一个魅力。千恩万谢。我只想为其他遇到同样麻烦的人提一下，您的步骤必须在创建基本 Universal analytics 标签 + Page view 触发器后完成:)
可以确认这仍然适用于 Ember 应用程序。只需在 3.10 ember 应用程序中进行设置即可。唯一没有在上面的屏幕截图中显示的是您需要在“跟踪 ID”输入中添加您的 GA 跟踪 ID。
我参加聚会有点晚了，但是你们能否分享一下您添加到 SPA 以使这项工作正常进行的确切脚本？
@Hame SPA 中不涉及脚本。这就是它的美妙之处，您只需要如上所述的 GTM 配置，页面浏览事件就会被自动跟踪。
@trognanders 这很可能是真的，我必须检查一下。在这种情况下，您只需为标签添加一个额外的触发器（所有页面/页面视图），一切就绪。更新了我的答案。