更新时间：2025年6月25日
这一篇介绍Google Analytics 4（GA4）对单页应用(SPA)做跟踪。
什么是单页应用（SPA）
单页应用（Single Page Application，简称 SPA） 是一种现代Web应用架构。
与传统网站不同，SPA在用户第一次访问时，会加载页面所需的主要HTML、CSS和JavaScript。之后用户在站内的所有操作（如点击菜单、切换页面），页面本身不会刷新，而是由JavaScript 动态更新页面内容。
常见的SPA框架包括：React、Vue.js、Angular，这些框架通过 JavaScript 控制页面渲染，让网站体验更流畅、更接近原生App，所以广泛使用。
为什么GA4默认无法正确跟踪SPA？
在传统网站中，每次页面刷新时，都会自动触发一次page_view事件，因此GA4可以天然地记录每一次页面浏览。
但在SPA中：页面不刷新，浏览器不会重新加载GA4，后续“页面切换”只是 JavaScript 行为，所以GA4默认只会记录第一次进入网站的 page_view。
这就导致了数据严重不完整。
GA4跟踪SPA的常见挑战
- 页面浏览未被正确记录：由于页面不刷新，GA4的默认page_view事件可能只在首次加载时触发，后续的页面内容变化不会自动记录，所以页面访问次数明显偏低。
- URL和页面标题不准确：SPA可能通过pushState更新URL，但GA4默认使用document.location.pathname，可能无法捕获最新完整的URL或正确的页面标题。
- 会话和引荐来源问题：如果不正确配置，SPA可能导致会话数据断裂或引荐来源（Rogue referrer）数据错误，影响用户旅程分析。
- 页面浏览事件重复或丢失：自动跟踪（如增强测量）可能导致页面浏览事件重复计数，数据会“看起来很多，但其实不准”
针对SPA的特点，通常可以采用 以下四种主要跟踪方案 来实现准确的数据采集：
- 开启增强测量内置SPA跟踪
- 基于History Change的跟踪方式
- 基于延时发送的方式
- 通过dataLayer.push发送
每种方法适合的场景不同，配置复杂度和稳定性也不一样，下面来详细介绍。
方法一：增强型衡量事件
- 优点：增强测量内置支持，设置简单，无需额外的编码。
- 缺点：只能跟踪基础的PV；存在Page URL和Page Title错位；如果SPA不使用History API（例如使用DocumentFragment或其他方式更新内容），增强测量可能无法捕获页面浏览。
- 适用场景：增强测量适合简单SPA，URL变化与页面内容更新直接相关，且对页面标题和参数的自定义需求较低。
方法二：History Change
Step 1：History Change触发器
在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置… 」——「历史记录更改」，命名为History Change，做如下设置：
然后在GTM里点击预览，点击访问不同的网页，可以在Tag Assistant里看到「历史记录」：
Step 2：配置数据层变量
点击「历史记录」，然后再API调用里看里面的信息，主要找到oldUrl和newUrl：
oldUrl是上一个页面，也即是Referral，newUrl是当前页面，需要用数据层变量获取它。
在GTM中点击「变量」——「新建」——「选择一个变量类型以开始设置…」——「数据层变量」，命名为dlv-oldUrl，做如下设置：
用同样的方法设置dlv-newUrl。
Step 3：配置代码
先要配置一个Google Tag，不需要配置触发器，在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google代码」，命名为“GA4 update”：
注意：这个代码不需要触发器。
在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics：GA4 事件」，命名为“GA4-Page View Event”，作如下设置：
GA4 update在GA4-Page View Event之前触发，主要是用于更新配置参数：
Step 4：普通页面加载该如何跟踪
这里说的页面加载是正常的页面加载，就普通页面。
如果普通页面加载没有触发「历史记录」，那么你需要配置一个单独的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
页面2的标题应该是Page Title B，但实际上是Page Title A，这是因为在页面1中点击的时候，就触发「历史记录」，这时候的页面标题还是Page Title A。
- 优点：允许自定义page_location和page_title
- 缺点：如果SPA不使用pushState或replaceState，此方法无效；：需要仔细测试以避免数据污染
- 适用场景：History Change触发器适合URL变化频繁、需要自定义页面参数的SPA，但仍依赖History API的应用。
方法三：延时（History Change&dataLayer.push）
可以通过延时的方式解决标题错误的问题，延时可以是说History Change的升级方法。
具体是页面加载/History Change触发时，延时500ms（你可以自定义其他时长），执行JavaScript获取Page URL和Page Title，再通过dataLayer.push发送出去。
Step 1：History Change触发器
在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置… 」——「历史记录更改」，命名为History Change，做如下设置：
Step 2：配置延时发送
在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置… 」——「自定义HTML」，命名为“SPA-延时发送”，然后做如下设置：
这个配置的作用是History Change的时候，做了延时，确保新页面打开，获取准确的网页标题，然后通过dataLayer.push将其发送数据。、
Step 3：配置数据层变量
在GTM中点击「变量」——「新建」——「选择一个变量类型以开始设置…」——「数据层变量」，命名为dlv—pagePath & dlv—pageTitle，做如下设置：
Step 4：配置代码
先要配置一个Google Tag，不需要配置触发器，在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google代码」，命名为“GA4配置设置”：
注意：这个代码不需要触发器。
下来就是设置代码，在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置… 」——「Google Analytics」——「Google 代码」，命名为“GA4 Basic Tracking”，然后做如下设置：
常见问题：延时的时长与PV的丢失
不管延时设置为多长时间，总会有一些PV丢失的。
- 优点：不需要开发，只需在GTM设置就可以实现
- 缺点：延时事件不管设置为延迟多长时间，总会有丢失PV的情况
第二和第三种方法会导致新的问题，一般不推荐使用 。
方法四：dataLayer.push（推荐）
Step 1：dataLayer.push发送数据
页面发送的结构如下，打开每个页面都需要这样发送，这一步是需要开发去实施：
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Pageview',
'pagePath': '/something/contact-us',
'pageTitle': 'Contact us'
});
</script>
Step 2：设置触发器Custom Event—Pageview
在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置… 」——「自定义事件」，命名为“Custom Event—Pageview”，然后做如下设置：
这里的事件名称对应dataLayer里的event。
Step 3：设置数据层变量
GTM中点击「变量」—「新建」—「选择一个变量类型以开始设置」——「数据层变量」，命名为dlv—pagePath”，做如下设置
这里的数据层变量名对应dataLayer里的数据层变量。
Step 4：设置Google 代码：配置设置
GTM中点击「变量」—「新建」—「选择一个变量类型以开始设置」——「Google 代码：配置设置」，命名为“GA4配置设置”，做如下设置
Step 5：设置代码
接下来就是设置代码，在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置… 」——「Google Analytics」——「Google 代码」，命名为“GA4 Basic Tracking”，然后做如下设置：
- 优点：不依赖History API，适用于任何类型的SPA；适合需要跟踪虚拟页面浏览（如表单步骤、动态内容加载）的应用。
- 缺点：依赖开发团队修改代码，实施成本较高。
- 适用场景：合复杂的SPA，尤其是那些不使用History API或需要高度自定义跟踪逻辑的应用。
常见问题FAQ
Rogue Referral问题（常出现，需重点注意）
付费搜索流量被划分到自然搜索，这个问题叫Rogue Referral，解决方式可以看：解决单页应用中出现Rogue Referral的几个方法
加载变慢：dataLayer数组膨胀
如果你是用dataLayer.push发送的方式跟踪，页面没有重新加载时，发送太多的datalayer.push，会导致里面的数组膨胀，导致速度变慢。
