单构建多客户端部署的纯前端JS应用如何接入Google Analytics

1. 按域名动态匹配GA跟踪ID #

不用把GA ID硬编码到构建包里，而是在页面加载时根据当前域名自动匹配对应的ID初始化GA：

• 具体操作：在代码里维护一个域名与GA ID的映射表（也可以从后端接口拉取该映射），通过window.location.hostname获取当前域名，匹配到对应GA ID后，动态加载GA脚本并完成初始化。
• 代码示例：

// 域名-GA ID映射表，新增客户端时直接扩展即可
const domainGaMap = {
  'client1.yourdomain.com': 'UA-12345678-1',
  'client2.yourdomain.com': 'UA-12345678-2',
};

const currentGaId = domainGaMap[window.location.hostname];
if (currentGaId) {
  // 动态加载GA脚本并初始化
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', currentGaId, 'auto');
  ga('send', 'pageview');
}

• 优势：一次构建即可适配所有客户端，新增客户端仅需更新映射表（若从接口拉取则无需修改静态文件）。

2. 用GA自定义维度区分客户端 #

只创建一个GA主属性，通过自定义维度标记不同客户端，后续在GA后台通过维度筛选实现分客户端统计：

• 具体操作：
  1. 在GA后台创建一个自定义维度（例如命名为客户端域名），作用范围设置为「用户」或「会话」。
  2. 前端初始化GA时，将当前域名作为该自定义维度的值传入。
• 代码示例：

// 初始化共用的GA主属性
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-12345678-0', 'auto');

// 设置自定义维度（需与GA后台配置的维度索引一致，此处假设为1）
const clientDomain = window.location.hostname;
ga('set', 'dimension1', clientDomain);

ga('send', 'pageview');

• 优势：无需维护多个GA属性，在GA后台通过自定义维度即可筛选出各客户端数据，新增客户端无需修改GA配置。

3. 部署时动态替换GA ID #

构建阶段将GA ID设为占位符，部署每个客户端实例时通过脚本替换为对应真实ID：

• 具体操作：
  1. 构建时，将代码中的GA ID写成{{GA_TRACKING_ID}}这类占位符。
  2. 部署每个客户端时，用Shell脚本或CI/CD工具（如GitHub Actions、GitLab CI）替换静态文件中的占位符。
• 示例Shell脚本：

# 替换dist目录下index.html中的GA ID占位符
sed -i "s/{{GA_TRACKING_ID}}/UA-12345678-1/g" ./dist/index.html

• 优势：完全复用同一个构建包，GA配置在部署阶段动态注入，适合有自动化部署流程的场景。

4. 用Google Tag Manager（GTM）统一管理 #

无需修改应用代码，通过GTM可视化管理跟踪配置，实现分客户端统计：

• 具体操作：
  1. 为所有客户端部署同一个GTM容器代码。
  2. 在GTM后台创建基于域名的触发器，不同域名触发加载对应的GA跟踪代码；或设置变量获取当前域名，将其作为GA的自定义维度发送。
• 优势：所有跟踪配置均在GTM后台管理，无需改动应用代码，新增或修改客户端配置直接在GTM中操作，无需重新部署应用。

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