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

Question

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 -
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>
this is how i am loading the gtm script -
<script type="text/partytown" async defer fetchpriority="low" src="https://www.googletagmanager.com/gtm.js?id=${gtmId}"></script>
<script type="text/partytown">
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
</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

Answer 1

oo very interesting, this is my advice: To get gtag and GTM working, you need to make sure the following things:
You have created a gtag tracking code in your Google Analytics account and have added the tracking ID in your code: (reCheck)
'<'script type="text/partytown" async defer fetchpriority="low"
src="https://www.googletagmanager.com/gtag/js?id=${gtagId}"></script'>'
You have created a GTM container in your Google Tag Manager account and have added the container ID in your code: (reCheck)
<script type="text/partytown" async defer fetchpriority="low" src="https://www.googletagmanager.com/gtm.js?id=${gtmId}"></script>
Make sure the data layer is correctly initialized before the GTM script is executed:
<script type="text/partytown">
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
</script>
Verify that your GTM container is configured to fire the gtag tracking code, which will send the data to Google Analytics.
If you have done all the above steps correctly, and still the events are not being sent, try checking the network tab in the browser's developer tools to see if there are any errors being returned for the gtag or GTM requests. If there are errors, fix them, and try again.