更新时间：2025年1月4号
这节跟大家分享一下Google Analytics 4的数据传输机制。
一般来说，在介绍Google Analyitcs 4的传输机制的时候，通常直接说是通过虚拟一像素（gif）的形式是实现数据的传输的，但是实际上，这个只是其中的一种形式，Google Analytics 4中实际是有3种发送数据的方式的，分别为：
- Image Beacons (GIF请求)
- XHR (XMLHttpRequest)
- Navigator.sendBeacon
Image Beacons
Image Beacons，中文叫GIF请求，这是最基本的传输方法，通过向Google Analytics 4服务器发送一个1×1像素的透明GIF图像来传输数据。每个页面浏览或事件触发都会生成一个包含数据的URL，这个URL指向Google的收集服务器。
可以在浏览器中的Network找到包含collect的请求，发送的类型是GET，注意Type是gif，表示这个就是虚拟像素：
请求的链接就是要传递的信息。
-
优点: 简单且广泛兼容，几乎所有浏览器都支持GIF图片请求，即使在JavaScript被禁用的情况下也能工作
-
缺点: 由于每个数据点需要单独的HTTP请求，这可能会影响页面加载速度，特别是在大量数据传输时；另外在离开页面时可能无法发送数据，因为依赖于页面加载状态。
XHR
XHR的全称是 XMLHttpRequest，这是使用浏览器的XMLHttpRequest对象（或现代的Fetch API），GA4可以发送后台的异步请求来传输数据，这种方法允许在不重新加载页面的情况下发送数据，提高了性能。
可以在浏览器中的Network找到包含collect的请求，发送的类型是POST，type是XHR或fetch（注意Type是fetch，可能是Fetch API，也可能是sendBeacon API，区分不了）
-
优点: 比GIF请求更高效，因为它允许批量发送大量数据，这减少了网络请求的数量，提高了传输效率和用户体验。
-
缺点: 需要JavaScript支持，因此如果用户禁用了JavaScript，数据将无法传输；另外在在离开页面时可能无法发送数据，因为依赖于JavaScript执行环境。
Navigator.sendBeacon
这是一种较新的方法，利用了浏览器的navigator.sendBeacon API，可以向服务器异步地发送数据，它允许在用户离开页面时（例如，关闭标签页或导航到另一个页面）发送数据。这确保了即使页用户离开页面，数据也能可靠地发送到服务器。
可以在浏览器中的Network找到包含collect的请求，发送的类型是POST，type是fetch（注意Type是fetch，可能是Fetch API，也可能是sendBeacon API，区分不了）
-
优点: 特别适用于捕获用户离开页面时的行为（如退出页面事件），因为它不会阻塞页面卸载。它提供了更高的可靠性和数据完整性。
-
缺点: 较旧的浏览器可能不支持sendBeacon API，因此需要有备用方法。
总结
|
类型
|
Method
|
Type
|
发送数据的大小限制
|
|---|---|---|---|
|
Image Beacon
|
GET
|
gif
|
16K，MP协议是130KB。
|
|
XMLHttpRequest
|
GET/POST等
|
fetch
|
16K，MP协议是130KB。
|
|
navigator.sendBeacon
|
POST
|
fetch
|
16K，MP协议是130KB。
|
这几种方式都各有优缺点：
- 使用image，每个页面或事件都需要发送单独的HTTP请求，确保数据即时发送，但这可能会影响页面加载速度
- 使用XHR，允许批量发送数据，这减少了网络请求的数量，提高了传输效率和用户体验，但用户离开没发送就会丢失数据
- 使用sendBeacon，可以向服务器异步地发送数据，确保了即使页用户离开页面，数据也能可靠地发送到服务器，但不支持一些旧浏览器和会占用网络带宽和资源
Google Analytics 4使用哪种类型的规则是：首选beacon（如果浏览器支持），其次采用xhr 或 image 。如果你指定了“beacon”，而用户的浏览器不支持“navigator.sendBeacon”方法，则Google Analytics 4会转而使用xhr 或 image，具体取决于匹配规模。
