更新时间：2025年6月25日
什么是单页应用（SPA）
GA4跟踪单页应用的挑战
History Change触发器跟踪单页应用
实现步骤
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_location和page_referrer，适合复杂的SPA。
- 无需大量开发工作：只需配置GTM，无需修改网站代码
缺点
- URL和页面标题不准确：无法捕获完整的URL或正确的页面标题。
适用场景
History Change触发器适合URL变化频繁、需要自定义页面参数的SPA，但仍依赖History API的应用。
