-
Implementing Multiple Independent Google Analytics 4 Trackers on a Single Web Page
In a Nutshell: Picture this: I have a site and a widget, both running Google Analytics 4 (GA4). The issue? All events are being sent to both their trackers. Question is, how do I keep them separate?
The Whole Story:
I’ve got two react web apps. One acts as the parent website, and the other, a widget, is integrated within it (built using Webpack into two files – a javascript and a css). The cool thing is that this widget can be popped into any website with a simple script tag and css link. And this widget – it needs Google Analytics. But, and here’s the catch, the parent website might have Google Analytics integrated too. If the parent website is using Universal Analytics, things are peachy, the sent events are all separated. But if both are operating with the newer GA4, things start getting messy.Now, I’ve played around with this, trying to integrate GA into both my [test] apps using the react-ga4 library. However, all that did was result in both tracker accounts getting all events sent from the widget and parent website. I took a different approach, manually adding a script tag to the parent website and using the react-ga4 library for the widget app. And yet, every single event wound up everywhere.
Here’s a look.My next stab at it: manually adding the GA4 scripts and configuring two trackers. Still, same old story – every event goes onto both trackers.
The big question: how do I isolate the event sending?
<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING_ID_1” ></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", "TRACKING_ID_1”); </script> <!-- Global site tag 2 (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING_ID_2” ></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", “TRACKING_ID_2); </script>` -
1 Reply
-
The issue here is about having two different web applications – a main website and a smaller widget – both wanting to send data to Google Analytics for tracking. However, when both are using the same version of Google Analytics (GA4), the data gets mixed up and all events end up in both trackers. The goal is to separate the data so it’s clear where each event is coming from. Attempts have been made including manual addition of GA4 scripts and configuration of two different trackers, as well as using a specific library to integrate GA into the applications. However, these efforts have not yet resulted in successful separation of the data. The solution is still being sought.
Log in to reply.