如何让gtag自动发送Google Analytics事件？

问题原因 #

gtag.js是异步加载的，你在gtag('config')之后立即调用的事件（如test-event-1），可能在GA4完成初始化前就被推入队列，导致无法被正确发送；而按钮点击这类用户交互触发的事件，因为发生在GA初始化完成后，所以能正常上报。同时，页面加载后自动发送的事件如果未标记为非交互事件，可能会被GA的默认机制过滤。

解决方案 #

以下是几种可行的修改方式：

1. 利用config的回调确保初始化完成后发送事件

修改gtag('config')调用，添加callback参数，在GA初始化完成后再发送事件：

gtag('config', 'G-XXXXXXXXXX', {
  'callback': function() {
    gtag('event', 'test-event-1');
  }
});

2. 提前将事件推入dataLayer队列

在gtag.js加载前，直接把事件推入dataLayer，gtag.js加载完成后会自动处理队列中的所有事件：

<script type="text/javascript">
    window.dataLayer = window.dataLayer || [];
    // 提前推入test-event-1
    dataLayer.push(['event', 'test-event-1']);

    function gtag() {
        dataLayer.push(arguments);
    }

    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXX');
</script>

3. 优化window.load中的事件发送

给test-event-2添加non_interaction参数，标记为非交互事件，避免被GA过滤：

window.addEventListener('load', function () {
    gtag('event', 'test-event-2', {
        'non_interaction': true
    });
})

修改后的完整示例代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Analytics</title>
</head>
<body>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script type="text/javascript">
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }

    gtag('js', new Date());
    // 用callback发送test-event-1
    gtag('config', 'G-XXXXXXXXXX', {
        'callback': function() {
            gtag('event', 'test-event-1');
        }
    });

    // 优化window.load事件
    window.addEventListener('load', function () {
        gtag('event', 'test-event-2', {
            'non_interaction': true
        });
    })
</script>

<div class="container">
    <h1>This is a test</h1>
    <p>Click to trigger another event.</p>
    <button type="button"
            onclick="gtag('event', 'test-event-3')">
        Send Event
    </button>
</div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Pat Wallace