Skip to content
ANALYTICS

Technical Guide to Global Site Tag ( gtag.js )

David Vallejo
Share

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

PrefixTool NameTrack ID Name
AW-AdWordsConversion ID
DC-Double ClickAdvertiser ID
UA-Universal AnalyticsProperty ID
G-APP+WEBMeasurement 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

GTAG.JS WORKING FLOW

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.

EventCategoryEEC DataNon-InteractionalParameters
add_payment_infoecommerceNoNo
add_to_cartecommerceYesNovalue
currency
items
add_to_wishlistecommerceNoNovalue
currency
items
begin_checkoutecommerceYesNovalue
currency
items
coupon
checkout_progressecommerceYesNovalue
currency
items
coupon
checkout_step
checkout_option
exceptionerrorsNoNodescription
fatal
purchaseecommerceYesNotransaction_id
value
currency
tax
shipping
items
coupon
refundecommerceYesNotransaction_id
value
currency
tax
shipping
items
remove_from_cartecommerceYesNovalue
currency
items
set_checkout_optionecommerceYesNocheckout_step
checkout_option
generate_leadengagementNoNovalue
currency
transaction_id
loginengagementNoNomethod
searchengagementNoNosearch_term
select_contentengagementYesNoitems
promotions
content_type
content_id
shareengagementNoNomethod
content_type
content_id
sign_upengagementNoNomethod
view_itemengagementYesYesitems
view_item_listengagementYesYesitems
view_promotionengagementYesYespromotions
view_search_resultsengagementNoYessearch_term
page_viewenhanced measurementNoNopage_title
page_location
page_path
screen_viewenhanced measurementNoNoscreen_name
app_name
app_id
app_version
app_installer_id
scrollenhanced measurementNoNopercent_scrolled
clickenhanced measurementNoNo
timing_completetimingNoYesname
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 🙂