Vue3 TypeScript Quasar应用配置GA4及vue-gtag求助

安全阿岳

2026-6-23

在Vue3 + Quasar + TypeScript项目中配置GA4（使用vue-gtag）的完整步骤

1. 安装正确的依赖包

Vue3需使用适配版本的vue-gtag-next，同时安装TypeScript类型声明：

npm install vue-gtag-next @types/vue-gtag-next --save
# 或用yarn
yarn add vue-gtag-next @types/vue-gtag-next

2. 创建并配置Quasar Boot文件

执行Quasar的boot文件生成命令：

quasar new boot gtag

打开生成的src/boot/gtag.ts，替换为以下TypeScript代码：

import { boot } from 'quasar/wrappers'
import { createGtag } from 'vue-gtag-next'
import { Router } from 'vue-router'

export default boot(({ app, router }) => {
  app.use(createGtag({
    property: {
      id: 'G-YOUR_GA4_MEASUREMENT_ID' // 替换为你的GA4测量ID
    },
    // 启用路由自动追踪页面浏览事件
    router: router as Router
  }))
})

3. 在Quasar配置中启用该Boot文件

打开quasar.config.ts，找到boot数组，添加'gtag'：

export default configure(function (/* ctx */) {
  return {
    // ...其他配置项
    boot: [
      // ...已存在的boot文件
      'gtag'
    ],
    // ...其他配置项
  }
})

4. 手动触发自定义事件（可选）

在组件中可通过useGtag钩子发送自定义事件，比如按钮点击：

import { useGtag } from 'vue-gtag-next'

const { event } = useGtag()

const handleButtonClick = () => {
  event('button_click', {
    button_name: 'submit_form',
    category: 'user_interaction'
  })
}