How to Set User Properties in GA4

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.

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.

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.

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.

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.

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.

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.

Here, we define a dataLayer variable as favorite_color, then later create a user property favorite_color at the GA4's configuration.

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.