google-analytics - 如何将谷歌分析连接到 Nuxt3 应用程序？

Question

我有一个问题。我尝试将我的 Nuxt3 应用与 Google Analytics 连接。

现在我通过在 nuxt.config.ts 中添加下面的代码来做到这一点

export default defineNuxtConfig({
  buildModules: [
    '@nuxtjs/google-analytics'
  ],
  googleAnalytics: {
    id: process.env.GOOGLE_ANALYTICS_ID
  },
})

但不幸的是，当我尝试构建我的应用程序时出现以下错误

ERROR  Error compiling template:  {                                                                                                                                                                            17:53:04  
  ssr: false,
  src: 'C:\\Users\\szczu\\Elektryk\\node_modules\\@nuxtjs\\google-analytics\\lib\\plugin.js',
  fileName: 'google-analytics.js',
  options: {
    dev: true,
    debug: {
      sendHitTask: true
    },
    id: undefined
  },
  filename: 'google-analytics.js',
  dst: 'C:/Users/szczu/Elektryk/.nuxt/google-analytics.js'
}


 ERROR  serialize is not defined                                                                                                                                                                                17:53:04  

  at eval (eval at <anonymous> (node_modules\lodash.template\index.js:1550:12), <anonymous>:7:1)
  at compileTemplate (/C:/Users/szczu/Elektryk/node_modules/@nuxt/kit/dist/index.mjs:493:45)
  at async /C:/Users/szczu/Elektryk/node_modules/nuxt3/dist/chunks/index.mjs:1296:22
  at async Promise.all (index 11)
  at async generateApp (/C:/Users/szczu/Elektryk/node_modules/nuxt3/dist/chunks/index.mjs:1295:3)
  at async _applyPromised (/C:/Users/szczu/Elektryk/node_modules/perfect-debounce/dist/index.mjs:54:10)

有没有人知道如何修复它？

Answer 1

试试 vue-vtag-next打包成插件

yarn add --dev vue-gtag-next

创建插件文件plugins/vue-gtag.client.js

import VueGtag from 'vue-gtag-next'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGtag, {
    property: {
      id: 'GA_MEASUREMENT_ID'
    }
  })
})