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.

[orenmizr]

@sagar7993 have you tried it ? does it mean that every tag that gtm loads goes into a worker ? very interested to know