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

Question

Hey i've built a Nuxt app and am having trouble with the package @nuxtjs/google-tag-manager package. Found below. The documentation is pretty light and I haven't found many example implementations out there. In my nuxt.config.js I have the following set.

['@nuxtjs/google-tag-manager', {
  id: process.env.GTM_ID,
  layer: 'dataLayer',
  pageTracking: true
}],

..but unfortunately am not getting any Page Views in Google Tag Manager

Does anyone have any ideas or experience in how to best implement GTM or what has worked for them?

Thanks in advance

Answer 1

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:

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.

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".

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