Google 标签管理器和单页应用

Question

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

我在网上阅读了很多东西，主要是为 "virtual page" 或其他东西创建一个新变量，但显然这远非理想。

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

Answer 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' 的数据层值，另一个名为 'DL - page url' 的变量，它是 [= 的数据层值29=].

然后您设置了一个新的 Universal Analytics 代码，该代码具有所有常用的网页浏览设置，但有 2 'Fields to Set'（在“更多设置”下）。将 'title' 设置为 {{DL-page title}} 并将 'page' 设置为 {{DL - page url}}

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

Answer 2

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

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

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

[

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

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

Google Tag Manager and Single Page apps