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

How to Use PartyTown with GA4 Events


### get total page view count for the month

Return 202305's each date's page count

```SQL
with data as (
SELECT event_date, event_name, count(*) as total
FROM `ga4_table.events_intraday_202305*`
group by 1, 2
having event_name = 'page_view'
order by 1
)
select event_date, total from data;
```

Total event count with event_name

```SQL
with data as (
SELECT event_name, count(*) as total
FROM `ga4_table.events_intraday_202306*`
group by 1
order by 1
)

select * from data;
```


GA4 Big Query Sample Query


## Table of Contents

1. [Introduction](#introduction)
2. [Prerequisites](#prerequisites)
3. [How to Use gtag to Add User Properties](#how-to-use-gtag-to-add-user-properties)
4. [Configure Custom Definitions for User Properties](#configure-custom-definitions-for-user-properties)
5. [What About the page_view Events for User Properties](#what-about-the-page_view-events-for-user-properties)
6. [GTAG Sample Code](#gtag-sample-code)
7. [Page Load Events Don't Contain the user_properties](#page-load-events-dont-contain-the-user_properties)
8. [Conclusion](#conclusion)

## Introduction

This blog shows how to add user properties to Google Analytics 4 (GA4). We'll demonstrate how to use `gtag` or Google Tag Manager to achieve this. For each approach, we'll also show how the actual user properties data appears in BigQuery for GA4.

## Prerequisites

This blog assumes your website is already set up with GA4 via Google Tag Manager, and the `gtag` and `dataLayer` global variables are available on your page.

- Website is set up with GA4.
- `https://www.googletagmanager.com/gtag/js` is loaded.

## How to Use gtag to Add User Properties

Here we'll start with how to use `gtag` to add user properties to GA4, and we'll verify the results in BigQuery as well.

The following is an example code snippet that fires a GA4 event with user properties. The first line of code sets the user_properties with the key `favorite_color`. We assume `favorite_color` is a user-specific attribute related to your site, so we set it to "blue". The next line sends the GA4 event `test_up_data1` to GA4.

```
gtag("set", "user_properties", {favorite_color: "blue"});
gtag("event", "test_up_data1", {other_data: "test up properties"});
```

When you run the above code from your browser console, you should see a GA4 event being sent from your browser as shown below. `ep` is event parameters, and `up` is user properties.
![send ga4 user_properties event](/images/send-user-properties/img1.png)

How does the above appear in BigQuery? You can see in the BigQuery table that the event we just fired from our browser has been received, and the user_properties contain `favorite_color` with the value present. Also, you'll notice the page_view and user_engagement events don't have that value. These two events are fired by GA4 and are automatically collected.
![send ga4 user_properties and big query](/images/send-user-properties/img2.png)

Now, if you run the same code again in the same browser, you'll notice the browser fires the event but without the user properties `favorite_color` field.

```
gtag("set", "user_properties", {favorite_color: "blue"});
gtag("event", "test_up_data1", {other_data: "test up properties"});
```

This is the BigQuery result after we made the second gtag request from the browser. Although we included the set with user properties, no user properties were added to the same event.
![big query with user properties](/images/send-user-properties/img3.png)

## Configure Custom Definitions for User Properties

It's not clear why using `gtag` with `set` for user properties has the above behavior, where only the first event sent to BigQuery contains the user_properties. It appears we need to configure the user property in GA4's `Custom definitions` section.

The following shows how to configure the user property in `Custom definitions`. As you can see below, we create a dimension named `favorite_color` with the Scope set to `User`.
![Config Custom Dimensions for User Properties](/images/send-user-properties/img4.png)

After setting the custom dimensions in the GA4 property, it might take some time for the results to take effect. We performed the following test. The `user_pseudo_id` is stored in the GA4 BigQuery table. You can see that when we load the page, the browser fires several events — `first_visit`, `scroll`, `session_start`, and `page_view` — and none of them have `favorite_color` in the user_properties table. After the page loads, we fired the same event `test_up_data1` a few times, and you can see they all have the `favorite_color` record.

Next, you can see that we fired `test_up_data` which contains `favorite_color`, and then we also fired another event `test_up_data2`. You'll notice this custom event also contains the user property `favorite_color`. So it appears that after we use `gtag` to `set` the user properties along with the configuration in the GA4 property, any custom event after the `set` will also include the same user properties. This makes sense as it's the user scope of events.
![User Properties at Big Query](/images/send-user-properties/img5.png)

### What About the page_view Events for User Properties

We also performed another test as shown below. You can see that we start a new session (since the `user_pseudo_id` changed). When we first load the page, the `page_view`'s user_properties is empty. But once we manually run the code above, you can see events with the `favorite_color` user property filled into the automatically collected events. Any other event will also include the same user properties. In addition, you can see that when we load the page again within the same session, the user properties still contain the same `favorite_color` value.
![User Properties at Big Query](/images/send-user-properties/img6.png)

## GTAG Sample Code

The following is the sample code from above. Once you click the button, the subsequent events including page_view will also include the user property `favorite_color`. Also, you need to add `favorite_color` to the custom dimensions in the GA4 property.

```
<button
  className="ga4"
>
test_up_data1
</button>

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{Measurement ID}', {
      send_page_view: false
});

var buttonEle = document.querySelector(".ga4");
buttonEle.addEventListener('click', function(e) {
    gtag("set", "user_properties", {favorite_color: "blue"});
    gtag("event", "test_up_data1", {other_data: "test up properties"});
});
</script>
```

## Page Load Events Don't Contain the user_properties

There's one issue with the above code. If you start the page from a new session, the page view events don't contain the user_properties we set earlier. To solve this, we can use dataLayer along with user properties in the GA4 configuration.
![Big Query User Property - First Visit](/images/send-user-properties/img7.png)

Here, we define a dataLayer variable as favorite_color, then create a user property `favorite_color` in the GA4 configuration.
![GA4 Configuration - User Properties](/images/send-user-properties/img7.png)

Now, we just need to add the code to the page during page load. Make sure the code below is placed before the GTM scripts.

```
// place this code before gtm load scripts.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
    favorite_color: "green"
})
```

## Conclusion

In summary, if you have GA4 fields that are user properties, the following looks like the correct implementation:

- Create a custom dimension in the GA4 property with the type set to User.
- Create a dataLayer variable for your property.
- Create a GA4 configuration and set the dataLayer variable as a user property.
- In your code, set the dataLayer value before the GTM script loads.

Now, page view and any subsequent events' user_properties should contain your new user property.


User-scoped custom dimensions in GA4. This blog shows how to set user properties in GA4 by using gtag or Google Tag Manager.

How to Set User Properties in GA4


## Table of Contents

1. [client_id](#client_id)
2. [language](#language)
3. [page_location](#page_location)
4. [page_referrer](#page_referrer)
5. [page_title](#page_title)
6. [user_id](#user_id)
7. [user_properties](#user_properties)

## Introduction

GA4 has several configuration fields that control how data is collected and sent. This post documents each field, how to set it via `gtag`, and what the corresponding query string key and BigQuery column are.

Reference: https://developers.google.com/analytics/devguides/collection/ga4/reference/config

## client_id

Stored as part of the first-party analytics cookie for 2 years, used to identify each user.

```
gtag('set', 'client_id', '123456');
gtag('event', 'test_gtag_set', { test_id: 'client_id'});
```

The `collect?v=2` request's query string key will be `cid`. The BigQuery column is `user_pseudo_id`, and the cookie `_ga` value will be updated to `GA.1.1.123456`. After updating this value, subsequent requests will always set the same value since the cookie is updated.

## language

By default, this uses the window object's `navigator.language` value.

```
gtag('set', 'language', 'en-ca');
gtag('event', 'test_gtag_set', { test_id: 'language'});
```

The `collect?v=2` request's query string key will be `ul`. The BigQuery column `device.language` will be updated to `en-ca`. The `navigator.language` value won't be updated.

## page_location

By default, this uses the window object's `document.location` value. It is not clear what condition would require updating this value.

```
gtag('set', 'page_location', '/test2');
gtag('event', 'test_gtag_set', { test_id: 'page_location'});
```

The `collect?v=2` request's query string key will be `dl`. The BigQuery column `event_params.page_location` will be updated to `/test2`.

## page_referrer

By default, this uses the window object's `document.referrer` value. If the user comes directly to the site, `document.referrer` should be empty and BigQuery will have no value.

```
gtag('set', 'page_referrer', 'https://technoapple.com');
gtag('event', 'test_gtag_set', { test_id: 'page_referrer'});
```

The `collect?v=2` request's query string key will be `dr`. The BigQuery column `event_params.page_referrer` will be updated to `https://technoapple.com`. Because `page_referrer` has a value, `event_params` will add 2 more values: `medium` with the value `referral` and `source` with the value `technoapple.com`.

## page_title

By default, this uses the window object's `document.title` value. It is not clear what condition would require updating this value.

```
gtag('set', 'page_title', 'my title');
gtag('event', 'test_gtag_set', { test_id: 'page_title'});
```

The `collect?v=2` request's query string key will be `dt`. The BigQuery column `event_params.page_title` will be updated to `my title`.

## user_id

The user's ID provided by the site.

```
gtag('set', 'user_id', '123');
gtag('event', 'test_gtag_set', { test_id: 'user_id'});
```

The `collect?v=2` request's query string key will be `uid`. The BigQuery column `user_id` will be updated to `123`. Once this value is set, subsequent gtag requests will always contain user_id as `123`.

## user_properties

Additional user preference information. You can set up to 25 additional user properties. The name maximum length is 24 characters and the value maximum length is 36 characters.

```
gtag('set', 'user_properties', {
  "data1": "1 data"
});
gtag('event', 'test_gtag_set', { test_id: 'user_properties'});
```

The `collect?v=2` request's query string key will be something starting with `up`, e.g. `up.data1`. The BigQuery column is `user_properties`, and it should contain the object `data1` with the value `1 data`.

```
gtag('config', 'G-NFY53GVWDK', {
   'user_properties': {
      "data_10": "10 data"
  }
});
gtag('event', 'test_gtag_set', { test_id: 'user_properties'});
```

## Conclusion

Understanding GA4 configuration fields is essential for properly tracking user behavior. Each field has a specific query string key in the `collect?v=2` request and a corresponding BigQuery column. By using `gtag('set', ...)`, you can customize how these fields are populated to suit your analytics needs.


A guide to GA4 configuration fields including client_id, language, page_location, page_referrer, page_title, user_id, and user_properties.

About GA4 Configuration Fields


## Table of Contents

1. [Introduction](#introduction)
2. [Create GA4 Property](#create-ga4-property)
3. [Create New Google Tag Manager Container](#create-new-google-tag-manager-container)
4. [Install Google Tag Manager into Your Site](#install-google-tag-manager-into-your-site)
5. [Add Google Analytics GA4 Configuration](#add-google-analytics-ga4-configuration)
6. [Conclusion](#conclusion)

## Introduction

This page shows an example of how to set up Google Analytics 4 with Google Tag Manager. Please be aware that Google Universal Analytics will no longer process new data beginning July 1, 2023. You'll need to switch to a Google Analytics 4 Property.

## Create GA4 Property

Here, we'll create a GA4 property. If you have an existing account with the old Universal Analytics, you can use the same account, create a new property, and use the GA4 Setup Assistant to set up GA4.
![GA4 Setup Assistant](/images/setup-ga4-with-gtm/img4.png)

Choose the option to create a new Google Analytics 4 Property.
![Create GA4 - Get Started](/images/setup-ga4-with-gtm/img5.png)

Click Create Property to create a new GA4 property. Once you create a GA4 property, make a note of the measurement ID, because we'll need this value later when adding it to Google Tag Manager.
![Create GA4 Property](/images/setup-ga4-with-gtm/img6.png)

## Create New Google Tag Manager Container

Here, create a new Google Tag Manager container under your account.
![GTM Code Snippet](/images/setup-ga4-with-gtm/img1.png)

## Install Google Tag Manager into Your Site

Then go to the admin section and follow the instructions to use the code snippet and add it to your site. Once you add the Google Tag Manager code to the site, you can later configure additional tags or scripts to load on the site.

Here, add a new tag and add the Google Analytics GA4 Configuration.
![GTM - GA4 Configuration](/images/setup-ga4-with-gtm/img2.png)

## Add Google Analytics GA4 Configuration

Add the GA4 measurement ID, so Google Tag Manager's GA4 configuration will connect to the new GA4 Analytics measurement ID.
![GTM - GA4 Configuration with Measurement ID](/images/setup-ga4-with-gtm/img3.png)

Now, if you load the page with the GTM script you added earlier, it should load the script for GA4 to start collecting default data and sending it to Google Analytics, such as page views.

## Conclusion

Setting up GA4 with Google Tag Manager is straightforward: create a GA4 property, set up a GTM container, install the GTM snippet on your site, and configure the GA4 tag with your measurement ID. This approach gives you the flexibility to manage your analytics configuration without modifying site code directly.


Google Tag Manager provides an easy way to set up Google Analytics 4. This blog walks through the steps to set up GA4 via GTM.

How to Setup Google Analytics 4 with Google Tag Manager


## Table of Contents

1. [Introduction](#introduction)
2. [Why Use dataLayer for GA4?](#why-use-datalayer-for-ga4)
3. [Prerequisites](#prerequisites)
4. [Goal](#goal)
5. [Create Triggers at GTM](#create-triggers-at-gtm)
6. [Create DataLayer Variable](#create-datalayer-variable)
7. [Create Google Analytics GA4 Event](#create-google-analytics-ga4-event)
8. [Choose the Triggering for GA4 Event](#choose-the-triggering-for-ga4-event)
9. [Publish or Preview the GTM Changes](#publish-or-preview-the-gtm-changes)
10. [Verify the Code](#verify-the-code)
11. [Verify at GA4 UI](#verify-at-ga4-ui)
12. [How About BigQuery?](#how-about-bigquery)
13. [Conclusion](#conclusion)

## Introduction

This page shows an example of how to set up GA4 custom events for learning purposes. Please be aware that Google Universal Analytics will no longer process new data beginning July 1, 2023. You'll need to switch to a Google Analytics 4 Property.

## Why Use dataLayer for GA4?

GA4 has different ways to fire events. Enhanced measurement events are built-in events that can be enabled via options. Recommended events won't send automatically but require some configuration or manual setup. Now, if the events you want to fire don't fit either of these scenarios, you can create custom events and send them to GA4. You can use `gtag` or `dataLayer` to send custom events.

This blog will focus on and demonstrate how to use `dataLayer` to fire custom events to GA4.

## Prerequisites

This blog assumes the following tasks are already done on your site:

- You have Google Tag Manager already configured for GA4.
- Your website has loaded the GTM script.
- Your Google Analytics has been linked to BigQuery.

## Goal

The goal is to fire the following dataLayer events. Assume you have a contact form on your home page and you want to track this data in GA4. For testing purposes, we'll fire the events below from the console. Once we fire the events, we'll see how they appear in the browser, how to view them in the GA4 UI, and how the data flows into BigQuery.

```
// we want to fire this event when the user clicks the submit contact form button.
dataLayer.push({"event" : "contact_lead", "email": "test@test.com", "page": "home"});
```

If you just run the above JavaScript in the console, nothing will happen until you finish the following setup at GTM.

## Create Triggers at GTM

In GTM, click Triggers > Custom Events, and enter the event name as `contact_lead`.
![Enter Event Name for Custom Events](/images/setup-datalayer/img1.png)

## Create DataLayer Variable

If you look at the above dataLayer, you can see there are two fields: `email` and `page`. We'll need to configure the dataLayer variables so that running the above dataLayer push will include the `email` and `page` fields.

In GTM, click Variables -> User-Defined Variables, and create 2 dataLayer variables as shown below.
![Enter dataLayer variable for Custom Events](/images/setup-datalayer/img2.png)

## Create Google Analytics GA4 Event

Once you've created the Triggers and Variables, you can create a new GA4 Event tag.
Click Tags > New > Google Analytics: GA4 Event.
![GA4 custom events](/images/setup-datalayer/img3.png)
Here, we'll enter the event name as `contact_lead` and also add 2 Event Parameters. Now the configuration to run the above JavaScript code is ready.

## Choose the Triggering for GA4 Event

Now, the last part is to add the trigger — specifically, when the above event should fire. So far we've set it to all custom events, but you can filter by class or ID.
![GA4 custom events trigger](/images/setup-datalayer/img4.png)

## Publish or Preview the GTM Changes

If you don't want to publish your GTM changes right away, you can preview and test the settings to see if you can fire the events with GA4.

## Verify the Code

Run the code below in the browser console window to test.
![Run dataLayer code](/images/setup-datalayer/img5.png)

After running the above code, take a look at the browser's network tab. You should see some requests starting with `collect?v=2...` — this is the GA4 request.

As you can see, the GA4 request includes the email and page key-value pairs. Without the GTM setup, you won't see this request fire. Without the dataLayer variables, you won't see the email and page included in the payload either.
![GA4 Payload](/images/setup-datalayer/img6.png)

You can test by running the following JavaScript code in the console to see if GA4 will include this data or not. It will not include `data1` unless you configure the dataLayer variable `data1` in GTM.

```
dataLayer.push({"event" : "contact_lead", "email": "test@test.com", "page": "home", "data1": "other data"});
```

## Verify at GA4 UI

You can verify the event by going to GA4's realtime section and checking the events section. As you can see, our `contact_lead` event displays on the page, and you will see the email and page key-value pairs as well.
![GA4 UI](/images/setup-datalayer/img7.png)

## How About BigQuery?

If you've connected GA4 with BigQuery, you should see something like `analytics_111111` with an `events_intraday_` table. That intraday table contains streaming data coming from GA4, and you can see our `contact_lead` event is being written to this table.

![Big Query](/images/setup-datalayer/img8.png)

## Conclusion

GA4 provides `dataLayer` and `gtag` to fire custom events. If using `dataLayer`, you will need to configure triggers and events in GTM. Following the correct steps should allow you to configure things quickly, but having many configurations in GTM might not be suitable for every company's requirements.


Google Tag Manager provides an easy way to set up GA4 and GA4 custom events. This blog walks through how to set up GA4 custom events via GTM.

How to Use dataLayer to Fire GA4 Custom Events via Google Tag Manager


## Table of Contents

1. [Introduction](#introduction)
2. [Google Analytics Admin UI](#google-analytics-admin-ui)
3. [Get Started with GA4](#get-started-with-ga4)
4. [Create Property](#create-property)
5. [Install Data Stream](#install-data-stream)
6. [Data Streams](#data-streams)
7. [Setup GA4 with Google Analytics](#setup-ga4-with-google-analytics)
8. [Old Google Analytics Configured with gtag](#old-google-analytics-configured-with-gtag)
9. [How to Send Custom Events to Both Old Google Analytics and GA4](#how-to-send-custom-events-to-both-old-google-analytics-and-ga4)
10. [Conclusion](#conclusion)

## Introduction

This blog shows how to set up GA4 on top of existing Google Analytics. It will also configure the default page view event tracking.

## Google Analytics Admin UI

After logging in to Google Analytics, go to the Admin section and create a new property under your current site's account.
![Setup GA4](/images/setup-ga4/img1.png)

## Get Started with GA4

![Get Started with setup GA4 Property](/images/setup-ga4/img2.png)

## Create Property

![Create Property for GA4](/images/setup-ga4/img3.png)

## Install Data Stream

After creating a new GA4 property, based on the Setup Assistant, you can install the default tracking.
![Install GA4 to your Site](/images/setup-ga4/img4.png)

## Data Streams

At the Data Streams section, you can configure it to connect to your existing Google Analytics without doing any additional configuration.

For instance, if the existing site is using the old Google Analytics code below to track the page view, you can still go to the screen below to configure GA4.
```
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
    ga('create', 'UA-{track id}', 'auto');
    
    ga('send', 'pageview');
```
![Connect GA4 Data Streams with Existing Analytics](/images/setup-ga4/img5.png)

## Setup GA4 with Google Analytics

![Setup GA4 with Existing Google Analytics](/images/setup-ga4/img6.png)

## Old Google Analytics Configured with gtag

There are a few scenarios with GA4 and existing Google Analytics. One is when the existing GA is using gtag with Google Tag Manager.
```
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-133754662-2');
```

For this scenario, if you configure GA4 with existing Google Analytics, when you load the page you'll see the following requests sent as page views. You should be able to see two requests: one is `collect?v=1` and another is `collect?v=2`. One is for the old Analytics and the other fires the new GA4 page view events.

![Google Analytics with GA4 for page view](/images/setup-ga4/img7.png)

## How to Send Custom Events to Both Old Google Analytics and GA4

With the same configuration as above, if you run the following code, you should see two requests fire from your browser.

```
gtag('event', 'test click', { event_category: 'test section', 'event_label': 'test label', 'value': 5});
```

![Custom Events with Google Analytics and GA4](/images/setup-ga4/img8.png)

Check the `collect?v=1`, which is for the old Google Analytics:
```
v: 1
_v: j96
a: 1317303408
t: event
_s: 2
dl: http%3A%2F%2Flocalhost%2Fposts%2Fsetup-ga4-with-existing-universal-analytics
ul: en-us
de: UTF-8
dt: Setup%20GA4%20with%20existing%20Google%20Universal%20Analytics
sd: 24-bit
sr: 2560x1440
vp: 1351x391
je: 0
ec: test%20section
ea: test%20click1
el: test%20label
ev: 5
_u: SACAAUABAAAAAC~
jid: 493718282
gjid: 1617926160
cid: 560151159.1649313427
tid: UA-133754662-2
_gid: 448660023.1649313427
_r: 1
gtm: 2ou3u0
z: 918613138
```

Check the `collect?v=2`, which is for GA4:

```
v: 2
tid: G-LV51V3774K
gtm: 2oe3u0
_p: 1317303408
sr: 2560x1440
_z: ccd.AAB
ul: en-us
cid: 560151159.1649313427
_s: 3
dl: http://localhost/posts/setup-ga4-with-existing-universal-analytics
dr: http://localhost:3000/
dt: Setup GA4 with existing Google Universal Analytics
sid: 1649489401
sct: 1
seg: 1
en: test click1
_et: 6212
ep.event_category: test section
ep.event_label: test label
epn.value: 5
```

## Conclusion

As you can see, this is how you can send custom events to both GA4 and old Google Analytics. By configuring GA4 alongside your existing Universal Analytics, you can track page views and custom events in both systems simultaneously without significant code changes.


Steps to set up a GA4 property with your existing Google Universal Analytics, including configuring page view and custom event tracking.