应用GTM准确追踪单页面应用「SPA」的页面查看

应用GTM追踪常规网站的Pageview非常简单，只需要设置GA id，将触发器设置为All Page即可。

每当访客切换页面，页面刷新，「All Page」就会触发，向GA传输Pageview。

但如果网站是一个单页面应用「SPA」，这种方式就不再适用了，不论访客访问多少个页面，GA只会记录第一个页面，导致数据错误，跳出率很高。

什么是单页面应用？

根据维基百科，单页面应用是一种网络应用程序或网站的模型，它通过动态重写当前页面与用户交互，而不是传统地从服务器重新加载整个新页面。

用更好理解的话来说，就是常规的页面追踪代码在单页面应用中，当页面切换的时候，GA页面追踪代码不会触发。

一般来说，当我们在切换页面时，如果页面的刷新按钮不旋转，那么可以判定这是一个单页面应用。例如网易云音乐，YouTube，GA这些都属于单页面应用网站。

如何正确追踪单页面应用的Pageview？

应用内置的触发器和变量（不推荐）

历史记录更改「History Change」触发器

历史记录「History」变量

在一定条件下能够利用上述元素追踪单页面应用的Pageview，但是从本人经验看来，这种方法往往会遇到一个问题，即数据的不准确，体现在Page URL和Page Title不对应，因此这里不提及这种方式。

应用dataLayer导入自定义事件（推荐）

需要开发人员在发生页面切换的时候触发如下代码：

<script>
 window.dataLayer = window.dataLayer || []; //dataLayer初始化
 window.dataLayer.push({
 'event': 'Pageview',
 'pagePath': '/something/contact-us', //新页面的页面Path
 'title': 'Contact us' //新页面的页面Title
 });
</script>

window.dataLayer = window.dataLayer || []; //dataLayer初始化

window.dataLayer.push({

'event': 'Pageview',

'pagePath': '/something/contact-us', //新页面的页面Path

'title': 'Contact us' //新页面的页面Title

});

</script>

这段代码是在发生页面切换时，在dataLayer中传入一个名为“Pageview”的事件，并且存储了“pagePath”和“Title”两个变量，这些马上就能用到！

创建变量

在GTM中，我们把刚才存储的变量提取出来，分别把它们命名为dlv – pagePath，dlv – title。【命名只为规范，方便记忆即可】

创建触发器

在GTM中，我们创建自定义事件作为触发器。

GA设置变量

我们打开GA设置变量，将刚才创建的两个数据层变量传入其中。

创建代码

和常规的Pageview设置相似，把触发器修改为刚才设置的自定义事件即可。

Debug和发布

打开GTM的预览模式，查看「实时报表-内容」，看自己的测试流量（访问多个页面）有没有产生多个对应的页面即可判断部署有没有成功。如果有疑问，欢迎在评论区留言。

One More Thing

应用dataLayer传入自定义事件触发页面追踪的解决方案称为“虚拟页面追踪”，而这种解决方案通常会导致流量来源紊乱，这会对GA的归因造成很大的干扰。

通过「GA报表-转化-多渠道漏斗-热门转化路径」可以查看转化归因。
GA报表中转化归因的查看方法

当你看到转化路径大都是形如「referral – affiliate – referral – affiliate」；「organic – cpc – organic – cpc」这种循环迭代的形式，就需要考虑Simo Ahava提到的Rogue referral issue的解决方案了。

我这里借花献佛把Simo的解决方案简要介绍一下，背后的原理可以参看他的博文。

需要开发协助，在GTM代码容器之前添加如下代码：

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  originalLocation: document.location.protocol + '//' +
                    document.location.hostname +
                    document.location.pathname +
                    document.location.search
});

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

originalLocation: document.location.protocol + '//' +

document.location.hostname +

document.location.pathname +

document.location.search

});

document.location.protocol包含了会话的流量来源信息，hostname是主机名，例如本网站的hostname就是damonanalytics.com，pathname就是页面路径，search是路径后面携带的参数，例如「?search=…」或「#reviews」等。相当于我们把每次会话的流量来源信息储存在数据层中。

跟前文一样，存在数据层中的数据需要取出来传入GA设置参数中。

结语

单页面应用是非常时髦的技术，它在页面打开速度、用户体验等方面有一致的好评，但对于数据追踪方面却是极大的挑战，大部分追踪代码系统都需要对单页面应用做定制化处理，如果你在处理单页面应用网站的数据埋点和数据分析中遇到问题，我们评论区见！

http://xzh.i3geek.com

应用GTM准确追踪单页面应用「SPA」的页面查看

什么是单页面应用？