如何将谷歌分析连接到 Nuxt3 应用程序?

我有个问题。我尝试将我的 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:UsersszczuElektryknode_modules@nuxtjsgoogle-analyticslibplugin.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_moduleslodash.templateindex.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)

有谁知道如何解决它?

stack overflow How to connect google analytics to Nuxt3 app?
原文答案

答案:

作者头像

尝试将 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'
    }
  })
})
作者头像

迟到的回复,但我想为任何未来的观众添加。

上述解决方案仅在 $router 通过时对我有效。请在下面找到示例代码。

另请注意:

  • 正在使用的包, 'vue-gtag' 而不是 'vue-gtag-next'
  • 您必须为 config 包传递 property 对象而不是 'vue-gtag'

    
    import VueGtag from 'vue-gtag'

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

作者头像

找到这个解决方案 https://github.com/nuxt/framework/discussions/5702

.. 你也可以使用 nuxt.config 在应用级别提供 app.head.script 和 children 属性:

import { defineNuxtConfig } from "nuxt";
export default defineNuxtConfig({
  app: {
    head: {
      script: [{ children: 'console.log("test3");' }],
    },
  },
});