
This blog show how to add user properties to Google Analytics 4, aka GA4, will demo how to use `gtag` or use google tag manager to archieve this, also at each way will show how the actual user properties data show on big query for ga4.

## pre requirement

This blog already your website already setup with ga4 with google tag manager, and `gtag` and `dataLayer` global variables are available at your page.

- website is setup with ga4.
- `https://www.googletagmanager.com/gtag/js` is loaded.

## How to use `gtag` to add user properties

Here we'll start how to use `gtag` to add user properties to GA4, and will verify at Big Query as well.

Following is an example code snippet which will fire ga4 event with user properties, the first line of code is set the user_properties with the key as `favorite_color`, this `favorite_color` we assume is some user specificy related to your site and you want to update to the event you sent to ga4, so we set the `favorite_color` as blue, so the next line is send ga4 event `test_up_data1` to the ga4.

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

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

How does above show at the Big Query table? You can see in the Big Query table we can see the event we just fire from our browser had received by Big Query, and the user_properties has `favorite_color` and the value exist. Also you notice the page_view and user_engagement event doesn't have that value. These two events are fire by ga4 and automatically collected.
![send ga4 user_properties and big query](/images/send-user-properties/img2.png)

Now, if you run the same code again at this browser, you'll notice the browser is firing the event but without the user properties `favorite_color` fields.

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

This is the big query result after we made the second gtag request from the browser, although we had the set with the user properties but no user properties had add to the same event.
![big query with user properties](/images/send-user-properties/img3.png)

### Configure Custom definitions for User Properties

Not sure why use the `gtag` with `set` the user properties has above weird behavior, which only the first event sent to Big Query will has the user_properties, but looks like we need to configure the user property at the GA4 property's `Custom definitions` section.

Following is how we configure the user property at `Custom definitions`, as you can see below we create dimentions name `favorite_color` and the Scope as `User`.
![Config Custom Dimentions for User Properties](/images/send-user-properties/img4.png)

After set the custom dimentions at GA4 property, it might take sometime then the result will affect, but we did following test as result. The `user_pseudo_id` is session store at the ga4 BQ table, you can we load the page then the browser fire few events `first_visit`, `scroll`, `session_start` and `page_view`, and all of them doesn't have the `favorite_color` at the user_properties table, after page load we fired few same event `test_up_data1` few times, and you can see they all have the `favorite_color` record.

The next is, you can see we fire the `test_up_data` which contains the `favorite_color`, then we also fire another event `test_up_data2` and you can notice this custom event also contains the user properties `favorite_color`, so looks like after we user `gtag` to `set` the user properties with the configuration at the GA4 property, any custom event after the `set` will also fire the same user properties, which make sense that'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 did another test as below, you can see we start a new session, since the `user_pseudo_id` changed, when we first load the page, you can see the `page_view`'s user_properties is empty, but once we manully run the code above, you can start seeing event with `favorite_color` user properties filled into the automatical collected events, also any other event will also include the same user properties as well, in addition, you can see we load the page again with the same session and the user properties still contains the same `favorite_color` value.
![User Properties at Big Query](/images/send-user-properties/img6.png)

### GTAG Sample Code

Following is the sample of above code, once you click the button, the subsequent event include page_view will also include the user property `favorite_color`. Also, you need to add `favorite_color` to the custom dimention at 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 doesn't contains the user_properties

There's one issue with above code, if you start the page from new session, the page view events doesn't contains the user_properties we have earlier. To solve this we can use dataLayer along with user property at 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 later create a user property `favorite_color` at the GA4's configuration.
![GA4 Configuration - User Properties](/images/send-user-properties/img7.png)

Now, we just need to add the code to the page during the page load. Also, make the below code 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 are user property, then following below code looks like will be correct implementation.

- create custom dimension at GA4 property, set the type as user
- create dataLayer variable for your property
- create GA4 configuration and set the dataLayer as user property
- at the code, set the dataLayer value before the gtm script
  Now, page view and any subsequent events's user_properties should contain the your new user property type.


User scoped custom demensions in GA4, this blog show how to set user properties in GA4 by using gtag or google tag manager.

How to Set User Properties in GA4


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

GA4 has its few

## client_id

stored as part of first-party analytics cookie for 2 year, use for 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`. Big Query column is `user_pseudo_id`, also the cookie `_ga` value will be update to GA.1.1.`123456`.
Update this value, the subsequence request will always set the same value since cookie updated.

## language

by default using the window object's `nagigator.language`'s 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`. BQ column is `device.language` will be update to `en-ca`. The navigator.language won' update.

## page_location

By default using the window object's `document.location`'s value, not sure what condition need to update 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`. BQ column is `event_params.page_location` will be update to `/test2`.

## page_referrer

By default using the window object's `document.referrer`'s value, if is direct come to the site, `document.referrer` should be empty and BQ 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`. BQ column is `event_params.page_referrer` will be update to `https://technoapple.com`, because of `page_referrer` has value, `event_params` will add 2 more values, `medium` value is `referral` and `source` has value is `technoapple.com`.

## page_title

By default using the window object's `document.title`'s value, not sure what condition need to update 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`. BQ column is `event_params.page_title` will be update to `my title`.

## user_id

The user's id provide 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`. BQ column is `user_id` will be update to `123`. Once this value is set subsequent gtag request will always contains user_id as `123`.

## user_properties

Additional user preference information, update to 25 additional user properties. name max is 24, value max is 36.

```
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 start with `up`, e.g. `up.data1`. BQ column is `user_properties`, it should contains the object `data1` and value `1 data`.

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


View Simple Steps to Setup Google Universal Analytics at Your Web Site.

About GA4 Configuration fields

# About Universal Analytics

This page is showing example of how to setup Universal Analytics for learning purpose, please be aware the Google Universal Analytics will no longer process new data beginning July 1, 2023. You'll have to switch to Google Analytics 4 Property.

## Create GA4 Property
At here, we'll try to create GA4 property, if you have existing account with the old Universal Analytics you can use the same account and create a new property and use the GA4 Setup Assistant to setup GA4.
![GA4 Setup Assistant](/images/setup-ga4-with-gtm/img4.png)

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

Click Create Property to create new GA4 property. Once create a GA4 property make a note for the mesurement ID, because we'll need later the value to add to the 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 instruction to use the code snippet and add back to your site. Once add Google Tag Manager code to the site, later we can configure additional tags or scripts to load to the site.
Here add new tag and add the Google Analytics GA4 Configurations
![GTM - GA4 Configuration](/images/setup-ga4-with-gtm/img2.png)

## Add Google Analytics GA4 Configuration
Add the GA4 mesurement ID, so Google Tag Manager's GA4 configuration will connect to the new GA4 Analytic's 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 add before should be loading the script for the GA4 start collection default data and send to Google Analytics, such as page view.








Google Tag Manager provide easy way to setup Google Analytics 4, this blog provide steps to walk through how to setup GA4 via GTM.

How to Setup Google Analytics 4 with Google Tag Manager

# About Universal Analytics

This page is showing example of how to setup Universal Analytics for learning purpose, please be aware the Google Universal Analytics will no longer process new data beginning July 1, 2023. You'll have to switch to Google Analytics 4 Property.

## Why use dataLayer for GA4?

GA4 has different ways to fire events. Enhanced measurement events, which is build in events that will enable by options, then Recommended events, these events won't send automatically but will require some configuration or manual setup. Now, if the events you want to fire are not both of these scenario, you can create custom events and send to GA4. You can use `gtag` or `dataLayer` to send custom events. 

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

## Pre Requirement

This blog assume following task are already done on your site.
+ You have google tag manager already configure for GA4.
+ Your web site had load above GTM.
+ Your Google Analytics had link to Big Query.

## Goal
The goal we're trying to do is fire following dataLayer events, assume you have contact form at home page, you would like to try this data at GA4. For testing purpose we'll fire below events at console, but once we fire the events, we'll see how does it show at the browser, how to see events at GA4 UI and hwo data flow into Big Query.

```
// we wan't to fire this event when the user click the submit contact form button.
dataLayer.push({"event" : "contact_lead", "email": "test@test.com", "page": "home"});
```
If you just run the above Javascript at console, nothing will happen until you finish following setup at GTM.

## Create Triggers at GTM

At 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 variable so run above dataLayer will include the `email` and `page` fields.

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

## Crate Google Analytics GA4 Event
One created Triggers and Variable, we 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 2 more Event Parameters. Now the configuration for run above Javacript code is ready. 

## Choose the Triggering for GA4 Event
Now, the last part is add the trigger, as when above events should fire, so far we set all the custom events but you can filter to 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, you can preview and test the setting or just did and see if we can fire the events with GA4.

## Verify the code

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

After run the above code, take a look at the browser network tab, you should see some request start from `collect?v=2...`, this is GA4 request.

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

You can test by running following javascript code at console, so if the GA4 will include this data or not, which it will not include unless you configure the datalayer variable `data1` at 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 go to the GA4's realtime section and check the section for events, as you can see our `contact_lead` displays at the page, and you will see the email and page's key and value as well.
![GA4 UI](/images/setup-datalayer/img7.png)

## How about the Big Query?
If you connect the GA4 with Big Query, you should see the something `analytics_111111` and there's `events_intraday_`, that intraday will be a stream data coming from GA4, and you can see our contact_lead is writing to this table.

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

## Conclusion
GA4 provide `dataLayer` and `gtag` to fire custom events, if using `dataLayer` you will have to configure trigger and events at GTM, if follow the correct steps should be able to configure quick, but lots of configuration at GTM might not suitable for certain company's requirements.









Google Tag Manager provide easy way to setup GA4, and GA4 custom events. This blog provide steps to walk through how to setup GA4 custom events via GTM.

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


# Setup GA4
This blog show how to setup GA4 on top of the existing Google Analytics, will also configure the default page view event track.

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

## Get Started 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 create new GA4 property, base on the Setup Assistant you can install the default track.
![Install GA4 to your Site](/images/setup-ga4/img4.png)

## Data Streams
At the data stream, you can configure to connect to your existing GA without doing any additional configuration. 

For instance, the existing site is using below old Google Analytics to track the page view, but you can still go to below screen to configure to use 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 Configure use gtag
There's few scenarios with GA4 with existing google analytics, one is 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, and if you configure GA4 with existing google analytics, when you load the page you'll see following request sent as page view.
You should be ble to see 2 request, one is collect?v=1, another is collect?v2, which one is old analytics and another is fire 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 following code, you should see 2 request 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 the old GA 4.

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

As you can see, this is how you can sent custom events to both GA4 and old Google Analytics.

Steps to setup GA4 property with your existing Google Universal Analytics.

Category GA4

How to Set User Properties in GA4

About GA4 Configuration fields

How to Setup Google Analytics 4 with Google Tag Manager

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

Setup GA4 with existing Google Universal Analytics