GA4的跟踪原理：页面标签技术
页面标签技术（Tagging Technology）是一种从访客浏览器端收集数据的技术，通常是在网页或应用程序中嵌入小段标签（也可以成为“代码”）以收集、传递和管理数据的技术。
这是目前最主流的方法，如Google Analytics 4、Adobe Analytics、百度统计、神策都是采用这种方法。
通过在网页中嵌入一段Google Analytics 4 的JS代码，然后这段JS代码会收集相关信息通过1像素的gif图片来发送相关的信息给Google的服务器，以完成数据统计。
GA4数据传输方式
GA4发送给服务器的请求有如下参数：
详细的参数解释请看：Google Analytics 4 中传递参数解析
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，具体取决于匹配规模。
GA4的跟踪代码解析
Google Analytics 4 的跟踪代码如下：
<!-- Global site tag (gtag.js) - Google Analytics --><script src="https://www.googletagmanager.com/gtag/js?id=G-HZ4RDGTX66" async=""></script><script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-HZ4RDGTX66');
</script>
第一行<script async src=”https://www.googletagmanager.com/gtag/js?id=G-HZ4RDGTX66″></script>，异步加载一段js，这段js是放在www.googletagmanager.com域名下的。
window.dataLayer = window.dataLayer || []：是dataLayer是数据层变量的初始化，完整的是var dataLayer = window.dataLayer = window.dataLayer || [] 然后你后面可以直接调用dataLayer.push。
function gtag(){dataLayer.push(arguments)};定义一个函数，方法
gtag(‘js’, new Date())：调用前面的函数，其中“js”是前面引入的那个js里面的一个已经定义的函数,
下面的“config”也是跟踪js里定义的函数，另一个定义函数为set。
请求限额
Google Analytics 4 的请求限额是16KB，这是gtag.js限制的，如果超过16KB，会发送失败，如下图：
MP协议是130KB。