谷歌标签管理器和单页应用程序

Question

27

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

我在网上读了很多东西，大多数围绕着为“虚拟页面”创建新变量之类的内容，但显然这远非理想。

我希望只需使用dataLayer.push即可通知页面实际发生了更改。是否有简单的解决方法我没有找到，或者使用GTM跟踪SPA真的很麻烦？

- Benjamin Netter

好奇的是，如果VPV并不理想，那么在SPA的情况下，什么是您认为理想的呢？除非您更改站点的页面架构，否则VPV几乎是您唯一的选择。话虽如此，要使用VPV，您需要在每次“页面”更改时推送一个事件，然后触发一个页面视图标记，该标记会触发并设置新的页面名称（即您的VPV）。 - nyuen

@nyuen，你似乎知道你在说什么。我只是想知道为什么它不像GA那样容易，我可以只需执行ga('send', 'pageview')，GA就会通知页面已更改。 - Benjamin Netter

@nyuen 另外，GA能否直接从GTM通知页面更改，这样我就不必触发ga('send', 'pageview')然后再进行dataLayer.push了吗？ - Benjamin Netter

我认为仅使用GA可能并不容易。棘手的部分是告诉GA何时触发页面查看，因为正如您可能已经知道的那样，仅向下滚动页面不会触发页面查看，除非您告诉GA“嘿，用户刚刚滚动到这个部分-触发一个事件！”。所以这就是您可能需要做的事情-将事件推入数据层，以便您的页面查看标记知道何时触发。 - nyuen

目前我只在页面更改时使用GA，没有什么特别的。问题是GA已经为此事件配置好了，而GTM需要进行配置，对吧？ - Benjamin Netter

所以听起来你同时运行了GA和GTM？如果你没有使用GTM来跟踪你的页面浏览量，那么当下一个“页面”被查看时，你需要发送一个带有VPV的GA页面浏览量。 - nyuen

2个回答

22

你一定需要将事件推送到数据层中，然后可以在GTM中触发GA页面浏览标签。因此，要将事件推送到DL中：

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

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

最好的做法是在发送事件时同时发送虚拟页面的详细信息。这样，您就可以设置变量，将这些数据层属性值提取到页面视图调用中。因此，您可以这样做：

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

所以你需要设置一个名为“DL- page title”的变量（例如），它是"dataLayer value"的"page.title"，还需要设置另一个名为“DL - page url”的变量，它是"dataLayer value"的"page.url"。

然后，你需要设置一个新的通用分析标签，其中包含所有通常的页面查看设置，但有两个"Fields to Set"（在更多设置下）。将"title"设置为{{DL-page title}}，将"page"设置为{{DL - page url}}。

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

- dmpg_tom

我尝试过这个，但是遇到了一个主要问题，因为我不断地将事件推送到dataLayer中，导致事件数量呈指数级增长，因为dataLayer在页面之间是持久的。 - Sunny

1

@Sunny 我猜你的意思是因为不断向其中推入页面浏览事件，所以你获得了一个大的 dataLayer 数组。这是在单页面应用程序中使用 DL 的一个缺点。不要忘记 DL 只是放置在网页上的一个数组。如果你选择，你随时可以清除它。 - dmpg_tom

2

@dmpg_tom @Sunny dataLayer的条目数上限为300条，并会根据需要自行清除：http://www.simoahava.com/gtm-tips/datalayer-declaration-vs-push/#comment-608025 - krukid

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- András Szepesházi · Accepted Answer

这个问题很久以前就被问过了。使用当前的GTM功能集，您可以轻松设置单页应用程序页面跟踪，而不需要太多麻烦。

首先，进入“触发器”并创建一个新的触发器。选择“历史更改”作为触发器类型。这会创建一个每次位置历史记录更改时触发的触发器。

然后创建一个新的“标签”，类型为“通用分析”，并按下面的截图设置它。

[ Universal Analytics tag configuration1

至于触发器，请设置之前定义的“历史更改”触发器，完成后即可。每当在您的单页应用程序中进行导航时，都会触发具有适当页面路径的页面视图事件。

编辑：正如 trognaders 在评论中指出的那样，这不会跟踪初始页面视图。为解决此问题，仅需为您的标记添加额外的触发器，在页面视图事件（所有页面）上触发。请参见下面的截图。