Technical Guide to Global Site Tag ( gtag.js )

Table of Contents

Global Site Tag was introduced by Google back in October 2017. As the name suggests it was launched in order to unify all the different tracking libraries that we can use for Google Products, Adwords, Google Analytics, DoubleClick, etc.

In my opinion the launch of APP+WEB Properties has set an inflexion point about the gtag.js use, since it's now when it is really coming into the scene, and it's just for a simple reason: before APP+WEB it was just a duplicate library not offering anything extra from the legacy libraries, meaning that there wasn't a real reason to move on into Global Site Tag tracking. But now Google launched the first product's JS library 100% based on GTAG.js, it makes the perfect moment to explain how it works :)

What's the Global Site Tag?

It's an API and a tagging platform for all Google Products ( Google Analytics, Google Ads, Google Marketing Platform, APP+WEB ), which will help us to have an standarized implementation that will be able to work with any products.

It's based on a list of predefined events ( "purchase", "page_view", "add_to_cart" , etc ),

This means that we'll just need to setup a "purchase" event and all the transactional data could be sent to Adwords Conversion Pixel, to Google Analytics or to other any supported tool.

For this task Google has pre-defined a list of events, each of them supported a predefined parameters, and GTAG.js will take care of mapping this event data to any of the supported products by Global Site Tag at our convenience.

How do I Add GTAG to my site

It will be as simple as adding the following snippet to our site, preferible before closing the </head> tag.

<script async src = "https://www.googletagmanager.com/gtag/js?id={{TRACK_ID}}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
gtag('js', new Date());
gtag('config', '{{TRACK_ID}}');
</script>

Of course we gonna need to update the {{TRACK_ID}} with the proper value.

How does GTAG know where to send the data?

GTAG.js will now where it needs to fire the data because of the {{TRACK_ID}} value. Each of the Google Products "TrackID"s start with a prefix will tells google server with code to provide.

For example if we're setting up a Google Analytics tracking, the {{TRACK_ID}} will start with a "UA-" prefix.

I'm attaching a table with the current possible values

*Prefix*	*Tool Name*	*Track ID Name*
AW-	AdWords	Conversion ID
DC-	Double Click	Advertiser ID
UA-	Universal Analytics	Property ID
G-	APP+WEB	Measurement ID

Then we'll have the 'config' events where we'll sending the initializacion and extra parameters.

For example if we want to enable the cross-tracking for our Universal Analytics setups we'll be using the following

gtag('config', 'UA-XXXXXXX-Y', {
  'linker': {
    'domains': ['domain.com']
  }
});

Then if we want to setup a Universal Analytics pageview tracking + Adwords Remarketing ( both firing for all pages ) >

    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-XXXXXXX-Y');
    gtag('config', 'AW-1231231231');

GTAG will know that we want to send the information to Adwords and Google Analytics and will take the stuff from here and fire everything for us. For example if we send a purchase event, it will send a transaction to Google Analytics and a conversion to Adwords

How does it internally works

GTAG.js is backed up using Google Tag Manager, maybe it's not an exact definition of what GTAG.js is, but I really feel that we could mostly think on it as a "predefined" container that supports all Google Products tags and that takes care of mapping the data to all of them in an automatic way. ( NOTE: this may be a way to simplistic way to define it, but hope you get the idea )

Since it relies on GTM code, and henceit has a dataLayer ( which will be shared with GTM if the site is using it also ), and that's why you find sites not using Google Tag Manager and still having a dataLayer variable and even some of the default events like the gtm.dom and gtm.load.

Let's take a look to the window.gtag function:

function gtag() {
 // Takes all Arguments and push them back to the dataLayer
 dataLayer.push(arguments);
}

Yep, it's just a proxy, any parameters you send to gtag are pushed back to the dataLayer as an Arguments variable.,

Arguments Type Object is an Array like variable that is only avaiable within the function internal scope and that holds a list of all parameters being pass to the function.

Despite all these technical definitions, and just get the point all the data passed to gtag() function it's forwarded to the dataLayer as an Array

Let's check the following flow to understand how it works

Did you know that you can tell GTAG.js to use an specific dataLayer name instead of the default one? , just ad a "l" (it's a lowerCase "L") parameter to you loading script

<script async src = "https://www.googletagmanager.com/gtag/js?id={{TRACK_ID}}?dl=myOwnDataLayerVariableName"></script>

Which events are currently supported by GTAG.js

I tried to build a list with all the events I was able to ( as 15th Auh 2019 ), but please take in mind that this list may be missing some of them, and that Google is likely going to add new ones in the future. Refer to official documentation for more curated data.

Event	Category	EEC Data	Non-Interactional	Parameters
*add_payment_info*	ecommerce	No	No
*add_to_cart*	ecommerce	Yes	No	value currency items
*add_to_wishlist*	ecommerce	No	No	value currency items
*begin_checkout*	ecommerce	Yes	No	value currency items coupon
*checkout_progress*	ecommerce	Yes	No	value currency items coupon checkout_step checkout_option
*exception*	errors	No	No	description fatal
*purchase*	ecommerce	Yes	No	transaction_id value currency tax shipping items coupon
*refund*	ecommerce	Yes	No	transaction_id value currency tax shipping items
*remove_from_cart*	ecommerce	Yes	No	value currency items
*set_checkout_option*	ecommerce	Yes	No	checkout_step checkout_option
*generate_lead*	engagement	No	No	value currency transaction_id
*login*	engagement	No	No	method
*search*	engagement	No	No	search_term
*select_content*	engagement	Yes	No	items promotions content_type content_id
*share*	engagement	No	No	method content_type content_id
*sign_up*	engagement	No	No	method
*view_item*	engagement	Yes	Yes	items
*view_item_list*	engagement	Yes	Yes	items
*view_promotion*	engagement	Yes	Yes	promotions
*view_search_results*	engagement	No	Yes	search_term
*page_view*	enhanced measurement	No	No	page_title page_location page_path
*screen_view*	enhanced measurement	No	No	screen_name app_name app_id app_version app_installer_id
*scroll*	enhanced measurement	No	No	percent_scrolled
*click*	enhanced measurement	No	No
*timing_complete*	timing	No	Yes	name value event_category event_label

Hope this post helps you to lose some fear to the GTAG.js and helps you understand how face your upcoming APP+WEB implementations with some more background about how things work :)