How to Use PartyTown with GA4 Events

Table of Contents

1. Introduction
2. Setup GA4 Events
3. Place GTag Script
4. Custom GTag Script
5. The Browser Network for GA4
6. The Performance for GA4
7. GA4 with Partytown
8. The Performance with Partytown for GA4
9. Conclusion

Introduction

This blog shows how to use PartyTown with GA4 scripts to move event processing off the browser's main thread and into a Web Worker, improving website performance.

Setup GA4 Events

First, let's try without PartyTown to send GA4 events.

Place GTag Script

To set up GA4 events with gtag, you need to place the following script after the body tag:

    <script async src="https://www.googletagmanager.com/gtag/js?id={tag id}"></script>
    <script>window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', '{tag id}');
    </script>
    <header>

Custom GTag Script

We also want to send some custom GA4 events. The following code snippet sends 20 GA4 events as click event_name if the user clicks the button with the id myButton:

    <script>
        ; (function () {

            document.getElementById("mybutton").addEventListener("click", function () {

                for (i = 0; i < 20; i++) {
                    gtag('event', 'click', { button: 'test_button_click ' + i });
                }

            });
        })();
    </script>

The Browser Network for GA4

This is what it looks like from the browser. After the page loads, you can see the page_view and test events being sent to GA4. You can also see the other requests containing collect?v=2 — those are sent by clicking the button.

The Performance for GA4

Now if we look at the performance for these, we can see the first script is gtag.js, then other scripts like jQuery and Bootstrap, and later there are lots of requests from clicking the buttons and sending 20 GA4 events from the browser. Also, you can see that around the same time frame, the main thread was busy with these processes.

GA4 with Partytown

Now, with the same functionality, we'd like to include Partytown, which moves these GA4 events into a Web Worker.

Add Partytown Script

First, add the Partytown script to the head of the HTML:

    <script src="/lib/partytown/partytown.js"></script>

Add type=text/partytown Attribute

Partytown queries DOM elements that have the attribute type=text/partytown and executes them in a worker thread.

So add the type=text/partytown attribute to all scripts you want to move to the worker thread:

    <script type='text/partytown' async src="https://www.googletagmanager.com/gtag/js?id={tag id}"></script>

    <script type='text/partytown'>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', '{tag id}');
    </script>

    <script type='text/partytown'>
        ; (function () {

            document.getElementById("mybutton").addEventListener("click", function () {

                for (i = 0; i < 20; i++) {
                    gtag('event', 'click', { button: 'test_button_click ' + i });
                }

            });
        })();
    </script>

Partytown Config

Another thing to add is the Partytown config. You need to configure where the Partytown library is located if you don't want to use the default folder. Also, you need to forward global variables to Partytown so it will forward them from the worker thread to the main thread.

Since our GA4 needs dataLayer and gtag, we need to add these: forward: ['dataLayer.push', 'gtag'].

        <script>
        partytown = {
        forward: ['dataLayer.push', 'gtag'],
        lib: '/lib/partytown/'
            };
        </script>

The Performance with Partytown for GA4

Now if we check the performance, one of the measurement points is DCL (DOMContentLoaded). Notice that the DCL moves much earlier than before. DCL means that the browser is ready to execute client scripts, so execution starts earlier by using Partytown.

Also, notice that gtag.js loads after the DCL, and then there are lots of requests to analytics.google.com for GA4 events. Before, this work was done on the main thread. Now, if you check the worker thread, you'll see Partytown getting busy during that time.

Conclusion

Partytown is a great library for moving third-party scripts to a Web Worker thread, which helps improve page performance. By offloading GA4 tracking scripts from the main thread, your page's DOMContentLoaded event fires earlier, resulting in a faster and more responsive user experience.