Share
Contents
On July 1st, 2023, Universal Analytics will stop processing new hits. Thus, you must install Google Analytics 4 for your website or application as soon as possible to optimise your product moving forward. There is excellent news for users who used GTAG.js for Google Analytics! You can also use the global site tag for GA4. That means you can spend a lot of time and resources optimising your business instead of adding new tags via Google Tag Manager or asking the developers to rewrite all codes on your website to the new format.
In this article, I’ll quickly overview what changes you need to make to use GTAG.js for GA4.
First, let’s start with the GTAG.js definition and how to understand it if you use it on your website.
What is GTAG.js?
According to Google, GTAG.js is a framework based on javascript that allows you to send events to different Google products such as Google Analytics 4, Universal Analytics, Google Ads, Google Marketing Platform and so on.
Google created this library in late 2017. If you started to use Universal Analytics in 2018 or after, you are using global site tracking. If you started to use Google Analytics before 2018, there is a high probability that you are using analytics.js. Analytics.js is the former version.
To check what version of the code you are using, go to your website and, using the developer tool (right mouse button -> view page source), check if you see one of the codes below on your website.
Analytics.js code
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'TAG_ID', 'auto');
ga('send', 'pageview');
</script>
GTAG.js code
<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>
If you found GTAG.js code on your website, you should change just a few lines of code to send events to Google Analytics 4 as well. Unfortunately, if you found that you have Analytics.js code, there are two ways to upgrade to Google Analytics 4. The first is by activating the GA4 feature and or by setting up everything through Google Tag Manager.
Variant 1: How to use GTAG.js for GA4 without changing the code on the website?
Once you understand that you are using GTAG.js for Universal Analytics, you can go to Google Analytics 4 – Data Streams – Web Stream Details and copy your measurement id.
After you copy it, you should go to your Universal Analytics account – Admin – Tracking Info – Tracking code – Connected Site Tags and add your copied measurement id into “Enter ID of tag to connect” and click “Connect”.
When you make these steps, your Universal Analytics and Google Analytics 4 properties will be connected, and GA4 will start to receive the first events.
It’s the first and easiest way to migrate to Google Analytics 4 using GTAG.js.
Variant 2: How to adjust GTAG.js to send events into GA4?
Now, according to our plan, let’s discuss the second method. It’s based on adding an additional line of code after “gtag(‘config’, ‘TAG_ID’);” which will look the same but contains GA4 property id.
You can find your measurement id following this path: GA4 -> Admin -> Data Streams -> Web Stream Details -> Measurement ID.
The final code should look like this below, and it will send events into Universal Analytics and Google Analytics 4 altogether. If you want to send events only to GA4, you should remove the UA config line.
GTAG.js code sending data to GA4
<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', ‘UA-XXXXXXXX‘); // Universal Analytics Property ID
gtag('config', ‘G-XXXXXXXX‘); // Google Analytics Measurement ID
</script>
Variant 2: How to change GTAG.js to send enhanced e-commerce data into GA4?
If you have an e-commerce business and want to send e-commerce data to Google Analytics 4, you need to duplicate your existing GTAG.js code, change parameter names and add one extra line of code. This way you will send the same data into two properties: Universal Analytics and Google Analytics 4. If you want to learn about enhanced e-commerce tracking with GTAG.js, you can read my other article about that.
Old GTAG.js code sending E-commerce data to Universal Analytics
gtag('event', 'purchase', {
"transaction_id": "24.031608523954162",
"affiliation": "Google online store",
"currency": "USD",
"shipping": 7.50,
"tax": 1.80,
"value": 33.30,
"items": [
{
"id": "P12345",
"name": "Android Warhol T-Shirt",
"brand": "Google",
"category": "Apparel/T-Shirts",
"variant": "Black",
"list_name": "Search Results",
"list_position": 1,
"quantity": 2,
"price": 12.00
}
]
});
New GTAG.js code sending E-commerce data to Google Analytics 4.
gtag('event', 'purchase', {
"send_to": "GA4",
"transaction_id": "24.031608523954162",
"affiliation": "Google online store",
"currency": "USD",
"shipping": 7.50,
"tax": 1.80,
"value": 33.30,
"items": [
{
"item_id": "P12345",
"item_name": "Android Warhol T-Shirt",
"item_brand": "Google",
"item_category": "Apparel/T-Shirts",
"item_variant": "Black",
"quantity": 2,
"price": 12.00
}
],
});
Once you add everything, your Google Analytics 4 property starts to receive the data. Please remember that the best way to check if your GA4 receives data is to use a real-time report (GA4 -> Report -> Realtime).
Final Word
Universal Analytics will stop processing new hits in 2023. If you use GTAG.js for Universal Analytics, you are in a better position. You can use the connected tags feature in Universal Analytics or adjust the website code slightly, spending up to 20 minutes and enjoy using Google Analytics 4.
Please let me know through the form on this page if you need help switching from Universal Analytics to Google Analytics 4. I will be happy to assist you!
According to Google, GTAG.js is a framework based on javascript that allows you to send events to different Google products such as Google Analytics 4, Universal Analytics, Google Ads, Google Marketing Platform and so on.
Yes! If you use GTAG.js for Universal Analytics, you can use it for Google Analytics 4. The setup won’t take more than 5 minutes; you need to combine UA and GA4 properties or add just one additional line of code in GTAG.js.
Yes, you can use analytics.js codes for Google Analytics 4. In order to learn more, feel free to read my blog “Analytics.js + GA4. It’s possible!”
GTAG.js library sends data to multiple Google products. Some are Google Analytics 4, Universal Analytics, Google Ads, and Google Marketing Platform. You improve the website page load speed when you use GTAG.js instead of Analytics.js.
I recommend you use GTM instead of GTAG.js. Your marketers can make changes quickly and track many things without relying on engineering help every time.
Yes, you can use GTAG and GTM altogether. However, it’s not the best way to use these solutions. We recommend that you use only one of them to avoid duplication of events and page views in Google Analytics 4.
You Might Also Like
Written By
Ihar Vakulski
With over 8 years of experience working with SaaS, iGaming, and eCommerce companies, Ihar shares expert insights on building and scaling businesses for sustainable growth and success.
KEEP LEARNING
Investors in Property are the leading international agency specialising in the sales and marketing of ski property in the Alps. We have been selling ski…
Easypractice.net is an online booking software to organise your business. Specifically tailored toward practitioners and specialists, EasyPractice has helped over 20,000 customers simplify their day-to-day…
Leave a Comment
Your email address will not be published. Required fields are marked *
Stay Updated About Every New GA4 Feature
Subscribe to this newsletter to learn more about new Google Analytics 4 features and adjustments.
No SPAM and only relevant content guaranteed!
4 Replies to “How to use GTAG.js (global site tag) for Google Analytics 4 ”
Great post,
For ‘GTAG.js code sending data to GA4’ the code comment should be // Google Analytics Measurement ID.
As opposed to // Google Analytics Property ID.
Hi Joshua,
Thank you very much for noticing it. I adjusted it.
Should I use measurement Id in above line inplace of TAG_ID?
Yes, TAG_ID = measurement ID.