谷歌分析gtag.js ready回调

在使用 Google Analytics（谷歌分析）时，gtag.js 是一种常见的实现方式。gtag.js 是 Google 提供的全站点标签（Global Site Tag），用于简化和统一各种 Google 服务（如 Google Analytics、Google Ads 等）的标签管理。

在某些情况下，你可能需要在 gtag.js 完成初始化后执行一些自定义代码。虽然 gtag.js 本身没有提供一个直接的 "ready" 回调机制，但你可以通过一些技巧来实现类似的功能。

方法 1：使用 `gtag` 命令队列

gtag 命令队列是一个常见的方式，用于确保在 gtag.js 初始化完成后执行代码。你可以将自定义代码放在 gtag 命令队列中。

示例代码

html

<!DOCTYPE html>
<html>
<head>
  <title>Google Analytics gtag.js Ready Callback</title>
  <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'YOUR_TRACKING_ID');

    // 自定义代码放在这里
    gtag('event', 'page_view', {
      'event_callback': function() {
        console.log('Google Analytics is ready.');
        // 在这里执行你的自定义代码
      }
    });
  </script>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

解释

gtag('config', 'YOUR_TRACKING_ID'); 用于初始化 Google Analytics。
gtag('event', 'page_view', { 'event_callback': function() { ... } }); 用于在页面视图事件完成后执行自定义代码。

方法 2：使用 MutationObserver 监控 DOM 变化

如果你需要更复杂的逻辑，可以使用 MutationObserver 来监控 DOM 变化，确保 gtag.js 已经加载并初始化。

示例代码

html

<!DOCTYPE html>
<html>
<head>
  <title>Google Analytics gtag.js Ready Callback</title>
  <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'YOUR_TRACKING_ID');

    // 使用 MutationObserver 监控 DOM 变化
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.type === 'childList') {
          mutation.addedNodes.forEach(function(node) {
            if (node.nodeName === 'SCRIPT' && node.src.includes('gtag/js')) {
              console.log('Google Analytics script loaded.');
              // 在这里执行你的自定义代码
              observer.disconnect(); // 停止观察
            }
          });
        }
      });
    });

    observer.observe(document.head, { childList: true });
  </script>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>