如何在Vue.js应用中添加Google Global Site Tag（gtag.js）脚本？

方法一：利用 Vue Teleport 直接注入（适配你的现有代码） #

你当前用了Teleport到head，直接在Teleport里添加gtag脚本是可行的，不需要额外依赖。调整你的app.vue（Pug语法）：

template(lang="pug")
  teleport(to="head")
    meta
    //- 添加Google Analytics脚本
    script(async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID")
    script.
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'GA_TRACKING_ID');
  .app
    .app__view
      router-view

注意把GA_TRACKING_ID替换成你的实际统计ID。这种方式会把脚本渲染到页面的head标签里，属于Vue原生支持的方式，无需额外安装依赖。

方法二：直接修改项目的 index.html（更简单） #

如果你的项目是Vue CLI或Vite创建的，直接在public/index.html（Vue CLI）或根目录下的index.html（Vite）的head标签里添加gtag脚本即可，这是最直接的实现方式：

<head>
  <!-- 其他head内容 -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_TRACKING_ID');
  </script>
</head>

这种方式不需要修改Vue组件，适合不需要动态控制脚本加载的场景，生产环境直接生效。

方法三：封装成Vue插件（适合动态控制场景） #

如果需要根据环境（比如仅生产环境加载）或路由变化发送页面浏览事件，可以封装成Vue插件：

1. 在项目中新建plugins/ga.js文件：

export default {
  install(app) {
    // 仅在生产环境加载脚本
    if (process.env.NODE_ENV === 'production') {
      const script = document.createElement('script');
      script.async = true;
      script.src = 'https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID';
      document.head.appendChild(script);

      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'GA_TRACKING_ID');

      // 监听路由变化，自动上报页面浏览事件
      app.config.globalProperties.$router.afterEach((to) => {
        gtag('config', 'GA_TRACKING_ID', {
          page_path: to.fullPath
        });
      });
    }
  }
}

2. 在main.js中引入并使用插件：

import { createApp } from 'vue'
import App from './App.vue'
import gaPlugin from './plugins/ga'

const app = createApp(App)
app.use(gaPlugin)
app.mount('#app')

验证脚本是否生效 #

添加完成后，可通过以下方式验证：

• 打开浏览器开发者工具的「Network」面板，刷新页面，查看是否成功加载gtag/js?id=GA_TRACKING_ID资源
• 在「Console」面板输入window.dataLayer，若返回包含初始化事件的数组，说明脚本加载成功
• 登录Google Analytics后台，等待数分钟后查看是否有数据上报

内容的提问来源于stack exchange，提问作者eşelk eşekll