partytown: GTM with partytown does not work

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.

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.

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\');'
                }
            ]
        },

    }

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

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.

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