如何配置vue-gtag让Google Analytics GA4识别Nuxt.js站点？

可能的问题及对应修复方案 #

• 插件未指定客户端执行模式
  vue-gtag依赖浏览器全局对象，默认配置下Nuxt插件会在服务端和客户端各执行一次，服务端执行时会触发异常导致客户端初始化失败。修改nuxt.config.js的插件配置：

  plugins: [
    ...
    { src: '~/plugins/vue-gtag', mode: 'client' },
    ...
  ]
  

• 客户端无法读取Netlify环境变量
  Nuxt 2默认只会将带NUXT_ENV_前缀的环境变量注入到客户端运行环境，你当前使用的process.env.GTAG仅能在服务端获取到，客户端拿到的是undefined。有两种修复方式：
  1. 将Netlify中的环境变量名改为NUXT_ENV_GTAG，代码中替换为process.env.NUXT_ENV_GTAG
  2. 在nuxt.config.js中新增env配置项主动导出变量：

  export default {
    env: {
      GTAG: process.env.GTAG
    },
    // 其余原有配置保持不变
  }
  

• 配置参数冲突
  pageTrackerScreenviewEnabled参数用于APP场景的屏幕浏览事件上报，web场景开启该参数会导致默认页面事件上报失败，可先关闭该参数测试：

  // /plugins/vue-gtag.js中修改配置
  {
    config: { id: process.env.GTAG },
    appName: 'SleepRescue',
    bootstrap: true,
    enabled: true,
    // 注释或删除该行配置
    // pageTrackerScreenviewEnabled: true,
  }
  

• 访问拦截类问题
  打开浏览器开发者工具的网络面板，过滤www.googletagmanager.com的请求，排查两类异常：
  1. 请求被广告拦截插件拦截：暂时关闭拦截插件重新测试
  2. 被站点CSP（内容安全策略）拦截：在CSP配置中添加gtag相关域名的访问白名单

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