更新时间：2025年1月4号
这节跟大家分享一下GA4的数据传输机制。
很多介绍GA4的文章都会提到，它是通过1×1像素GIF（Image Beacon） 将数据发送到Google服务器。
实际上，这是 Universal Analytics（UA）时代较常见的实现方式。对于目前的GA4 ，主要使用的是现代浏览器提供的异步请求能力。
目前，GA4主要采用以下两种数据发送方式：
- Fetch API
- navigator.sendBeacon()
GA4会根据浏览器能力自动选择最合适的传输方式，以兼顾数据可靠性和页面性能。
Fetch API
Fetch API 是现代浏览器提供的标准网络请求接口，也是目前GA4最常见的数据传输方式。
当事件发生时，GA4会通过Fetch API向Google收集服务器发送异步请求，而不会导致页面重新加载。
可以在浏览器开发者工具中找到包含collect的请求：
- Method：POST
- Type：fetch
请求地址通常类似：
https://www.google-analytics.com/g/collect优点
- 支持POST请求，可发送更多数据
- 异步执行，不影响页面渲染
- 网络效率较高
- 支持连续发送多个事件
- 是现代浏览器的主流实现方式
缺点
- 依赖JavaScript
- 如果用户在请求完成前关闭页面，部分数据可能无法发送成功
navigator.sendBeacon()
navigator.sendBeacon() 是浏览器专门为页面卸载阶段发送数据设计的API，也是GA4优先采用的数据传输方式。
当用户关闭标签页、刷新页面、跳转到其他页面、离开网站，浏览器仍会在后台继续完成数据发送，因此能够有效降低事件丢失的情况。
优点
- 页面关闭时仍可继续发送数据
- 不阻塞页面卸载
- 数据发送成功率更高
- 特别适合页面退出等场景
缺点
- 较旧浏览器可能不支持
- 请求方式和参数受到一定限制
两种方式有什么区别？
| 类型 | Method | Network Type | 主要用途 |
|---|---|---|---|
| Fetch API | POST | fetch | 普通页面浏览、事件上传 |
| navigator.sendBeacon() | POST | fetch | 页面关闭、页面切换时发送数据 |
如果需要验证，可以在GTM或gtag.js中指定transport_type参数进行测试。
GA4如何选择发送方式？
GA4 会根据浏览器能力自动选择最合适的数据传输方式，一般遵循以下优先级：
- navigator.sendBeacon()
- Fetch API
也就是说：
- 浏览器支持 navigator.sendBeacon() 时，GA4会优先使用它，因为它能够提高页面关闭时的数据发送成功率。
- 如果浏览器不支持，则自动回退到 Fetch API。
整个过程由Google Tag自动完成，开发者一般无需手动指定transport_type。
总结
GA4已经全面采用现代浏览器提供的异步数据传输能力，目前主要依赖Fetch API和navigator.sendBeacon()两种方式。
其中：
- Fetch API负责绝大多数页面浏览和事件的数据上传，传输效率高，是目前最常见的实现方式。
- navigator.sendBeacon()更适用于页面关闭、页面切换等场景，能够显著提高数据发送成功率，因此也是GA4的首选传输方式。
GA4会根据浏览器能力自动选择最合适的传输方式，无需开发者进行额外配置。这种自动降级机制既保证了数据采集的可靠性，也兼顾了页面性能和浏览器兼容性。
