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. 

Step #8 - Copy Measurement ID
Copy GA4 Web Stream 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”.

Adding GA4 Measurement ID into Universal Analytics
Adding GA4 Measurement ID into Universal Analytics

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

Browser with opened Google Analytics 4 Realtime Report
Google Analytics 4 – Realtime Report

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! 


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.

Can I use GTAG.js with GA4?

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.

Can I use Analytics.js with GA4?

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!”

What is GTAG.js used for?

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.

Should I use GTM or GTAG.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.

Can I use both GTAG.js and GTM?

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. 

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

4 Replies to “How to use GTAG.js (global site tag) for Google Analytics 4 ”

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

Leave a comment

Your email address will not be published. Required fields are marked *

Leave a Comment

Your email address will not be published. Required fields are marked *

[custom_comment_form]