As a developer, learn what you need to know about the new switch to GA4.
According to Level Up Coding:
On July 1, 2023, standard Universal Analytics properties will stop processing new events. If you still rely on Universal Analytics, it’s time to start thinking about migrating to Google Analytics 4 (GA4).
GA4 is a new version of Google Analytics that offers several new features, including enhanced privacy controls, improved cross-device tracking, and a more user-centric approach to data collection.
In this article, I’ll guide you on how to migrate from Universal Analytics to GA4 and show the most important code snippets to ensure a smooth transition.
Step-by-step migration from Universal Analytics to Google Analytics 4
The first step in migrating from Universal Analytics to GA4 is to create a new GA4 property in your Google Analytics account. You can create a new GA4 property alongside your existing Universal Analytics property, which can run simultaneously.
Once you have created the new property, you need to update your website’s tracking code to send data to GA4. The tracking code for GA4 is different from Universal Analytics, requiring a new set of code snippets.
To use GA4, you will need to include the GA4 tracking code on every page of your website, just like Universal Analytics. GA4 uses the global site tag (gtag.js) library to collect data, which can be added to your website using a script tag. The gtag.js library also supports other tracking technologies, such as Google Ads and Tag Manager. To include the gtag.js library, add the following code snippet to the head section of your website:
Replace GA_MEASUREMENT_ID with your GA4 measurement ID, which you can find in the GA4 property settings.
If you see an old analytics.js code, you should remove it.
For example: script tag with src https://www.google-analytics.com/analytics.js or events like ga(‘create’, ‘TAG_ID’, ‘auto’) or ga(‘send’, ‘pageview’);
What about sites where more than one analytics is used? For example, GA4, together with Meta Pixel and Adobe Analytics. Loading each script for tracking users will impact site performance.
Google has a solution for this — Google Tag Manager (GTM). Which allows you to manage multiple tracking codes in one place.
Using Google Tag Manager, you can streamline your website tracking by adding only one script to your website instead of adding multiple tracking codes. You can also use Google Tag Manager’s advanced features, such as tag-firing triggers and custom variables, to better control when and how your tracking codes are used.
GTM can simplify your marketing team’s life, allowing them to add new events without asking developers for help.
To add GA4 to your website using GTM, you can follow these steps:
Create a Google Tag Manager account: If you haven’t already done so, create a new account in GTM and create a container for your website.
Install the GTM code on your website: Follow the instructions in Google Tag Manager to install the tracking code.
Create a new GA4 tag: In Google Tag Manager, create a new tag and select the “Google Analytics: GA4 Configuration” tag type. Enter your GA4 measurement ID and select the appropriate tracking settings.
Set up tag triggers: Create triggers to specify when the tag should fire, such as when a user clicks a button or submits a form.
Publish your tags: Preview them to ensure they’re working correctly, then publish them to your website.
In step 2, you need to add a Google Tag Manager script to make everything work on your site. Here is an example of what the GTM script looks like:
Replace “GTM-XXXXXXX” with your own Google Tag Manager container ID. But, of course, taking the latest script from the GTM console is better.
How to migrate events and goals from Universal Analytics to GA4 and track them
Events and goals are essential components of Google Analytics, allowing you to track user behavior and measure the effectiveness of your marketing campaigns. In GA4, events and goals are created and tracked using a new syntax different from Universal Analytics.
To create an event in GA4, you can use the gtag.js library to send the event data to Google Analytics. Here’s an example of how to send an event in GA4 using the gtag.js library:
gtag(‘event’, ‘click’, {
‘event_category’: ‘button’,
‘event_label’: ‘Contact Us’,
‘value’: 1
});
Earlier, it was something like this:
ga(‘send’, ‘event’, ‘category’, ‘action’, ‘label’, value);
To migrate goals from Universal Analytics to GA4, you’ll need to recreate them in the GA4 property settings. GA4 offers a more flexible and customizable approach to goals, allowing you to define custom conversion events and assign them to different conversion types.
If you need to track conversion goal events, now you need to call the event like this:
gtag(‘event’, ‘conversion’, {
‘send_to’: ‘GA_MEASUREMENT_ID’,
‘value’: 100,
‘currency’: ‘USD’,
‘transaction_id’: ‘1234abcd’
});
You can find more information about standard events in GA4 on the Google Analytics help center.
How to use GA4 without cookies
Nowadays, if your project targets EU or USA users, you need to notify them about cookies usage, explain clearly why you do it, and ask for their approval for this. It’s clear what to do if the user allows us to use cookies for tracking, but what should we (developers) do if the user rejects it?
There are several ways how we can use GA4 without cookies:
The first option is user data removal. GA4 lets you delete user data from Google Analytics when a user requests it. To use the user deletion API, you can use the following code snippet:
gtag(‘config’, ‘GA_MEASUREMENT_ID’, {
‘user_properties’: {
‘user_id’: null
}
});
In this example, we’re deleting the user_id property for the GA4 measurement ID. So GA4 will track everything as usual but not associate it with this person. If the user revisits your site in a day or from another device, you will track it as a new, unique user.
The second option is the new Consent Mode. Consent Mode allows you to control the tracking of user data based on their consent. To use Consent Mode in the EU, you’ll need to include a cookie consent banner on your website and give users the option to opt-in or opt-out of tracking. Here’s an example of how to use Consent Mode with a cookie consent banner:
if (/* user has opted-in */) {
gtag(‘consent’, ‘update’, {
‘ad_storage’: ‘granted’,
‘analytics_storage’: ‘granted’
});
} else {
gtag(‘consent’, ‘update’, {
‘ad_storage’: ‘denied’,
‘analytics_storage’: ‘denied’
});
}
If the user fully forbids to use of his cookies, you should set the following:
gtag(‘consent’, ‘update’, {
ad_storage: “denied”,
analytics_storage: “denied”,
functionality_storage: “denied”,
personalization_storage: “denied”,
security_storage: “denied”
});
In this case, GA4 will never touch the user’s cookies, but real-time data will not work. You will see analytics with some delay.
And there is a third, alternative way to track user behavior without cookies using the Measurement Protocol. The Measurement Protocol allows you to send data directly to GA4 using HTTP requests, bypassing the need for cookies. To send data to GA4 using the Measurement Protocol, you can use the following code snippet:
const measurement_id = G-XXXXXXXXXX;
const api_secret = <secret_value>;
fetch(https://www.google-analytics.com/mp/collect?measurement_id=${measurement_id}&api_secret=${api_secret}, {
method: ‘POST’,
body: JSON.stringify({
‘client_id’: ‘GA_MEASUREMENT_ID’,
‘events’: [{
‘name’: ‘page_view’,
‘params’: {
‘page_title’: document.title,
‘page_location’: window.location.href,
‘page_path’: window.location.pathname
}
}]
})
});
Where query parameters are:
api_secret – Required. An API SECRET generated in the Google Analytics UI. To create a new secret, navigate to:
Admin > Data Streams > choose your stream > Measurement Protocol > Create
measurement_id – Required. The measurement ID is associated with a stream. Found in the Google Analytics UI under:
Admin > Data Streams > choose your stream > Measurement ID
This alternative method can be used on the back-end as well. Read more about HTTP API in GA4 documentation.
What is Ads Personalization in GA4? Do we need it? How to disable it?
Ads Personalization is a new feature in GA4 that allows you to collect data about users’ ad interactions and personalize their ad experiences. Ads Personalization is enabled by default in GA4, but you can disable it if it’s irrelevant to your business or violates local data privacy regulations.
To disable Ads Personalization in GA4, you can use the following code snippet when you init GA:
gtag(‘set’, ‘allow_ad_personalization_signals’, false);
You can also disable Ads Personalization in the GA4 settings.
Google Account page => Data and privacy in the left-sidebar => In the Ad settings, click on Ad personalization => Under Ad personalization, turn off the toggle next to Ad personalization is On.
That’s it! With the step-by-step guide and code snippets in this article, you can ensure a smooth transition to GA4 and take advantage of its new features, such as Consent Mode, flexible goal tracking, and even tracking without gtag script at all. Additionally, complying with local data privacy regulations, such as GDPR and CCPA, can be easily achieved using the tools and features provided by Google Analytics.
Original Source – https://levelup.gitconnected.com/ga4-the-new-standard-for-web-tracking-a-guide-for-developers-cce2dece8ce7
