如何将谷歌分析连接到 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

更新的答案：（使用谷歌标签管理器添加分析）

我会使用@gtm-support/vue-gtm

yarn add --dev @gtm-support/vue-gtm

创建一个plugins/vue-gtm.client.ts文件，内容如下：

import { createGtm } from '@gtm-support/vue-gtm'

export default defineNuxtPlugin((nuxtApp) => {
  if (useRuntimeConfig().public.appEnv !== 'production') return
  nuxtApp.vueApp.use(createGtm({
    id: 'GTM-??????',
    defer: false,
    compatibility: false,
    enabled: true,
    debug: true,
    loadScript: true,
    vueRouter: useRouter(),
    trackOnNextTick: false,
  }))
})