CODEWITHSUNDEEP
javascriptreactjsgoogle-analytics-4
Iri.S.M.
Iri.S.M.

Reputation: 43

Multiple Google Analytics 4 script trackers for one page

Briefly: The main idea is that I have a website with integrated Google Analytics 4 (GA4) and an independent widget integrated into this website, that also has GA4. As the result, events are sent to both trackers. How I can isolate that from each other?

Detailed: Have 2 react web apps. One is the parent-website and the other is integrated in it widget (made as react app that is built with Webpack into 2 files - js and css). This widget can be integrated to any website with script tag and css link. And this widget needs to have Google Analytics. But a parent-website can also have integrated Google Analytics. If this parent-website has Universal Analytics, it is ok, sent events are isolated, but if both have new GA4 troubles have place.

I've tried to integrate GA to both [test] apps with the help of react-ga4 library. As the result, both tracker accounts getting all events sent from widget and parent-website. And also tried to use in parent-website manually added script tag and in widget app react-ga4 library. Also all events go everywhere. Inspect

Then I've tried to add GA4 scripts manually and have two configs for two trackers. The same happens - all events go to both trackers.

The main question how to isolate events sending?

        <!-- Global site tag (gtag.js) - Google Analytics -->
        <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>

Upvotes: 4

Views: 4083

Answers (1)

darrelltw
darrelltw

Reputation: 2372

I think you need to modify your gtag event code a bit.

Please take a took about this docuemnt.

gtag('event', 'sign_in', { 'send_to': 'G-XXXXXX-2' });

The main idea is adding a parameter call send_to and ask the event only sent to the tracking id.

And if you need to config multiple tracking id.

You can just config second tracker

No need add the <script> again

<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");
gtag("config", "TRACKING_ID_2");
</script>

Upvotes: 9

Related Questions