GTM with partytown does not work #104

exophunk · 2022-06-29T09:14:37Z

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.

The text was updated successfully, but these errors were encountered:

exophunk · 2022-06-29T09:36:58Z

I also tried Crisp. Also does not work at all. Same as #98

RokeAlvo · 2022-07-07T12:59:49Z

what is children?

exophunk · 2022-07-07T13:03:52Z

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

BobidaHombre · 2022-08-03T17:32:51Z

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 · 2022-08-05T03:03:08Z

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

danielroe · 2022-08-05T08:44:19Z

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

iamdagy · 2022-08-05T08:54:14Z

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 · 2022-08-05T09:15:01Z

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 · 2022-08-29T08:29:48Z

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 · 2022-09-23T21:12:48Z

have you some errors in console?

jelmerdemaat · 2022-10-03T09:22:00Z

No, there are no logs/errors at all.

iamdagy · 2022-11-16T00:42:40Z

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

    }

exophunk · 2022-11-29T10:03:10Z

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 · 2022-12-15T23:24:01Z

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

danielroe · 2022-12-16T11:35:19Z

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: BuilderIO/partytown#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.

danielroe self-assigned this Aug 5, 2022

danielroe added the needs reproduction label Aug 5, 2022

danielroe added the documentation Improvements or additions to documentation label Sep 30, 2022 — with Volta.net

danielroe closed this as completed Dec 16, 2022

danielroe closed this as not planned Won't fix, can't repro, duplicate, stale Dec 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GTM with partytown does not work #104

GTM with partytown does not work #104

exophunk commented Jun 29, 2022

exophunk commented Jun 29, 2022

RokeAlvo commented Jul 7, 2022 •

edited

exophunk commented Jul 7, 2022

BobidaHombre commented Aug 3, 2022 •

edited

iamdagy commented Aug 5, 2022

danielroe commented Aug 5, 2022

iamdagy commented Aug 5, 2022 •

edited

BobidaHombre commented Aug 5, 2022 •

edited

jelmerdemaat commented Aug 29, 2022

RokeAlvo commented Sep 23, 2022

jelmerdemaat commented Oct 3, 2022

iamdagy commented Nov 16, 2022

exophunk commented Nov 29, 2022

SirMacke commented Dec 15, 2022

danielroe commented Dec 16, 2022

GTM with partytown does not work #104

GTM with partytown does not work #104

Comments

exophunk commented Jun 29, 2022

exophunk commented Jun 29, 2022

RokeAlvo commented Jul 7, 2022 • edited

exophunk commented Jul 7, 2022

BobidaHombre commented Aug 3, 2022 • edited

iamdagy commented Aug 5, 2022

danielroe commented Aug 5, 2022

iamdagy commented Aug 5, 2022 • edited

BobidaHombre commented Aug 5, 2022 • edited

jelmerdemaat commented Aug 29, 2022

RokeAlvo commented Sep 23, 2022

jelmerdemaat commented Oct 3, 2022

iamdagy commented Nov 16, 2022

exophunk commented Nov 29, 2022

SirMacke commented Dec 15, 2022

danielroe commented Dec 16, 2022

RokeAlvo commented Jul 7, 2022 •

edited

BobidaHombre commented Aug 3, 2022 •

edited

iamdagy commented Aug 5, 2022 •

edited

BobidaHombre commented Aug 5, 2022 •

edited