单个项目多客户端域名部署场景下配置双Google Analytics ID可行性问询

核心疑问解答 #

• 不能直接硬编码同时添加两个GA追踪代码：该方案会导致用户访问任意部署实例时，两个GA账号都会收到上报数据，无法实现按部署服务器分开统计的需求。
• 无需重新构建打包即可实现分开上报，以下方案都可以满足你分发时才做环境区分的要求：

可行快捷方案 #

方案1：外置配置文件动态读取（适合已完成打包的场景） #

将GAID抽离到独立的ga-config.js文件中，打包时不将该文件打进构建产物，主代码仅读取该配置的ID完成GA初始化。分发到对应服务器时，仅需替换根目录下的ga-config.js即可：

• 客户A服务器的ga-config.js内容：

window.currentGaId = 'GA账号A的ID'

• 客户B服务器的ga-config.js内容：

window.currentGaId = 'GA账号B的ID'

方案2：部署时占位符替换（适合已完成打包的场景） #

如果构建产物的index.html中已经写死了GA初始化代码，直接用文本替换工具在分发到对应服务器时替换GAID即可，Linux环境可直接用sed命令一键完成：

# 分发到客户A服务器时执行
sed -i 's/旧的GAID/GA账号A的ID/g' index.html
# 分发到客户B服务器时执行
sed -i 's/旧的GAID/GA账号B的ID/g' index.html

方案3：域名自动匹配初始化（如果允许修改代码重新打一次包，后续可一劳永逸） #

代码中提前写入两个GAID和域名映射逻辑，仅初始化匹配当前域名的GA账号，打完包后可通用到两个部署环境，后续分发无需做任何额外配置：

const GA_MAP = {
  '客户A的域名': 'GA账号A的ID',
  '客户B的域名': 'GA账号B的ID'
}
// 仅初始化匹配到的GAID，不会触发另一个账号的数据上报
const targetGaId = GA_MAP[window.location.hostname]

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