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

Answer 2

回复晚了，但我想为任何未来的观众补充。

上述解决方案仅在

$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)
})

Answer 3

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

.. 你也可以使用 nuxt.config 在应用程序级别提供带有 children 属性的 app.head.script：

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

Answer 4

import VueGtag from 'vue-gtag-next'

export default defineNuxtPlugin(async (nuxtApp) => {
  const { data: { value: {google_id, google_sv, yandex_id, privacy_policy} } } = await useMyApi("/api/main/site-metriks/"); 

  nuxtApp.vueApp.use(VueGtag, {
    property: {
      id: google_id
    }
  })
})

Answer 5

对于 Nuxt 3：

1. 安装vue-gtm：

   npm i @gtm-support/vue-gtm

2. 在 /plugins/vue-gtm.client.ts 中创建文件

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(createGtm({
    id: 'GTM-ID',
    defer: false, // Script can be set to `defer` to speed up page load at the cost of less accurate results (in case visitor leaves before script is loaded, which is unlikely but possible). Defaults to false, so the script is loaded `async` by default
    compatibility: false, // Will add `async` and `defer` to the script tag to not block requests for old browsers that do not support `async`
    nonce: '2726c7f26c', // Will add `nonce` to the script tag
    enabled: true, // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
    debug: true, // Whether or not display console logs debugs (optional)
    loadScript: true, // Whether or not to load the GTM Script (Helpful if you are including GTM manually, but need the dataLayer functionality in your components) (optional)
    vueRouter: useRouter(), // Pass the router instance to automatically sync with router (optional)
    //ignoredViews: ['homepage'], // Don't trigger events for specified router names (optional)
    trackOnNextTick: false, // Whether or not call trackView in Vue.nextTick
  }))
})

Nuxt 会自动选择这个插件，你就完成了。