How to make gtag and gtm work with partytown in a react app

[sagar7993]

I need some help with google analytics, gtag and gtm scripts

This is how I am generating the partytown snippet in webpack -

const snippetText = partytownSnippet({
  debug: config.env !== 'production',
  forward: [
    'dataLayer.push',
    'GoogleAnalyticsObject',
    'ga',
    'gtag'
  ],
  resolveUrl: (url, _location, type) => {
    const proxyScriptHosts = [
      'www.google-analytics.com',
      'www.googletagmanager.com',
    ];
    if (type === 'script' && !!url && proxyScriptHosts.find((proxyScriptHost) => url.host.includes(proxyScriptHost))) {
      const proxyUrl = new URL('https://my-proxy.com/api/proxy');
      proxyUrl.searchParams.append('url', url.href);
      return proxyUrl;
    }
    return url;
  }
});

Then I insert this snippet in my index.html file like this -

<script type="text/javascript">{snippetText}</script>

Now I need to load 3 scripts for my app, this is where I need help to understand what I am doing wrong -

1. This is how I am loading the google analytics script -

<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  window.gtag = function () {
    window.dataLayer.push(arguments);
  }
  window.GoogleAnalyticsObject = 'ga';
  window.ga = function () {
    window.ga.q = window.ga.q || [];
    window.ga.q.push(arguments);
  };
  window.ga.l = 1 * new Date();
</script>
<script type="text/partytown" async defer fetchpriority="low" src="https://www.google-analytics.com/analytics.js"></script>

In one of my react components, i am initializing google analytics like this ->

window.gtag('js', new Date());
window.gtag('config', gaId, options);

This works perfectly fine, i can see google analytics UA4 requests in the network tab working as expected!!

2. This is how i am loading the gtag script -

<script type="text/partytown" async defer fetchpriority="low" src="https://www.googletagmanager.com/gtag/js?id=${gtagId}"></script>

3. This is how i am loading the gtm script -

   <script type="text/partytown">
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
   </script>
   <script type="text/partytown" async defer fetchpriority="low" src="https://www.googletagmanager.com/gtm.js?id=${gtmId}"></script>

Gtag and GTM scripts aren't working, none of the events are being sent for them, please help me understand. I need ga, gtag, and gtm all 3 in my case working together Please help me with this, i've been stuck on it for quite some time, need to understand the right way to do this

I have searched in the official partytown docs and read various blogs online, this is as far as I've gotten. Am I missing something here? Please help me understand how to get this to work. There are no errors in the console on in the network tab, and I have ensured that the gtag id and the gtm containers exist and are configured properly. Everything works as expected if I remove partytown.

[mickdewald]

I am interested too. I tried multiple combinations, but nothing worked. The docs aren't helpful.

[unrealhero18]

Developers are ignoring the questions about GTM. I tried to solve this issue a year ago but all my questions on theirs discord will be without answers 🤨

[mhevery]

It is hard to help without a repro case. Can you provide a stackblitz or github repo which can be reproduced in few clicks.

[mrxbox98]

It is hard to help without a repro case. Can you provide a stackblitz or github repo which can be reproduced in few clicks.

Here is a stackblitz I made https://stackblitz.com/edit/sveltejs-kit-template-default-heabie?file=src%2Froutes%2FCounter.svelte

It is for svelte. I have initialized google analytics properly and I can see analytics but events are not being triggered.

[Aghiles97]

It is hard to help without a repro case. Can you provide a stackblitz or github repo which can be reproduced in few clicks.

Here is a stackblitz I made https://stackblitz.com/edit/sveltejs-kit-template-default-heabie?file=src%2Froutes%2FCounter.svelte

It is for svelte. I have initialized google analytics properly and I can see analytics but events are not being triggered.

did you solve the problem?

[rohanpruthi]

I need some help with google analytics, gtag and gtm scripts

This is how I am generating the partytown snippet in webpack -

const snippetText = partytownSnippet({
  debug: config.env !== 'production',
  forward: [
    'dataLayer.push',
    'GoogleAnalyticsObject',
    'ga',
    'gtag'
  ],
  resolveUrl: (url, _location, type) => {
    const proxyScriptHosts = [
      'www.google-analytics.com',
      'www.googletagmanager.com',
    ];
    if (type === 'script' && !!url && proxyScriptHosts.find((proxyScriptHost) => url.host.includes(proxyScriptHost))) {
      const proxyUrl = new URL('https://my-proxy.com/api/proxy');
      proxyUrl.searchParams.append('url', url.href);
      return proxyUrl;
    }
    return url;
  }
});

Then I insert this snippet in my index.html file like this -

<script type="text/javascript">{snippetText}</script>

Now I need to load 3 scripts for my app, this is where I need help to understand what I am doing wrong -

1. This is how I am loading the google analytics script -

<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  window.gtag = function () {
    window.dataLayer.push(arguments);
  }
  window.GoogleAnalyticsObject = 'ga';
  window.ga = function () {
    window.ga.q = window.ga.q || [];
    window.ga.q.push(arguments);
  };
  window.ga.l = 1 * new Date();
</script>
<script type="text/partytown" async defer fetchpriority="low" src="https://www.google-analytics.com/analytics.js"></script>

In one of my react components, i am initializing google analytics like this ->

window.gtag('js', new Date());
window.gtag('config', gaId, options);

This works perfectly fine, i can see google analytics UA4 requests in the network tab working as expected!!

2. This is how i am loading the gtag script -

<script type="text/partytown" async defer fetchpriority="low" src="https://www.googletagmanager.com/gtag/js?id=${gtagId}"></script>

3. This is how i am loading the gtm script -

<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
</script>
<script type="text/partytown" async defer fetchpriority="low" src="https://www.googletagmanager.com/gtm.js?id=${gtmId}"></script>

Gtag and GTM scripts aren't working, none of the events are being sent for them, please help me understand. I need ga, gtag, and gtm all 3 in my case working together Please help me with this, i've been stuck on it for quite some time, need to understand the right way to do this

I have searched in the official partytown docs and read various blogs online, this is as far as I've gotten. Am I missing something here? Please help me understand how to get this to work. There are no errors in the console on in the network tab, and I have ensured that the gtag id and the gtm containers exist and are configured properly. Everything works as expected if I remove partytown.

I'm also in the same boat with a slightly different scenario. My GA, gtag, and some more scripts are initiated by GTM itself. I'm injecting gtm.js as recommended by Google with type="text/partytown" with other suggestions as per the partytown official docs. I can check all my script loading in the partytown sandbox as well as "www.google-analytics.com/j/collect" API call in the Chrome tools Network tab. Unfortunately, I'm unable to track any events in GTM console. Please let me know if you have found any solution to this.

[chawlaji]

I'm also in the same boat, I'm unable to track any events in GTM console. Also I don't even see the events being fired in gtm console in preview mode.Please let me know if you have found any solution to this. Any help is greatly appreciated, really stuck here. And also why is party town still in beta mode after so-many years ?