Rails+Turbolinks环境下GA4出现重复page_view事件问题求助

问题原因 #

GA4的gtag('config')默认启用send_page_view选项（值为true），同时gtag脚本会自动监听浏览器的historychange事件。当Turbolinks切换页面时，既会触发我们绑定的turbolinks:load事件执行gtag('config')发送page_view，又会触发gtag自带的historychange监听逻辑再发送一次，最终导致重复统计。而Universal Analytics（UA）没有自动监听historychange的机制，所以不会出现这个问题。

方案一：禁用自动监听，手动发送page_view #

通过全局配置禁用GA4自动发送page_view，然后在首次加载和Turbolinks切换时手动调用事件发送：

<script async src="https://www.googletagmanager.com/gtag/js?id=XXXX"></script>

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  gtag('js', new Date());

  // 禁用GA4自动发送page_view
  gtag('config', 'XXXX', {
    'send_page_view': false
  });

  // 封装页面浏览统计函数
  function trackGaPageView(url) {
    if (typeof gtag === 'function') {
      gtag('event', 'page_view', {
        'page_path': new URL(url).pathname + new URL(url).search,
        'page_location': url
      });
    }
  }

  // 首次加载页面时统计
  trackGaPageView(window.location.href);

  // Turbolinks切换页面时统计
  document.addEventListener('turbolinks:load', event => {
    trackGaPageView(event.data.url);
  });
</script>

方案二：按需开启发送，避免重复触发 #

在全局配置中禁用自动发送，仅在需要统计时临时开启send_page_view参数：

<script async src="https://www.googletagmanager.com/gtag/js?id=XXXX"></script>

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  gtag('js', new Date());

  // 全局禁用自动发送page_view
  gtag('config', 'XXXX', {
    'send_page_view': false
  });

  // 封装页面统计函数
  function trackGaPageView(url) {
    if (typeof gtag === 'function') {
      gtag('config', 'XXXX', {
        'page_path': new URL(url).pathname + new URL(url).search,
        'page_location': url,
        'send_page_view': true // 仅本次调用发送page_view
      });
    }
  }

  // 首次加载统计
  trackGaPageView(window.location.href);

  // Turbolinks切换时统计
  document.addEventListener('turbolinks:load', event => {
    trackGaPageView(event.data.url);
  });
</script>

内容的提问来源于stack exchange，提问作者Bryan Spence