CODEWITHSUNDEEP
google-analyticsnuxt.jsnuxt3.js
McGalaxy
McGalaxy

Reputation: 115

How to connect google analytics to Nuxt3 app?

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?

Upvotes: 5

Views: 13441

Answers (6)

ubershmekel
ubershmekel

Reputation: 12798

The nuxt 3 way to put arbitrary scripts into the head seems to be this. Inside server/plugins/my-plugin.ts

export default defineNitroPlugin((nitroApp) => {
    nitroApp.hooks.hook('render:html', (html) => {
        html.head.push(`<!-- Google tag (gtag.js) -->
      <script async src="https://www.googletagmanager.com/gtag/js?id=G-YOURCODE"></script>
      <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
    
        gtag('config', 'G-YOURCODE');
      </script>`)
    })
})

I found an explanation on this at https://github.com/nuxt/nuxt/issues/14195#issuecomment-1462590106 and this docs page kind of explains how to use it

Upvotes: 3

acidjazz
acidjazz

Reputation: 1314

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

Upvotes: 7

Alexander Kim
Alexander Kim

Reputation: 18392

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.

Upvotes: 0

Vladislav Tomasciuc
Vladislav Tomasciuc

Reputation: 1

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

Upvotes: 0

person13
person13

Reputation: 171

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");' }],
    },
  },
});

Upvotes: 0

aharen
aharen

Reputation: 627

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

Upvotes: 3

Related Questions