Svelte项目开发阶段如何禁用Google Analytics统计功能

方案1：条件加载GA资源（最彻底，推荐） #

你之前的方案未生效大概率是禁用配置执行时机晚于GA脚本加载，直接根据环境判断是否加载资源即可从根源避免开发环境产生统计数据：

• 先删除index.html中写死的GA静态脚本引入
• 调整main.js代码，按环境判断加载逻辑：

// SvelteKit 项目导入环境变量
import { dev } from '$app/environment';
// 普通 Vite + Svelte 项目替换为下行代码
// const dev = import.meta.env.DEV;

window.dataLayer = window.dataLayer || [];
function gtag () {
  window.dataLayer.push(arguments);
}

if (!dev) {
  // 生产环境动态加载GA脚本
  const gaScript = document.createElement('script');
  gaScript.async = true;
  gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
  document.head.appendChild(gaScript);

  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
} else {
  // 开发环境把gtag置为空函数，避免业务代码调用时报错
  window.gtag = () => {};
}

方案2：保留现有加载逻辑，用官方规则禁用 #

如果不想调整引入方式，只要调整禁用配置的执行顺序即可：
window['ga-disable-GA_MEASUREMENT_ID'] = true 规则要求必须在GA脚本加载之前执行才会生效，调整index.html代码顺序：

<!-- 禁用逻辑写在最前面 -->
<script>
  // 匹配本地开发域名，可根据需要增加127.0.0.1等其他本地域名
  if (window.location.hostname === 'localhost') {
    window['ga-disable-G-XXXXXXXXXX'] = true;
  }
</script>
<!-- 原有GA脚本放在禁用逻辑之后 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

这个方案会正常加载GA脚本，但不会上报任何统计数据。

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