Support on GTM and Google analytics configuration

[ghisleouf]

Hi here,

first of all, thank you for this great initiative.

I have some question about the module configuration and the way it works.

I have setup partytown on our Nuxt website which is supposed to integrate Google Tag Manager where Google analytics has been configured to trigger page_view event on every page view :)

I've tested gtm config on a basic web with standard and default GTM configuration ... it works as expected on the test page (which is totally different from our nuxt website).

Now, on our Nuxt website, we are trying to achieve the same thing with Partytown.

So, Partytown in setup like that:

  app: {
    head: {
      script: [
        process.env.GTM_ID
          ? {
              src: `https://www.googletagmanager.com/gtag/js?id=${process.env.GTM_ID}`,
              async: true,
              type: 'text/partytown',
            }
          : undefined,
      ],
      link: [],
    },
  },

...

  partytown: {
    debug: true,
    forward: ['dataLayer.push'],
  },

I can see that the script is injected on the build website (we are using SSR):

and finally:

It seems that GTM is loaded ... but there no trace (in request) of any Google Analytics request or call. I have no error anywhere (as far as I can see). In Google Anlaytics, I cannot see any view.

I think I'm misunderstanding something (in the scrip calls or in the config). Could you please tell me what I'm missin or doing wrong?

Thanks a lot for your help.

Best!

[DurandSacha]

I also see this problem, and issue 104 of this same project did not help me any more.

 script: [
          {
            src: `https://www.googletagmanager.com/gtag/js?id=MY-ID-HERE`,
            async: true,
            type: 'text/partytown'
          },
          {
            children: `
              window.dataLayer = window.dataLayer || [];
              window.gtag = function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', 'MY-ID-HERE');
            `
          },
  ]

[ghisleouf]

Hi @DurandSacha ,

Is it working on your side when applying your shared configuration? On my side, I cannot see any google analytics firing with it, neither in GA console.

[DurandSacha]

The configuration given above is an example of a configuration that does not work, however, I modified the configuration until I got something that worked:

      script: [
        {
          key: 'GTM',
          innerHTML: `
            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtag/js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','${GTAG_ID}');
          `,
          type: 'text/partytown',
        },
        {
          key: 'GTAG-CONFIG',
          innerHTML: `
          ((w) => {
            w.dataLayer = w.dataLayer || [];
            w.gtag = function gtag(){w.dataLayer.push(arguments);};
            w.gtag('js', new Date());
            w.gtag('config', '${GTAG_ID}');
            })(window);
          `,
          type: 'text/partytown',
        },
      ],
      noscript: [
        {
          tagPosition: 'bodyOpen',
          innerHTML: `<iframe src="https://www.googletagmanager.com/gtag/js?id=${GTAG_ID}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
        },
      ],

${GTAG_ID} is a variable in my case.

[ghisleouf]

Hi there,

Sorry for my late reply but here is the config that works:

app: {
    head: {
      script: [
        process.env.GTM_ID
          ? {
              src: `https://www.googletagmanager.com/gtag/js?id=${process.env.GTM_ID}`,
              type: 'text/partytown',
            }
          : undefined,
        process.env.GTM_ID
          ? {
              type: 'text/partytown',
              children: `
                      window.dataLayer = window.dataLayer || [];
                      window.gtag = function gtag(){dataLayer.push(arguments);}
                      gtag('js', new Date());
                      gtag('config', '${process.env.GTM_ID}');
                    `,
            }
          : undefined,
      ],
      link: [],
    },
  },

Actually, we were missing type: 'text/partytown', on the second script declaration.

Thanks for your help.