更新时间：2025年6月25日
什么是单页应用（SPA）
单页应用（Single Page Application, SPA）是一种网页应用，其所有必要的HTML、JavaScript和CSS代码在首次加载时一次性获取，或根据用户交互动态加载内容，而无需重新加载整个页面。SPA通过JavaScript框架（如React、Angular、Vue.js等）实现动态内容更新，通常依赖浏览器History API或DocumentFragment来管理页面状态和URL变化。
GA4跟踪单页应用的挑战
延迟发送（History Change&dataLayer.push）
延时发送是对GA4上对单页应用(SPA)做跟踪——History Change触发器 的优化，可以解决网页标题错位的问题。思路是页面加载/History Change时延时500ms，执行js获取Page URL和Page Title，通过dataLayer.push发送出去。
实现步骤
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”，然后做如下设置：
优点
- 灵活性更高：允许自定义page_location和page_title，适合复杂的SPA。
- 无需大量开发工作：只需配置GTM，无需修改网站代码
缺点
- 数据丢失：延时，如果用户离开或快速访问其他页面，会到时数据丢失
适用场景
History Change触发器适合URL变化频繁、需要自定义页面参数的SPA，但仍依赖History API的应用。
如有疑问，可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~
