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

Solution

I had a look at the package, inside https://github.com/nuxt-community/gtm-module/blob/master/lib/defaults.js there is this piece of code:

function startPageTracking(ctx) {
  ctx.app.router.afterEach((to) => {
    setTimeout(() => {
      ctx.$gtm.push(to.gtm || {
        routeName: to.name,
        pageType: 'PageView',
        pageUrl: '<%= options.routerBase %>' + to.fullPath,
        pageTitle: (typeof document !== 'undefined' && document.title) || '',
        event: '<%= options.pageViewEventName %>'
      })
    }, 250)
  })
}

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

{
routeName: to.name,
pageType: 'PageView',
pageUrl: '<%= options.routerBase %>' + to.fullPath,
pageTitle: (typeof document !== 'undefined' && document.title) || '',
event: '<%= options.pageViewEventName %>' //default is 'nuxtRoute'
}

The default name for the event is 'nuxtRoute'. 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(Please note the camel case) 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.

Comments

[RuNpiXelruN]

Thanks for the detailed reply @XTOTHEL, I really appreciate you taking the time to put this together. The marketing team i'm working with were wanting to setup the trigger a s a 'Page View' rather than a custom event though, and currently page views aren't coming through. There has to be a way!

[XTOTHEL]

When you set it up as instructed. It will come through as a page view. The events in the data layer is just the triggering event for the pageview.

[XTOTHEL]

The data layer events are not the same as events in GA.

[RuNpiXelruN]

Is there a way that the trigger could be the page view event rather than a custom event? Sorry for all the questions, just trying to get my head around it all!

[XTOTHEL]

Because you’re using vue, I’m assuming this is in a SPA, in a SPA the only time there is a “pageview” the the traditional sense is when the app is loaded. That’s why you’re using nuxt, it provides a “event” to signal to GTM when your routing in the SPA that there is a new “screen” view. GTM then takes that screen view event, take in the data layer variables around the URL, title, etc and send that data to GA.

[Eike Pierstorff]

Xhothel's answer is spot on, it's just that you seem not fully aware of the difference between GTM events and GA events. The above will show up as a page view in Analytics. The trigger type is irrelevant to the tracking data - as long as the Analytics tag says "pageview" you will get a (virtual) pageview in GA, no matter which GTM event triggered it.

[mystrdat]

It seems GA tracks the correct pageURL even without the custom variable, setting the trigger to nuxtRoute might be enough.

[Philipp S.]

Why is this not documented within the nuxt google-tag-manager module? Is there an other way which we can use without creating a new trigger in google-tag-manager?

[XTOTHEL]

@PhilippS. this is documented on the first page under "Router Integration". Might've not been there before.

[Philipp S.]

@XTOTHEL: What do you exactly mean? What is documented there? How to implement this without creating a custom trigger in google-tag-manager?

[Philipp S.]

On the first load I see two pageviews triggered. 1) First is coming from the plugin and the second coming from the custom trigger which you have described.

[XTOTHEL]

@PhilippS. I meant it is documented for the nuxt GTM plugin that you need to create the trigger, maybe it isn’t explicit, but since they documented what the event name sent to the data layer, it was understood to me that a trigger needs to be created.

[Mads Hjorth]

I followed this method, and it works flawlessly. However, I noticed that my Google Ads are not keeping up. I have Bounce rate flying through the roof. I noticed through Hotjar, that my users are in fact not bouncing. My question is now, how do I set this up to also work with Google Ads?

[Skoua]

If you're using @nuxtjs/gtm, the pageURL parameter is now named pageUrl !