GA4上对单页应用(SPA)做跟踪的4种方法

Google Analytics 4 Haran 8年前 (2017-03-03) 6808次浏览 0个评论
文章目录[隐藏]

更新时间:2025年6月25日

这一篇介绍GA4单页应用(SPA)做跟踪的几种方法。

什么是单页应用(SPA)

单页应用(Single Page Application, SPA是一种网页应用,其所有必要的HTML、JavaScript和CSS代码在首次加载时一次性获取,或根据用户交互动态加载内容,而无需重新加载整个页面。SPA通过JavaScript框架(如React、Angular、Vue.js等)实现动态内容更新,通常依赖浏览器History API或DocumentFragment来管理页面状态和URL变化。

在传统网站中,每次页面加载都会触发GA4page_view事件,而在SPA中,由于页面不刷新,GA4需要额外的配置来正确记录“虚拟页面浏览”和其他用户交互。

GA4跟踪单页应用的挑战

SPA中,GA4面临的常见跟踪问题包括:
  • 页面浏览未被记录:由于页面不重新加载,GA4的默认page_view事件可能只在首次加载时触发,后续的页面内容变化不会自动记录。
  • URL和页面标题不准确SPA可能通过pushState更新URL,但GA4默认使用document.location.pathname,可能无法捕获完整的URL或正确的页面标题。
  • 会话和引荐来源问题:如果不正确配置,SPA可能导致会话数据断裂或引荐来源(Rogue referrer)数据错误,影响用户旅程分析。
  • 事件重复或遗漏:自动跟踪(如增强测量)可能导致页面浏览事件重复计数,或者在某些情况下未能触发。
为了应对这些挑战,GA4提供了以下四种主要方法来跟踪单页应用

方法一:增强型衡量

GA4的增强测量(Enhanced Measurement)功能是跟踪SPA的最简单方法之一。它默认启用,能够自动捕获页面浏览、滚动、点击、文件下载等事件。对于SPA,增强测量通过监听浏览器的History API(pushStatereplaceState)来检测URL变化,并触发page_view事件。

设置位置在数据流详情里面点击“增强型衡量功能”,勾选“根据浏览器历史记录时间判断的页面更改”:

 

  • 优点:内置支持,设置简单,无需额外的编码
  • 缺点:只能跟踪基础的PV;存在Page URL和Page Title错位;如果SPA不使用History API(例如使用DocumentFragment或其他方式更新内容),增强测量可能无法捕获页面浏览。
  • 适用场景:增强测量适合简单SPA,URL变化与页面内容更新直接相关,且对页面标题和参数的自定义需求较低。

延伸阅读:GA4上对单页应用(SPA)做跟踪——增强型衡量功能

方法二:History Change

当增强测量无法满足需求时,可以通过Google Tag Manager(GTM)的History Change触发器来跟踪SPA的页面浏览。History Change触发器监听浏览器的popstate事件或History API的URL变化,触发GA4page_view事件。

History Change触发器

在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置… 」——「历史记录更改」,命名为History Change,做如下设置:

然后在GTM里点击预览,点击访问不同的网页,可以在Tag Assistant里看到「历史记录」:

配置数据层变量

点击「历史记录」,然后再API调用里看里面的信息,主要找到oldUrl和newUrl:

 

oldUrl是上一个页面,也即是Referral,newUrl是当前页面,需要用数据层变量获取它。

在GTM中点击「变量」——「新建」——「选择一个变量类型以开始设置…」——「数据层变量」,命名为dlv-oldUrl,做如下设置:

用同样的方法设置dlv-newUrl:

 

配置代码

先要配置一个Google Tag,不需要配置触发器,在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google代码」,命名为“GA4 update”:

 

注意:这个代码不需要触发器。

在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics:GA4 事件」,命名为“GA4-Page View Event”,作如下设置:

GA4 update在GA4-Page View Event之前触发,主要是用于更新配置参数:

页面加载该如何跟踪

这里说的页面加载是正常的页面加载,就普通页面。

如果普通页面加载没有触发「历史记录」,那么你需要配置一个单独的Google Tag去跟踪,就正常的GA4页面跟踪就可以,如:

 

如果普通页面加载触发「历史记录」,那么普通页面就会合并到GA4-Page View Event去触发跟踪,但我们仍然需要触发Google Tag,加载基础配置,但不发送page_view事件,将send_page_view设置为false即可:

 

 

网页标题该如何跟踪

你可能会发现,在虚拟页面跟踪里,虚拟页面的网页标题(Page Title)往往是上一个页面,是错位的,如下页面访问行为流,会出现:

  • 页面1:Page Title A/Page URL A
  • 虚拟页面2: Page Title A/Page URL B 

它页面标题应该是Page Title B,但实际上是Page Title A,这是因为在页面1中点击的时候,就触发「历史记录」,这时候的页面标题还是Page Title A。

 

可以通过一个延时处理这个问题,「历史记录」触发的时候,延时500ms,再发送获取当前页面准确的网页标题,但会带来新的问题,不管延时多久,用户再次点击跳转或离开都有可能会导致数据丢失

 

  • 优点:允许自定义page_locationpage_title
  • 缺点:如果SPA不使用pushState或replaceState,此方法无效;:需要仔细测试以避免数据污染
  • 适用场景:History Change触发器适合URL变化频繁、需要自定义页面参数的SPA,但仍依赖History API的应用。

延伸阅读:GA4上对单页应用(SPA)做跟踪——History Change触发器

方法三:延时(History Change&dataLayer.push)

延时的方法,就是页面加载/History Change,然后延时500ms,执行js获取Page URL和Page Title,通过dataLayer.push发送出去,其中方法其实是History Change的变形。

History Change触发器

在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置… 」——「历史记录更改」,命名为History Change,做如下设置:

配置延时发送

在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置… 」——「自定义HTML」,命名为“SPA-延时发送”,然后做如下设置:

这个配置的作用是History Change的时候,做了延时,确保新页面打开,获取准确的网页标题,然后通过dataLayer.push将其发送数据。、

 

配置数据层变量

在GTM中点击「变量」——「新建」——「选择一个变量类型以开始设置…」——「数据层变量」,命名为dlv—pagePath & dlv—pageTitle,做如下设置:

 

 

配置代码

先要配置一个Google Tag,不需要配置触发器,在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google代码」,命名为“GA4配置设置”:

 

注意:这个代码不需要触发器。

下来就是设置代码,在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置… 」——「Google Analytics」——「Google 代码」,命名为“GA4 Basic Tracking”,然后做如下设置:

  • 优点:不需要开发,只需在GTM设置就可以实现
  • 缺点:延时事件不管如何设定,总会有丢失PV的情况

延伸阅读:GA4上对单页应用(SPA)做跟踪——延迟发送(History Change&dataLayer.push)

方法四:dataLayer.push(推荐)

对于复杂的SPA或不依赖History API的应用,开发者协助通过dataLayer.push方法推送自定义事件是最可靠的跟踪方式。开发者可以在SPA的路由变化或内容更新时,主动推送page_view事件到数据层,GTM再根据这些事件触发GA4标签。

开发:dataLayer.push发送数据

页面发送的结构如下,打开每个页面都需要这样发送,这一步是需要开发去实施:

<script>
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'Pageview',
 'pagePath': '/something/contact-us',
 'pageTitle': 'Contact us' 
 });
</script>

 

触发器:Custom Event—Pageview

在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置… 」——「自定义事件」,命名为“Custom Event—Pageview”,然后做如下设置:

这里的事件名称对应dataLayer里的event。

变量:dlv—pagePath & dlv—pageTitle

GTM中点击「变量」—「新建」—「选择一个变量类型以开始设置」——「数据层变量」,命名为dlv—pagePath”,做如下设置

这里的数据层变量名对应dataLayer里的数据层变量。

 

变量:Google 代码:配置设置

GTM中点击「变量」—「新建」—「选择一个变量类型以开始设置」——「Google 代码:配置设置」,命名为“GA4配置设置”,做如下设置

 

代码:基础跟踪代码

接下来就是设置代码,在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置… 」——「Google Analytics」——「Google 代码」,命名为“GA4 Basic Tracking”,然后做如下设置:

 

  • 优点:不依赖History API,适用于任何类型的SPA;适合需要跟踪虚拟页面浏览(如表单步骤、动态内容加载)的应用。
  • 缺点:依赖开发团队修改代码,实施成本较高。
  • 适用场景:合复杂的SPA,尤其是那些不使用History API或需要高度自定义跟踪逻辑的应用。

延伸阅读:GA4上对单页应用(SPA)做跟踪——dataLayer.push方法


如有疑问,可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~
喜欢 (1)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址