Google Tag Manager和单页应用程序

Question

我正在尝试将Google Tag Manager与我的Ember应用程序集成。我很难理解如何通知GTM页面已更改，并发送页面查看事件。

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

我希望能够仅仅使用dataLayer.push来通知页面实际上发生了变化。有没有我没有找到的简单方法，或者在SPA上用GTM跟踪真的很痛苦？

Answer 1

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

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

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

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

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

因此，您需要设置一个名为“DL-page title”的变量（例如），它是“page”的数据层值。“title”和另一个名为“DL-page url”的变量，该变量是“page”的数据层值。网址'。

然后，您可以设置一个新的通用分析标记，该标记具有您通常使用的所有页面视图设置，但具有2个要设置的字段（在更多设置下）。将title设置为{{DL-page title}}，将page设置为{{DL-page url}}

最后，将触发器设置为“vpv”，您会发现每次将事件数据推送到数据层时，都会触发一个页面视图，其中包含虚拟页面的标题和虚拟url。

Answer 2

这是很久以前提出的问题。使用GTM的当前功能集，您可以轻松设置SPA页面跟踪，而无需太多麻烦。

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

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

对于触发器，设置前面定义的历史更改触发器，就完成了。每次SPA中出现导航时，都会触发具有正确页面路径的页面视图事件。

编辑：正如trognaders在评论中指出的，这不会跟踪初始页面视图。为了补救，只需为您的标记添加一个在页面视图事件（所有页面）上触发的附加触发器。请参见下面的屏幕截图。