[🐞] GA4 sessions plummeted after migration of GTM to Partytown

kyudorimj commented 7 months ago

Describe the bug

There's been a massive drop in GA4 sessions when checked on Analytics > Reports right after the migration of GTM to Parytown.

But it is not completely dead and only shows a massive decrease on session counts. Found out that this was caused by google collect? request not being sent when GTM is run through partytown. These requests was used by GA4 to track user session through session_start event. Each session can have multiple events associated with it:

Reproduction

-

Steps to reproduce

I'm using Angular, and here is how partytown and GTM is configured:

Partytown configuration script in the <head> tag inside index.html:

<script>
    partytown = {
      lib: "/~partytown/",
      forward: ["gtmInit", "dataLayer.push"],
    }
</script>
<script src="/~partytown/debug/partytown.js"></script>

GTM script inside index.html:

<script type="text/partytown">
  window.gtmInit = function(tagManagerId) {
    (function (w, d, s, l, i) {
      w[l] = w[l] || []; w[l].push({
        'gtm.start':
          new Date().getTime(), event: 'gtm.js'
      }); var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', tagManagerId);
  }
</script>

As you can see, I'm not using the gtag script from the documentation for Google Tag Manager (GTM). Instead, we are sending all tracking through GTM directly, because GTM can dynamically insert these scripts without needing gtag

Browser Info

Chrome, Safari

Additional Information

No response

replete commented 7 months ago

I've come across this after testing out partytown myself with GTM. Even on a small hyper optimized website, and FYI: I found that the collect? GTM POST payload does not happen until over 5 seconds, even on subsequent visits, which for me means its not reliable for analytics like this.

EDIT 24/04/24: I've been investigating this and I've discovered this happens even normally, without partytown. I have since learned more about sendBeacon() and using fetch() with keepalive:true (to prevent cancellation of request after window navigation and have observed GTM using both sendBeacon() and fetch() with or without partytown.

GTM.js is a complex script and at this point I'm going to leave this alone and return to this later. I think realistically if you are going to use partytown with GTM on an important site, you need a way to test if all the expected events are happening.

kyudorimj commented 7 months ago

Indeed, @replete. I also discovered that this collect? requests was sent via sendBeacon while running through partytown, resulting in console errors during the request.

hoebbelsB commented 7 months ago

@replete we ran into the same issue and figured out that we need to configure keepalive: false for the collect requests: https://github.com/BuilderIO/partytown/pull/555

indykoning commented 7 months ago

What is the best way to configure this to no longer be an issue?

{
    ...
    resolveSendBeaconRequestParameters: function (url, location) {
        if (url.pathname.includes('collect')) {
            return {keepalive: false};
        }

        return {};
    }
}

kyudorimj commented 7 months ago

figured out that we need to configure keepalive: false for the collect requests: #555

great work @hoebbelsB , tho on my end there's no collect request at all when scripts were ran through partytown.

kyudorimj commented 7 months ago

I've come across this after testing out partytown myself with GTM. Even on a small hyper optimized website, and FYI: I found that the collect? GTM POST payload does not happen until over 5 seconds, even on subsequent visits, which for me means its not reliable for analytics like this.

@replete , can you share us your GTM configuration?

hoebbelsB commented 7 months ago

What is the best way to configure this to no longer be an issue?

{
    ...
    resolveSendBeaconRequestParameters: function (url, location) {
        if (url.pathname.includes('collect')) {
            return {keepalive: false};
        }

        return {};
    }
}

I think we have it configured as

resolveSendBeaconRequestParameters: function (url) {
    if (url.hostname.includes('google-analytics')) {
        return { keepalive: false };
    }
},

That they are not being sent at all is a different story, though. I'm also struggling with an integration right now. As of now i've figured out that the gtm.js event is not properly forwarded to the gtm script, suppressing its functionality.

For whatever reason, the dataLayer property gets swapped out in the gtm script.

When the gtm.js scripts gets initialized, the dataLayer still contains the gtm.js event, which is correct.

However, before initializing, the dataLayer property now does not contain the gtm.js event anymore, but instead some ids and the name dataLayer.

At least for our current state, this is the reason why nothing gets actually kicked off.

Btw. if I manually switch out the dataLayer to [{ event: 'gtm.js', 'gtm.start': new Date().getTime() }], it will properly kick off all events and download other third parties.

cc @gioboa

hoebbelsB commented 7 months ago

@kyudorimj @gioboa I just figured out, that gtm internally accesses the window['global'] property.

This is not a known property to the worker as it seems, but it looks like it would be aware of the type to return. So what partytown then does is to create a new Window object for that accessor.

After this, the dataLayer object is reset. And it looks like this is happening for each nested gtm container.

I also found a workaround for this. We essentially just set the global property on window upfront in the index.html file.

<script type="text/partytown">
    (function() {
        window.global = document;
    })();
</script>

With this in place, all scripts are loaded and all gtm tags are working just fine.

Not sure if this is considered as bug, or intended behavior. Going to investigate a bit more about this. It might also be possible to introduce a GetterHook in order to achieve a similar behavior. For now I'm happy that things are working again 😓

replete commented 7 months ago

@hoebbelsB I was wondering about something similar last night but after some hours deep diving the GTM/partytown stack I decided GTM.js was very complicated and for now just switched partytown off. This is great info and I'll continue my own investigations at some point. I feel like I need to setup a temporary analytics endpoint and run alongside partytown so I can compare data on live for a few days before I can fully trust using partytown for analytics. It seems so very close, thanks for the update, I'll report back when I figure out more.

@kyudorimj Apologies for missing your comment, I also deleted a few comments to clean up the thread as I realized during my investigations I wasn't having quite the same issues. I'll come back to this but ultimately GTM is very complicated and I saw both fetch() and sendBeacon() being used, so there were multiple red herrings.

kyudorimj commented 7 months ago

wow! was about to say the same @hoebbelsB . Thanks for your explanation, I don't have to do one. I think this can be considered as bug as it is not documented that it is how it works. On my end, altho similar to the workaround that you've done, I put the window['global'] assignment on my gtm scripts configuration in index.html directly. So now it looks like this:

<script type="text/partytown">
    window.initGoogleTagManager = function(tagManagerId) {
      (function (w, d, s, l, i) {
        <!-- Set global property of window for gtm to work -->
        w['global'] = d;
        w[l] = w[l] || []; w[l].push({
          'gtm.start':
            new Date().getTime(), event: 'gtm.js'
        }); var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
      })(window, document, 'script', 'dataLayer', tagManagerId);
    }
  </script>

Also, on my end the resolveSendBeaconRequestParameters in parytown configuration looks like this:

   partytown = {
     ...,
     resolveSendBeaconRequestParameters: function (url) {
        return url.hostname.includes('analytics.google') ||
            url.hostname.includes('google-analytics')
            ? { keepalive: false }
            : {};
      },
    }

This is because, I noticed that the request hostname contains that string.

With all these in place, I was able to see the collect request on the Network tab now.

Screenshot 2024-04-25 at 21 33 48

I would still need to test more of it, because I still see some delays on the requests, but I'm happy as you are to see that it works now with that workaround.

If this is intended behavior, I think it should be documented in the GTM x Partytown docs. It is important to note that when implementing GTM within Partytown, the analytics should work. If this is the case, I can close this issue with that workaround, but only if it is added to the documentation.

harshkc commented 5 months ago

@kyudorimj Thanks for the solution! I was trying to integrate partytown on redBus app and the collect calls are fired consistently but still the page_view and onLoad events are not fired, also I am not able to see those calls in the network tab.

My integration looks like this:

<script type="text/javascript">
                partytown = {
                    forward: ["dataLayer.push","gtag"],
                    lib: "/activities/public/scripts/~partytown/",
                    resolveSendBeaconRequestParameters: function (url) {
                        return url.hostname.includes('analytics.google') ||
                            url.hostname.includes('google-analytics')
                            ? { keepalive: 0 }
                            : {};
                        },
                };
            </script>

            <script async type="module" src="/activities/public/scripts/~partytown/partytown.js"/></script>

            <script type="text/partytown">
                (function() {
                    window.global = document;
                })();
                (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                })(window,document,'script','dataLayer',myTag);
            </script>

The gtag is not reaching the below method call when partytown is enabled

Does anyone have solution related to page_view events?

josephmaxim commented 3 months ago

Tried all of the solutions above but unfortunately it looks like Partytown isn't fit for production use especially for high traffic sites that require analytics and ad scripts. one of my sites are getting 150k sessions a day with normal GA4 integration but after implementing Partytown sessions significantly went down to only 60k.

I decided to use Cloudflare Zaras instead but its only free after 1 mill events :(

dymoo commented 2 months ago

Tried all of the solutions above but unfortunately it looks like Partytown isn't fit for production use especially for high traffic sites that require analytics and ad scripts. one of my sites are getting 150k sessions a day with normal GA4 integration but after implementing Partytown sessions significantly went down to only 60k.

I decided to use Cloudflare Zaras instead but its only free after 1 mill events :(

If you move everything to google tag manager server side you only really have to deal with gtm.js which is relatively light.

QwikDev / partytown