如何高效为数千HTML文件添加谷歌分析代码并按域名条件加载

完全可以实现你要的效果！不用再每次手动注释/取消注释代码了，我们可以用原生JavaScript动态检测当前主机名，只有在主域名环境下才加载谷歌分析的脚本和执行初始化代码，同时还能满足SEO检测的要求。

具体实现代码 #

直接把这段代码放到所有HTML页面的<head>标签里就行（替换成你的实际域名和GA测量ID）：

<script>
// 配置你的主域名，比如 'your-main-domain.com'，支持带www的情况
const allowedDomains = ['your-main-domain.com', 'www.your-main-domain.com'];

// 检测当前主机名是否在允许列表中
if (allowedDomains.includes(window.location.hostname)) {
  // 动态创建谷歌分析的script标签
  const gaScript = document.createElement('script');
  gaScript.src = 'https://apis.google.com/js/platform.js';
  gaScript.async = true;
  
  // 插入到页面头部
  document.head.appendChild(gaScript);
  
  // 脚本加载完成后执行初始化逻辑
  gaScript.onload = function() {
    // 这里替换成你的谷歌分析初始化代码
    window.gtag('js', new Date());
    window.gtag('config', '你的GA_MEASUREMENT_ID');
  };
}
</script>

为什么这个方案可行？ #

• 条件加载逻辑清晰：通过window.location.hostname获取当前访问的主机名，和预先定义的主域名列表对比，只有匹配时才会加载脚本，staging环境下完全不会执行这段加载逻辑。
• 满足SEO要求：谷歌的爬虫现在能够执行页面中的JavaScript代码，它会运行这段条件判断逻辑，在主域名环境下会识别到动态创建的脚本并加载，和直接在HTML中写死<script>标签的效果一致，不会影响SEO检测。
• 无需修改公共文件：所有代码直接嵌入到HTML页面中，符合你不能用公共文件引入的要求。

自定义调整建议 #

• 如果你的主域名有多个变体（比如带www和不带www），直接把它们都加到allowedDomains数组里就行。
• 如果需要更灵活的域名匹配（比如排除特定子域名），可以用正则表达式，比如：

  // 匹配主域名和www子域名，排除staging等其他子域名
  if (/^(www\.)?your-main-domain\.com$/.test(window.location.hostname)) {
    // 加载脚本逻辑
  }
  

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