In the next few lines, I will go over 4 advanced concepts that I think are a great example of what Google Analytics in a combination with Google Tag Manager can do. Additionally, by understanding these concepts I was able to better utilise these technologies and generally elevate my knowledge in the area.

1 – Orchestrating Tag or Custom JavaScript variable execution via callback function.

Callback as a concept is popular and applicable across any programming language in general. It’s basically a piece of code that is pushed as an argument to a function. When the function has completed, that piece of code (the callback) is executed.

For web analytics in particular, callbacks can be applied to orchestrate a firing order for the asynchronous tags on page or execute Custom JavaScript variables exactly when you need them. My experience is mainly around Google Analytics specific situations, where the built-in features of analytics.js and gtm.js were handy. The core-functionality that allows tag sequencing in GTM is based around callback functions and also the hitCallback feature of GA/GTM that allows you to execute Custom JavaScript variables and set them as parameters via the “fields to set” section of the tags as well.

Some use-cases where I used custom orchestration:
– Custom tag sequencing. I’ve written about the specifics around Custom HTML Tags in this post
– Execute a function that sets a cookie through a Custom JavaScript variable as a callback on the successfull completion of a transaction tag.

Here are some additional resources on this topic:
Callback Function Definition
Google Analytics – hitCallback
Google Tag Manager – Fields to set (hitCallback) – Advanced Section

2 – Working with Cookies.

Directly following up on the last example from above, let’s talk about cookies. Cookies in web terms are essentially a small text file that is stored in the user’s computer either temporarily or permanently. Cookies provide a way for the website to recognize the users and keep track of their preferences. In Google Tag Manager, you can use Custom JavaScript variable or Custom HTML Tag to create and update cookies, which can be used in multiple use-cases.
However, it is worth mentioning that with each new cookie added, the terms & privacy policies on the website you are adding them to needs to be updated, also make sure the data stored is aligned with regulations such as GDPR.

Here are some occasions where I’ve dropped some cookies:
– Prevent duplicate transactions on an e-commerce store, when doing that server-side is not an option.
– Surface information that is used for website personalisation
– Surface information to score user sessions, based on specific on-site interactions and behaviour

And here are some resources that I found useful when working with cookies:
Everything to know about the cookie synthax
GTM 1st Party Cookie Variable

<script>
function createCookie(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        expires = "; expires="+date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name+"="+value+expires+"; path=/";
}
createCookie("myCookie", "somevalue", 30)  
</script>

3 – Utilisation of custom data transport mechanisms.

The analytics.js library allows the use of the navigator.sendBeacon() method, which means that you can asynchronously transfer small beacons of data from the user’s browser to the /collect endpoint using a POST request. When you are passing an event data, for example, using this advanced transport mechanism will allow the data to be send too Google Analytics even if the user left the page to early, or even closed the browser window.

This feature, however, lacked some browser support, but recently things started to pick up and it looks promising. I’ve written a few lines on the topic in this post

The main use-case I found applying this concept was the given example above:
– transporting event data based on the completion of a form, where the page was re-directing too quickly for the hit to be sent to GA.

Some documentation around this topic can be found here:
Beacon API Documentation
navigator.sendBeacon() method Documentation
GA – Transport Mechanisms Documentation

4 – Using customTask to customize how analytics.js validates, constructs, and sends measurement protocol requests.

When the send command is called, either via a hard-coded GA implementation or via Google Tag Manager templated GA tag, what happens behind the curtains is a HTTP request that analytics.js compiles and sends to the Google Analytics servers. Each request is constructed via the measurement protocol mechanism and the whole process consists of a number of tasks where the customTask is the first one that is executed.

A full list of those tasks and further documentation on the library can be found here

Each task is implemented as a JavaScript function which takes a single model parameter as input. The model is a simple object that provides access to any of the fields defined in the library. The fact that customTask is executed first means that you can replace or change completely the behaviour of the other functions, using the get and set methods provided.

Here is some further reading on the Model Object

I’ve used customTasks for:
– Setting a Client-ID as a Custom Dimension
– Removing PII mid-hit

For further reading, Simo Ahava has both of those cases covered quite extensively here and here.

Conclusion

Using these concepts, sometimes even in a combination for specific solutions, extends what is available out of the box from Google Analytics and Google Tag Manager and really shows that anything is achievable when it comes to data collection and on-page tag management. I am still exploring the technologies with every project I work on and I am still on the look for other edge cases where an unusual solution is required! Pushing to the limits of any technology stack is the best way to learn.