如何基于URL用If语句判断DEV环境并包裹Google Analytics代码？

核心思路 #

通过浏览器的window.location对象检测当前页面URL，判断是否处于DEV环境，仅在非DEV环境下加载并初始化Google Analytics代码，避免DEV环境的数据干扰正式统计。

修改后的完整代码 #

<!-- 可选：用于验证当前URL的测试代码，确认环境判断逻辑 -->
<script>alert(window.location.href + " test");</script>

<script>
// 判断是否为DEV环境，可根据实际DEV域名调整判断规则
if (!window.location.href.includes('localhost') && !window.location.href.includes('dev.')) {
    // 动态创建并加载Google Analytics脚本
    const gaScript = document.createElement('script');
    gaScript.async = true;
    gaScript.src = "https://www.googletagmanager.com/gtag/js?id=<number>";
    document.head.appendChild(gaScript);

    // 初始化GA统计代码
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '<number>');
}
</script>

关键说明 #

• 环境判断规则：示例中通过检测URL是否包含localhost（本地开发地址）或dev.（DEV域名前缀）识别DEV环境，你可以根据实际的DEV域名调整判断条件，比如直接指定域名：window.location.hostname === 'dev.yourdomain.com'。
• 动态加载脚本：将原本的静态脚本标签改为JS动态创建，确保只有符合生产环境条件时才加载GA资源，减少DEV环境的不必要请求。
• 逻辑完整性：把GA的初始化代码也包裹在判断语句内，避免DEV环境下执行统计初始化逻辑。

备选写法（保留原脚本标签结构） #

如果不想用动态创建脚本的方式，也可以直接用条件判断控制初始化逻辑，同时通过DOM操作控制脚本加载：

<script>alert(window.location.href + " test");</script>

<!-- 预设GA脚本标签，默认不加载 -->
<script id="ga-script" async src="https://www.googletagmanager.com/gtag/js?id=<number>" style="display:none;"></script>

<script>
if (!window.location.href.includes('localhost') && !window.location.href.includes('dev.')) {
    document.getElementById('ga-script').removeAttribute('style'); // 触发脚本加载
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '<number>');
}
</script>

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