Can anyone help implementing Nuxt.js Google Tag Manager? Can anyone help implementing Nuxt.js Google Tag Manager? vue.js vue.js

Can anyone help implementing Nuxt.js Google Tag Manager?


I had a look at the package, inside modules/packages/google-tag-manager/plugin.js there is this piece of code:

window['<%= options.layer %>'].push(to.gtm || { event: 'nuxtRoute', pageType: 'PageView', pageUrl: to.fullPath, routeName: to.name })

From that, it looks like the datalayer looks like this:

{event: 'nuxtRoute',pageType: 'PageView',pageURL: to.fullPath,routeName: to.name}

Thus in GTM, you'll get to define a custom event trigger to trigger on the "nuxtRoute' event. Like so:enter image description here

Then you want to create two DataLayer variables in GTM that will capture pageURL and possibly routeName, I say routeName is optional depends on if you're changing/updating the of the document or not.enter image description here

Then create your Google Analytics tag in GTM. Make sure it is the "pageview" type, then check the "enable overriding settings in this tag" checkbox, under "more settings > fields to set" type in "page" for fieldname and for "value" reference that variable we created. If you want to set the page title using the to.name variable just use the "title" field. Make sure you add the nuxt route trigger as well under "triggering".enter image description here

Save and publish everything or run it in preview mode and you should see the pageviews some through.