AngularJS多租户站点如何动态插入Google tag (gtag.js)跟踪ID

1. 替换index.html中的基础脚本 #

删除原有analytics.js相关的加载代码，替换为gtag的基础初始化代码，不需要写死跟踪ID，也不需要提前加载gtag资源：

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

2. 修改控制器中的setupAnalytics逻辑 #

替换原有ga相关的调用逻辑，实现动态插入gtag资源、初始化跟踪ID、路由切换上报页面浏览：

function setupAnalytics() {
  var googleTagEnabled = $settings.checkTrue('Analytics/GoogleTagEnabled');
  var googleTag = $settings['Analytics/GoogleTag'];
  if (googleTagEnabled && googleTag) {
    // 避免重复加载gtag脚本
    if (!document.querySelector('script[src*="gtag/js"]')) {
      var script = document.createElement('script');
      script.async = true;
      script.src = `https://www.googletagmanager.com/gtag/js?id=${googleTag}`;
      document.head.appendChild(script);
    }

    // 初始化gtag
    gtag('js', new Date());
    // 关闭默认页面浏览上报，改用路由切换时主动上报
    gtag('config', googleTag, {
      send_page_view: false
    });

    // 路由切换时上报页面浏览
    $rootScope.$on('$stateChangeSuccess', function (event) {
      gtag('event', 'page_view', {
        page_path: $location.path(),
        send_to: googleTag
      });
    });
  }
}

注意事项 #

• 动态加载脚本前做了重复加载判断，避免租户切换时重复插入资源
• 关闭了gtag初始化时的默认页面上报，保证单页应用路由跳转的页面浏览数据准确
• 所有上报都绑定了当前租户的Tracking ID，不会出现多租户数据串流问题

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