本文介绍如何在不依赖 web.config 的前提下，利用 javascript 检测当前页面 url 是否包含特定关键词（如 “test” 或 “dev”），从而实现仅在开发环境或生产环境中动态加载 google analytics 脚本。
本文介绍如何在不依赖 web.config 的前提下，利用 javascript 检测当前页面 url 是否包含特定关键词（如 “test” 或 “dev”），从而实现仅在开发环境或生产环境中动态加载 google analytics 脚本。
在前端项目中，常需区分开发（DEV）、测试（TEST）与生产（PROD）环境，尤其当第三方服务（如 Google Analytics）仅应在生产环境启用时——避免污染真实数据、降低调试干扰。由于无法使用服务器端配置（如 Web.config），最直接且兼容性良好的方案是基于 window.location.href 进行客户端环境识别，并按需动态注入 GA 脚本。
✅ 推荐实现方式：条件化动态加载
将原本静态引入的 <script> 标签改为 JavaScript 动态创建，并包裹在 if 条件判断中。例如，仅当 URL 包含 "dev"、"localhost" 或 "test" 时跳过 GA 加载；反之，在生产环境（如域名含 example.com）才执行：
<script>
(function() {
const url = location.href.toLowerCase();
// ✅ 示例：仅在【非开发环境】加载 GA（推荐用于生产部署）
if (!url.includes('localhost') &&
!url.includes('dev.') &&
!url.includes('test.') &&
!url.includes('/dev/') &&
!url.includes('?env=dev')) {
// 1. 动态创建并插入 GTM/GA JS
const gaScript = document.createElement('script');
gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
gaScript.async = true;
document.head.appendChild(gaScript);
// 2. 初始化 dataLayer 和 gtag
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX', {
send_page_view: true
});
}
})();
</script>? 关键说明：
- 使用 location.href.toLowerCase() 提升匹配鲁棒性（避免大小写问题）；
- 推荐采用「黑名单式」判断（排除开发特征），而非「白名单式」（如 url.includes('prod')），因生产 URL 更稳定、更少歧义；
- 务必将脚本插入 <head>（而非 <body> 底部），确保 GA 在页面渲染前尽早初始化；
- 若使用 Google Tag Manager（GTM），可同样用 src 指向 gtm.js?id=XXX，逻辑一致。
⚠️ 注意事项与最佳实践
- 不要依赖路径片段绝对匹配：indexOf('test') > -1 可能误判（如 https://example.com/testimonials 被误认为测试环境），应结合上下文（如子域名 test.example.com 或路径 /dev/）精准判断；
- 避免敏感信息硬编码：GA ID（如 G-XXXXXXXXXX）虽为公开标识，仍建议通过构建工具（如 Webpack DefinePlugin）注入，而非明文写死；
- 考虑 CSP 兼容性：动态创建 script 标签可能受 Content-Security-Policy 限制，需确保 script-src 允许 https://www.googletagmanager.com；
- 调试技巧：可在条件分支中添加 console.log('GA loaded:', url) 或 alert('GA disabled in dev') 辅助验证逻辑是否生效。
通过此方案，你无需修改任何后端配置，即可安全、灵活、可维护地实现环境感知的分析脚本控制——既保障生产数据纯净，又提升本地开发体验。
