Skip to content

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

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

常规网站应用GTM安装页面追踪代码
常规网站应用GTM安装页面追踪代码

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

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

什么是单页面应用?

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

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

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

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

应用内置的触发器和变量(不推荐)

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

GTM自带历史记录更改的触发器
GTM自带历史记录更改的触发器

历史记录「History」变量

GTM自带历史记录相关的变量,需要手动勾选打开
GTM自带历史记录相关的变量,需要手动勾选打开

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

应用dataLayer导入自定义事件(推荐)

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

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

创建变量

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

将dataLayer中的page和title取出作为变量
将dataLayer中的page和title取出作为变量

创建触发器

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

将dataLayer中的事件名作为自定义事件触发器
将dataLayer中的事件名作为自定义事件触发器

GA设置变量

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

GA设置变量,传入page和title参数
GA设置变量,传入page和title参数

创建代码

和常规的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代码容器之前添加如下代码:

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

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

将数据层数据传入GA参数中,准确记录流量来源
将数据层数据传入GA参数中,准确记录流量来源

结语

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

Published inCategorygtm

Be First to Comment

发表评论

邮箱地址不会被公开。 必填项已用*标注