2

I have a problem. I try to connect my Nuxt3 app with Google Analytics.

right now I do it by adding to nuxt.config.ts following code

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

but unfortunately I get following error when I try to build my app

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)

Does anyone have an idea how to fix it?

1
  • It seems that the plugin is compatible only with the Nuxt2 version; no chance to run it against Nuxt3 so far.
    – aherok
    Jun 12, 2022 at 21:21

5 Answers 5

6

UPDATED ANSWER: (use google tag manager to add analytics)

I would use @gtm-support/vue-gtm

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

create a plugins/vue-gtm.client.ts file with something like:

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,
  }))
})
3
3

Late reply, but i would like to add for any future viewers.

The above solution only worked for me when the $router was passed. Please find below sample code.

Please also note:

  • The package being used, 'vue-gtag' instead of 'vue-gtag-next'.
  • You have to pass config object instead of property for the 'vue-gtag' package
import VueGtag from 'vue-gtag'

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueGtag, {
        config: {
            id: 'GA_MEASUREMENT_ID',
        },
    }, nuxtApp.$router)
})
3
  • Using this method, how can we trigger events? $gtag is undefined in my vue files Dec 27, 2022 at 10:05
  • Sorry, I’m not sure i understand. Could you please elaborate?
    – aharen
    Dec 28, 2022 at 11:24
  • 1
    none of this is in any documentation anywhere, and also this suggestion doesn't work, using the latest everything, barebones new project. I don't think this module is ready at this point in time.
    – dapug
    Jan 27 at 18:59
0

found this solution https://github.com/nuxt/framework/discussions/5702

.. And also you may use nuxt.config to provide app.head.script with children attribute on the app level:

import { defineNuxtConfig } from "nuxt";
export default defineNuxtConfig({
  app: {
    head: {
      script: [{ children: 'console.log("test3");' }],
    },
  },
});
1
  • The link is broken.
    – xperator
    Mar 13 at 9:22
0

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

0

For Nuxt 3:

  1. Install vue-gtm: npm i @gtm-support/vue-gtm
  2. Create file in /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 would automatically pick up this plugin and you're done.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.