Nuxt 2 compatibility

[UcheAzubuko]

Environment

Local

Reproduction

In Nuxt config:

gtag: {
  id: "AW-***************",
  initialConsent: false,

  config: {
    page_title: "********",
    pageTrackerScreenviewEnabled: true,
  },
},

modules: [
  "nuxt-gtag",
],

In Vue File (Nuxt):

const { gtag } = useGtag();

gtag("event", "conversion", {
send_to: "AW-****************/FdYvCL6qm90YEMW-v_wp",
});

Describe the bug

Error when using the nuxt-gtag. Error is - ReferenceError: useGtag is not defined

Please, how can I use the plugin successfully? I keep getting the error.

Additional context

This is a Nuxt project. With the following version numbers:

"nuxt": "^2.15.8",
"vue": "^2.6.14",

"nuxt-gtag": "^1.1.0"

Logs

This is the long when I attempt to mount on the page where I import and use useGtag():

client.js:103 ReferenceError: useGtag is not defined
    at eval (completed-form.vue:8:1)
    at ./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/string-replace-loader/index.js?!./pages/contact/completed-form.vue?vue&type=script&lang=js& (completed-form.js:22:1)
    at __webpack_require__ (runtime.js:854:30)
    at fn (runtime.js:151:20)
    at eval (completed-form.vue:1:1)
    at ./pages/contact/completed-form.vue?vue&type=script&lang=js& (completed-form.js:80:1)
    at __webpack_require__ (runtime.js:854:30)
    at fn (runtime.js:151:20)
    at eval (completed-form.vue:1:1)
    at ./pages/contact/completed-form.vue (completed-form.js:68:1)

[johannschopplich]

This module is made for Nuxt 3.

For Nuxt 2, you can use google-analytics-module.

[fws-miroslav]

Please, add "Nuxt 3" requirement somewhere on homepage. Just wasted some time trying to figure out why this module doesn't work in my project.

[johannschopplich]

Sorry to hear that you ran into the trouble. Generally speaking, you can check compatibility in the Nuxt modules table. I will keep the description as-is. On December 31st, 2023, Vue 2 will reach End of Life (EOL), and Nuxt 2 will follow on June 30th, 2024. Not much time left. I already consider Nuxt 3 the “standard” and intend to keep it that way. 🙂

[andreLuis1506]

if anyone needs a library for gtag in nuxt 2, I recommend adding the script link "src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX" in the head of nuxt.config.js and then create middleware with the code:

    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-XXXXXX');

And create some event in middleware gtag('event', 'event_name', {...option})

That way you don't need any libs. The nuxt 2 ones are outdated and don't work.

[Coinhexa]

This module is made for Nuxt 3.

For Nuxt 2, you can use google-analytics-module.

Well that's unfortunate indeed because google-analytics-module is using Universal analytics under the hood it seems and Google is going to shut it down soon. The alternative vue-gtag listed in the thread doesn't work on SSR effectively leaving 0 libraries for Nuxt 2 users who haven't migrated yet