nuxt-community / gtm-module Goto Github PK

Hello – and thanks for the great addition to Nuxt community 🙌

It's my first time using Google Tag Manager and I am still a little confused.

Just to confirm... On GTM Dashboard, I have to trigger the tag on Page View and History Change, right?

(The first to load the tag when page is loaded and the second to load when a route changes)

More detail : nuxt/nuxt#6366

Does it have kind of "body=true" mode?

hello there,
i found #gtm-script and noscript appended injection issue.

this issue is nuxt start when production mode and page refresh
(or someone are viewing every single pages)

gtm-script

noscript

Note: This is disabled by default to prevent double events when using alongside with Google Analytics so take care before enabling this option

I can't understand this note on the docs, what is it warning us against?

It means we should take care when using google analytics (GA) as a tag on GTM, if so what tag specifically? Any GA one? If not, is it for using google analytics and GTM duplicated? But this is warned on the official documentation for GTM as well isn't it? This note is referring to this?

Are we talking about the Page View tracking on GA?

I'm just... so confused by this note 🤯

I'm running into a 'push' is not a function error with the default options.

Setting variables to [] in nuxt.config.js fixed the issue for me. Should variables be [] by default instead of {}? Or is this an error with our GTM setup? Thank you!

In readme it says, that events gets stored, and after $gtm.init() all remembered events will be send. I am also using automated page visiting. When I run $gtm.init(), amount of collected routing events is correct, but the events are all the same - the last visited/current page. I will troubleshoot it later.

I also catched - automated page visiting events fetches correct URL, but wrong page title. I am using nuxt head section on every page to update title.

Nuxt is running in universal mode

Hi.
When using the noscript option(enabled by default), the google tag manager noscript is added in the document, just after the tag. It looks like this:

<noscript data-n-head="ssr" data-hid="gtm-noscript" data-pbody-"true"> "<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KTVSB4D&a=a&b=b" height="0" width="0" style="display:none;visibility:hidden" title="gtm"></iframe>" </noscript>

instead of:

<noscript data-n-head="ssr" data-hid="gtm-noscript" data-pbody-"true"> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KTVSB4D&a=a&b=b" height="0" width="0" style="display:none;visibility:hidden" title="gtm"></iframe> </noscript>

Is this normal ? Or is the iframe correctly displayed despite the quotes?

Hello, First thanks for this new module.
I need your help to implement the module inside a multiTlds structure.
For example i have 4 tlds example.fr, example.be, example.mc and example.ma
I'm using nuxt-i18n to handle translations for these domains. i cand find where can i configure gtm-module to handle my 4 domains.
If it's possible to define the container ID (gtm id) in an external file and import it on page reload it will resolve my problem.

Hey,

is there any way to support

https://support.google.com/tagmanager/answer/6311518?hl=fr

With this plugin? it changes a bit the import script

Thanks

Hi there.
i found to error to head property is function in nuxt.config.js

my nuxt.config.js ex

error message

Why can't we use the GTM_ID as an env variable on start?

nuxt.config.js

modules: [
    [
      'nuxt-env',
      {
        keys: ['GTM_ID']
      }
    ]
],
gtm: {
  id: process.env.GTM_ID
},

GTM_ID=xxxx nuxt start

The GTM ID is not loaded

Is it possible to have this track multiple IDs?

And can these IDs come from the store? They get set in our CMS and fetched using Apollo on serverInit.

Hi!
Can anyone help me?, I need disable gtm in case someone reject analytics cookie, I have autoinit = false and $gtm.init('GTM-XXXXXXX') when accept cookie, but in case of accepting it and then rejecting the cookie 😕 , I try gtm.init(' ') but isnt work.

Thanks in advance! 😊 😊

Hello,

The basic setup of the gtm-module plugin allows us only tracking pages after load (ssr).
When we go on internal nuxtjs routing, pages aren't tracking by Google Analytics. Same with all other events. I spent a lot of time on searching solutions.

So I suggest extend documentation about configuration trigger in Google Tag Manager panel.

Here I found the best answer to configurate properly events under gtm-module plugin.
https://stackoverflow.com/a/52885317

I hope this helps other.

We would like to be able to add options on the fly, such as determining the id at the client-side execution time.

  ctx.$gtm = {
    init(options) {
      if (!initalized && window.$initGTM) {
        window.$initGTM(options)
      }
      initalized = true
    },
  // ...
  };

HI,

Does anyone know about this? It is a bug or I've done something wrong?

It is happening when I try to build the app.

at ModuleContainer.gtmModule (node_modules/@nuxtjs/gtm/lib/module.js:93:32)
at ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:235:34)
at node_modules/@nuxt/utils/dist/utils.js:1846:43
at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:55:5)
at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:715:5)

Thank you!

Triggering tags has a delay, that may impact data gathering (especially first load call). I have found this peace of code:

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

And I do understand why setTimeout(250) is here, because of DOM re-rendering delay. As soon as I set it to 0, gtm pushes a title of a previous page instead of a current one. Is there more reliable way of catching it?

module.exports = {
    ...
    gtm: {
      id: NUXT_APP_GTM
    },
    modules: [
      [
        'nuxt-env',
        {
          keys: [
            {
              key: 'NUXT_APP_GTM',
              default: 'GTM-XXXXXXX'
            },
          ]
        }
      ]
    ]
    ...
  }

is there a way to access the nuxt-env env variables for example something like :

    gtm: {
      id: NUXT_APP_GTM 
    }

or

    gtm: {
      id: this.$env.NUXT_APP_GTM 
    }

NOT process.env.NUXT_APP_GTM

Hi there

I need to add Google Adword Tracking stuff to a site.
So far I have a Google Tag Manager implemented. (ID: GTM...)

I now should add another code (the AW-CONVERSION_ID)
which is described here:
https://support.google.com/google-ads/answer/7548399?hl=en

I would need to add the conversion ID to the global site tag,
Is there a way to do this with this gtm-module?

== EDIT: ====

Is this line:

responsible for doing this:
function gtag(){dataLayer.push(arguments);} in the standard way of integration the google scripts?

And if so where is this part

    gtag('js', new Date());

    gtag('config', 'GA_TRACKING_ID');
    gtag('config', 'AW-CONVERSION_ID');

hidden?
So where is the gtm-module actually configuring the GA_TRACKING_ID?
I would assume that there I should be able to set another google tag (AW-CONVERSION_ID)
...

Help is much appreciated

In spa mode, click to switch page Google Analytics (analysis) can not track the page view, only when re-refresh the page, will be tracked by ga

Warning should not be trigged when id is falsy and autoInit is false

linked with #4

// Don't include when no GTM id is given
  if (!options.id) {
    // eslint-disable-next-line no-console
    console.warn('[@nuxtjs/gtm] Disabling module because no id is provided!')
    return
  }

Hi there,

Is it possible to have multiple containers. Currently it seems to have only one...

Let me know and when this will be implemented.

Best,
Rein

If I watch the network console when I fire this code - nothing happens:
'''
this.$gtm.push({ event: 'apply', slug: this.slug })
'''
It looks like push isn't sending data to GTM

• Support calling $gtm.init during SSR (inspired by #1)
• (to check possibility / points) Support pushing events or setting args per request

The current module mode only runs in build, this forces the ID used in build time, even if you replace on runtime.

In order to allow usage of runtimeConfig (#52), the module should be runtime, as noticed in #53 (review)

The duplicate GTM History Change event issue happens when the target url is a url-encoded string. It can be reliably reproduced in a new Nuxt app (SPA mode). It might relates to another Open Issue (#3).

Hi folks!
Can anyone help me avoiding a duplicate pageView being generated on the first page load? I have the pageTracking setting enabled, since I need to track pageViews in every route change. If I don't enable I don't get any pageviews so I suppose I need it.

However on the very first page load (or if I do a hard refresh) I always get two duplicate pageviews instead of one.

My site is running on Universal mode by the way.

Can anyone help me out?

Thanks in advance!

With ec85699 the mocked instance is logging all navigation events. While I appreciate the mocked instance, I don't really want to see the logs in development. Maybe that should be controlled by a new debug option?

I just moved from the previous google-tag-manager nuxt plugin to this one and stumbled on a significant problem:
In development mode I don't intend to use the gtm plugin, so I load it with a bogus ID (GTM-XXXXX). This is causing me a lot of problems in the moment I try to trigger custom events where the plugin breaks the whole application, with the error:

TypeError: "this.$gtm is undefined"

is there a solution to this that doesn't mean to fence all calls with a check if $gtm is defined?

[edit] this is not happening with the old module

Single quotes inside function declaration can't be compiled when parameter (id) defined as function.
Double quotes work fine.

I'm mainly using this for analytics stuff. Usually Analytics tracks the page title along with the url.

Anyway the page title can be pushed to the nuxtRoute data layer object on route change? This way I could simply set up a variable for it in GTM

I am using nuxt with the gtm module:

// nuxt.config.js

...
 buildModules: [
    '@nuxtjs/gtm',
  ],
  gtm: {
     id: 'GTM-XXXXXXX',
     respectDoNotTrack: false,
     pageTracking: true,
  },
...

But I get this:
(also on production)

What am I missing?
(I added the respectDoNotTrack and pageTracking just to see if that helps showing something in my tag assistant...)

Also the network tab is not showing any request being made to gtm.js...

Thanks for any help...

Hi, is there a way to add dns-prefetch to GTM ? I want to increase web speed
example:
link rel="dns-prefetch" href="https://www.googletagmanager.com/"
link href="https://www.googletagmanager.com/gtag/js?id=myappid" rel="preload" as="script"

my nuxt project has many independence layout with GTM, so how can i use this?

Hi all,

In my nuxt TS project i cant access the $gtm variable.
Do i need to declare it in index.d.ts?
If so, can anybody give me an hint to make it happen in TS?

Thank you

Hey, is anyone else experiencing this?

Seems to happen throughout the site, would love to know a fix or possible workaround

ReferenceError: Can't find variable: jQuery
  at global code(/test/login:2:7)
  at insertBefore([native code])
  at ? (/gtm.js:1432:426)
  at c(/gtm.js:1434:152)
  at Cb(/gtm.js:1285:397)
  at e(/gtm.js:1314:140)
  at ? (/gtm.js:1275:115)
  at ? (/gtm.js:1315:230)
  at ? (/gtm.js:1314:473)
  at nf(/gtm.js:1315:520)
  at pf(/gtm.js:1317:229)
  at hj(/gtm.js:1360:189)
  at gj(/gtm.js:1360:3)
  at ij(/gtm.js:1362:359)
  at push(/gtm.js:1365:97)
  at ? (/gtm.js:1364:153)
  at r(/yaan/_nuxt/96e368a391d3c00e7099.js:2:530466)

Please provide a more detailed example of how to manually int GTM when consent has been given.

I am using version 2.3.0 with Nuxt 2.13.3 - I am using a Head function in nuxt.config.js

Googling reveals that a PR was merged to fix notify users of this exact issue #14

[@nuxtjs/gtm] head is provided as a function which is not supported by this module at the moment. Removing user-provided head.

Will this issue be fixed?

In order to attend 12factor, the module should use the new runtimeConfig feature.

Which would also solve some open issues #26 #28 #30

I am using nuxt with the gtm module:

// nuxt.config.js

...
 buildModules: [
    '@nuxtjs/gtm',
  ],
  gtm: {
     id: 'GTM-XXXXXXX',
     respectDoNotTrack: false,
     pageTracking: true,
  },
...

But I get this:
(also on production)

What am I missing?
(I added the respectDoNotTrack and pageTracking just to see if that helps showing something in my tag assistant...)

Also the network tab is not showing any request being made to gtm.js...

Thanks for any help...

Hello,
I need to exclude some paths from gtm but can't see an option related to this. I think it's not implemented yet, or if it's implemented can you help me to sort it out ?

Hey, as I said in title, how can I use this solution:

https://developers.google.com/tag-manager/web/csp

It needs to add nonce attribute to script tag, then GTM is propagating this nonce for every external script for my CSP to not block it.

IMHO, v2.3.0 introduces break changes, because now you need to set enabled: true explicitly if you want a "real" push in dev mode. For this reason, maybe should be v3.0.0.

It's also possible that I have not understood this feature... 😅

Hey everyone, improved page speed on a project today but one issue seems to be difficult to solve. I'm using the awesome nuxt GTM module and loading it like this from nuxt.config.js:

gtm: {
    id: '<my-ID>',
    pageTracking: true
  }

Google Pagespeed Insights tells me under "Remove unused JavaScript" the following items:

/gtm.js?id=<my-ID>(www.googletagmanager.com) | 26.2 KB | 12.5 KB
/analytics.js(www.google-analytics.com) | 18.6 KB | 6.7 KB

Is this caused by gtm module (which I don't think) or by GTM / Analytics / Pagespeed Insights itself?

Maybe you can help me, thank you very much in advance and I really appreciate it!

I'd like to add this parameter to the script url via setting it from the .env module is this possible?

Hi. If you try to run the nuxt application in SPA mode and open the page, you will get a double GTM submission. You can also see two identical scripts in head. The same thing happens when generating applications in the SPA mode.

• Hey, our website compiles Nuxt into a single build artefact which is pushed to many environments (quite a lot of them).
• Each environment has different GTM variables which go into the query string.
• Using the new runtime config options; I can use a GTM ID configured at runtime; but we would also like to be able to reconfigure the variables at runtime too.
• It looks like this is compile time only at the moment: https://github.com/nuxt-community/gtm-module/blob/master/lib/module.js#L65

I intended to contribute a fix, but I am not sure how to move these options over to runtime config unfortunately, is this something support could be added for?

This is essentially what we want to achieve

It might be a non-issue from GA's perspective but reporting it anyway to asses that.

1. Set Nuxt options:

router: {
  base: '/base/',
  trailingSlash: false,
}

2. Visit root page http://localhost:3000/base
3. Have a look at nuxtRoute event in window.dataLayer

Expected:
The pageUrl should, in theory, be /base

Actual:
The pageUrl is /base/

So the path reported doesn't match the actual path due to extra trailing slash. That might or might not be a problem for GA. Another case to consider is when router.base is not set. Then the route page actually has / path because browsers are automatically adding it (even if they are not showing it in the UI) and that's probably just fine as then the URL will match. So the only issue seems to be with index route and router.base set.

@manniL fyi