
## Table of Contents

1. [Introduction](#introduction)
2. [Setup GA4 Events](#setup-ga4-events)
3. [Place GTag Script](#place-gtag-script)
4. [Custom GTag Script](#custom-gtag-script)
5. [The Browser Network for GA4](#the-browser-network-for-ga4)
6. [The Performance for GA4](#the-performance-for-ga4)
7. [GA4 with Partytown](#ga4-with-partytown)
8. [The Performance with Partytown for GA4](#the-performance-with-partytown-for-ga4)
9. [Conclusion](#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:

```Javascript
    <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`:

```Javascript
    <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.

![GA4 events from browser](/images/partytown-setup-for-ga4-events/img1.png)

### 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 Performance](/images/partytown-setup-for-ga4-events/img2.png)

## 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:

```Javascript
    <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:

```Javascript
    <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']`.

```Javascript
        <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.

![Partytown GA4 Performance](/images/partytown-setup-for-ga4-events/img3.png)

## 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.


This blog demonstrates how to use PartyTown to run GA4 tracking in a Web Worker to avoid blocking the browser's main thread.

PartyTown

How to Use PartyTown with GA4 Events