GTM with partytown does not work

[exophunk]

I'm trying to use Google Tag Manager with Partytown and Nuxt 3.

• It works when I disable Partytown, so GTM + GA is configured correctly. I see all event and stuff pop up
• Nothing happens when I enable Partytown. No Events in GTM, nothing in GA, dataLayer empty

nuxt.config.js

import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
    modules: [
        '@nuxtjs/partytown',
    ],

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

    app: {
        head: {
            script: [
                {
                    children: `
                        (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/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                        })(window,document,'script','dataLayer','GTM-XXXXXX');
                    `,
                    type: 'text/partytown',
                },
            ],
        },
    },
});

I then use window.dataLayer.push({ event: 'pageView' }) --> nothing happens I see that partytown correctly adds the scripts with text/partytown-x to head

I've tried another head implementation:

script: [
    {
        children: `
            window.dataLayer = window.dataLayer || [];
        `,
    },
    {
        src: 'https://www.googletagmanager.com/gtm.js?id=GTM-P6KLMD5',
        async: true,
        type: 'text/partytown',

    },
],

Both versions work, as long as I disable text/partytown. As soon as I enable partytown, It seems nothing is happening at all. I know that the GTM Debugger seems not to work with Partytown, but I don't see anything happen, also not in GA.

I've set things up according to this docs and your readme (which is incomplete on gtm)

I can't figure out what is wrong as partytown should be more or less a "drop-in", not requiring further config.

[exophunk]

I also tried Crisp. Also does not work at all. Same as https://github.com/nuxt-community/partytown-module/issues/98

[RokeAlvo]

what is children?

[exophunk]

For inline script. See documentation of this module (crisp example) or docs of vueuse/head

[BobidaHombre]

Doesn't work for me as well. Anyone is still working on this project? It seems last changes was 2 months ago, while module is not working as aspected,

[iamdagy]

i also tried and failed to implement GTM with Partytown in NUXT3. Has anyone found a solution?

[danielroe]

Would you provide a reproduction of what you are trying? 🙏

[iamdagy]

Sure Daniel @danielroe , Thanks for checking. I have tried the following in nuxt.config.ts :

#first test

app: {
        head: {
            script: [
                // Insert your Google Tag Manager Script here
                {
                    hid: 'gtm',
                    src: 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX',
                    children: `(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/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-XXXXXXX');`
                     ,async: true, type: 'text/partytown'
                },

            ],
             __dangerouslyDisableSanitizers: ['script']
        },
    }

#Second test

    app: {
        head: {
            script: [
                // Insert your Google Tag Manager Script here
                {
                    hid: 'gtm',
                    children: `(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/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-XXXXXXX');`
                },
                { src: 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX', async: true, type: 'text/partytown' },
            ],
             __dangerouslyDisableSanitizers: ['script']
        },
    }


#Third test


    app: {
        head: {
            script: [
                // Insert your Google Tag Manager Script here
                {
                    hid: 'gtm',
                    children: `(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/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-XXXXXXX');`
                    , type: 'text/javascript'
                },
                { src: 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX', async: true, type: 'text/partytown' },
            ],
            // __dangerouslyDisableSanitizers: ['script']
        },
    }


# without Partytown tag loads correctly:

app: {
        head: {
            script: [
                // Insert your Google Tag Manager Script here
                {
                    hid: 'gtm',
                    children: `(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/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-XXXXXXX');`
                    , type: 'text/javascript'
                },
            ],
        },
    }

[BobidaHombre]

Sure Daniel @danielroe , Thanks for checking. I have tried the following in nuxt.config.ts :

#first test

app: {
        head: {
            script: [
                // Insert your Google Tag Manager Script here
                {
                    hid: 'gtm',
                    src: 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX',
                    children: `(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/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-XXXXXXX');`
                     ,async: true, type: 'text/partytown'
                },

            ],
             __dangerouslyDisableSanitizers: ['script']
        },
    }

#Second test

    app: {
        head: {
            script: [
                // Insert your Google Tag Manager Script here
                {
                    hid: 'gtm',
                    children: `(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/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-XXXXXXX');`
                },
                { src: 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX', async: true, type: 'text/partytown' },
            ],
             __dangerouslyDisableSanitizers: ['script']
        },
    }


#Third test


    app: {
        head: {
            script: [
                // Insert your Google Tag Manager Script here
                {
                    hid: 'gtm',
                    children: `(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/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-XXXXXXX');`
                    , type: 'text/javascript'
                },
                { src: 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX', async: true, type: 'text/partytown' },
            ],
            // __dangerouslyDisableSanitizers: ['script']
        },
    }


# without Partytown tag loads correctly:

app: {
        head: {
            script: [
                // Insert your Google Tag Manager Script here
                {
                    hid: 'gtm',
                    children: `(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/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-XXXXXXX');`
                    , type: 'text/javascript'
                },
            ],
        },
    }

Tried the same with partytown config:

partytown: {
    forward: ["dataLayer.push"],
  },

Also sometimes I get CORS error.

@danielroe Maybe as one of creators You are able to show us example, that currently works.

[jelmerdemaat]

I tried to install and enable this module, but can confirm that nothing happens. There is no output in the console about Partytown, no new Partytown scripts, no working GTM.

Setup is Nuxt v2.15.8, using:

npm i -D @nuxtjs/partytown

{
  modules: ['@nuxtjs/partytown'],
  partytown: {
    forward: ['dataLayer.push'],
  },
  app: {
    head: {
      script: [
        { src: 'gtm/url/here', async: true, type: 'text/partytown' },
      ],
    },
  },
}

It seems the module does nothing. Adding debug: true to the config also does nothing.

[RokeAlvo]

have you some errors in console?

[jelmerdemaat]

No, there are no logs/errors at all.

[iamdagy]

Today I gave it another go without success,

I think im getting closer to get it to work, your help would be greatly appreciated @danielroe.

this is the code im using in nuxt.config:

 app: {
        head: {
            viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
            charset: 'utf-8',
            script: [
                {
                    src: 'https://www.googletagmanager.com/gtm.js?id=GTM-MYGTM',
                    async:true,
                    type: 'text/partytown'
                },
                {
                    hid: 'gtm',
                    innerHTML: 'window.dataLayer = window.dataLayer || [];(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/gtm.js?id=\'+i+dl;f.parentNode.insertBefore(j,f);})(window,document,\'script\',\'dataLayer\',\'GTM-MYGTM\');'
                }
            ]
        },

    }

[volodymyr-lisniak]

@danielroe @exophunk Partytown in case of this config works almost well ("nuxt": "^2.15.7")

modules: [
    '@nuxtjs/partytown',
],
partytown: {
  forward: [
    'dataLayer.push',
  ],
  debug: true,
},
head: {
  script: [
    {
      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/gtm.js?id='+i+dl;
          f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-XXXXXXX');
      `,
      type: 'text/partytown',
    },
  ],
},

[exophunk]

Partytown in case of this config works almost well ("nuxt": "^2.15.7")

This issue is about that it is not possible to create ANY working example with Nuxt 3 and @nuxtjs/partytown, not about nuxt 2.

[SirMacke]

I can confirm, this library does unfortunately not work with Nuxt 3.0.0

[danielroe]

This module works fine with Nuxt 3.

Bear in mind that partytown requires configuration depending on the service you use - in particular, you need to configure what needs to be 'forwarded' to the service worker. See https://partytown.builder.io/ for more details.

Moreover, partytown requires that any scripts be served with the correct CORS headers. See https://partytown.builder.io/google-tag-manager for more details about how this impacts Google Tag Manager.

There is also another upstream issue with partytown that you can't programatically add scripts later to the page and have them be recognised, so they have to be all present in the first-rendered HTML: https://github.com/BuilderIO/partytown/issues/74.

To help, I've created a repository here (https://github.com/danielroe/partytown-example) which has a set-up Google Tag Manager implementation. It's pushing an event to the data layer when you click a button. In Tag Manager, I'm listening for that event and injecting a script which prints 'received' to your browser console so you can see it's working.

If you are experiencing any issues with partytown, then the first thing to do is check the issues there: https://github.com/BuilderIO/partytown/issues and raise an issue there.

Regarding this original issue - whether this works with Nuxt Bridge, please note that the correct way to add scripts to the head in Nuxt Bridge is not via app.head (which is Nuxt 3) but rather via head as in Nuxt 2. I have no issues using this module in Nuxt Bridge or Nuxt 3.