如何使用gtag在Google Analytics中跟踪utm参数？AngularJS SPA技术问询

嘿，我来帮你搞定这两个问题，尤其是AngularJS单页应用的场景——我之前处理过类似的需求，给你一步步拆解：

一、基础场景下用gtag跟踪utm_source的方法 #

首先，在普通的多页网站中，gtag其实会自动抓取URL中的utm参数，包括utm_source、utm_medium这些，不需要额外写复杂代码。你只需要确保正确加载并初始化gtag.js就行：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  // 初始化GA，这一步会自动读取URL里的UTM参数并发送给GA
  gtag('config', 'UA-XXXXXXXX-X');
</script>

当用户通过带?utm_source=xxx&utm_medium=yyy的链接进入网站时，上面的gtag('config')命令会自动识别这些参数，关联到对应的页面视图和用户会话里，你直接在GA后台就能看到utm_source的统计数据了。

二、AngularJS SPA中动态页面浏览的UTM跟踪解决方案 #

单页应用的问题在于：路由切换不会刷新页面，默认的gtag只会在页面首次加载时读取UTM参数，后续动态切换的页面视图不会自动带上这些参数；而且如果用户中途通过另一个带UTM的链接进入同一个SPA，也需要更新参数。

这里给你一套完整的解决方案：

1. 先把UTM参数存起来，方便后续复用 #

我们需要写一个函数提取URL中的UTM参数，然后保存到全局变量或localStorage里，这样路由切换时能一直用：

// 提取URL中的所有UTM参数
function getUtmParams() {
  const urlParams = new URLSearchParams(window.location.search);
  return {
    utm_source: urlParams.get('utm_source'),
    utm_medium: urlParams.get('utm_medium'),
    utm_campaign: urlParams.get('utm_campaign'),
    utm_term: urlParams.get('utm_term'),
    utm_content: urlParams.get('utm_content')
  };
}

// 初始化时加载UTM参数：优先取当前URL的，没有就取之前存在localStorage的
let currentUtmParams = getUtmParams();
if (Object.values(currentUtmParams).some(val => val !== null)) {
  // 如果当前URL有UTM参数，存到localStorage里，会话内有效
  localStorage.setItem('savedUtmParams', JSON.stringify(currentUtmParams));
} else {
  const savedParams = localStorage.getItem('savedUtmParams');
  if (savedParams) currentUtmParams = JSON.parse(savedParams);
}

2. 监听AngularJS路由变化，手动发送带UTM参数的页面视图 #

SPA的页面切换是动态的，我们需要在路由切换完成后，手动调用gtag发送页面视图，并带上之前保存的UTM参数：

angular.module('你的应用模块名').run(['$rootScope', '$location', function($rootScope, $location) {
  // 监听路由切换成功事件
  $rootScope.$on('$routeChangeSuccess', function(event, currentRoute) {
    // 获取当前页面的路径和标题
    const pagePath = $location.path();
    const pageTitle = currentRoute.title || document.title;

    // 准备发送给GA的参数，把UTM参数加进去
    const gaEventParams = {
      page_path: pagePath,
      page_title: pageTitle
    };

    // 有哪个UTM参数就加哪个，避免传null值
    if (currentUtmParams.utm_source) gaEventParams.utm_source = currentUtmParams.utm_source;
    if (currentUtmParams.utm_medium) gaEventParams.utm_medium = currentUtmParams.utm_medium;
    if (currentUtmParams.utm_campaign) gaEventParams.utm_campaign = currentUtmParams.utm_campaign;
    if (currentUtmParams.utm_term) gaEventParams.utm_term = currentUtmParams.utm_term;
    if (currentUtmParams.utm_content) gaEventParams.utm_content = currentUtmParams.utm_content;

    // 发送页面视图事件给GA
    gtag('event', 'page_view', gaEventParams);
  });

  // 额外：如果路由切换时URL带了新的UTM参数，更新保存的参数
  $rootScope.$on('$routeChangeStart', function() {
    const newUtmParams = getUtmParams();
    if (Object.values(newUtmParams).some(val => val !== null)) {
      currentUtmParams = newUtmParams;
      localStorage.setItem('savedUtmParams', JSON.stringify(currentUtmParams));
    }
  });
}]);

3. 几个注意点 #

• 如果你用的是GA4（而不是老的UA），初始化代码改成gtag('config', 'G-XXXXXXXXXX')，但页面视图的发送逻辑和UTM参数的传递是一样的。
• 确保gtag.js在AngularJS代码之前加载，不然window.gtag会找不到。
• 可以根据需求调整localStorage的有效期，比如会话结束后清除，或者加个过期时间判断。

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