"Web analytics is the measurement, collection, analysis, and reporting of web data for purposes of understanding andoptimizing web usage. However, Web analytics is not just a process for measuring web traffic but can be used as a toolfor business and market research, and to assess and improve the effectiveness of a website."Source
so web analytics enables you to:
- connect your user behavior with technical insights.improve your customer experience, by understanding your users and where they might get stuck.track the value of expenses through user conversions.learn to know your target group and how you can reach them....
Due to these facts, more than 50 million websites/web apps around the world use analytics tools like Google Analytics.Most of these tools use cookies to track user behaviors. If you live in Europe you probably have heard of theGDPR, the regulation in EU law on data protection and privacy.Due to the GDPR, it is no longer easy to use cookies for web analytics. I am neither a lawyer nor I want to go intodetail here. If you want to know more about it and be secure you have to talk to a lawyer. Google also provides awebsite with information about it.
But I can help you learn how to use Google Tag Manager and Google Analytics without cookies.
Google Tag Manager
Google Tag Manager is a free tool, which allows you to manage and deploy marketing/analytics tags (snippets of code) onyour website/web app. These Tags can be used to share information from one data source (e.g. your website) to anotherdata source (e.g. Google Analytics).
The key components of Google Tag Manager are Tags, Triggers and Variables.
Tags are snippets of code, which tell Google Tag Manager what to do. Examples of Tags are Google Analytics, GoogleAdwords, Facebook Pixel.
Triggers are the way events are handled. They tell Google Tag Manager what to do and when to do it. Examples ofTriggers are page view, window.loaded, clicks, Javascript errors, or custom events (Javascript functions).
Variables are additional information for your Tags and Triggers to work. Examples are DOM elements, click classes,click text.
Google even has a video series on how to get started with Google TagManager.
Purpose
I write this tutorial because I saw a gap in the documentation of Google Tag Manager and how to use it without cookies.The Google Analytics documentation already includes exampleson how to use Google Analytics without cookiesbut not for Google Tag Manager.
Google Tag Manager has different attribute keys when using the Tag Google Analytics than using Google Analyticsstandalone. In Google Analytics you have the attribute clientId and in Google Tag Manager you have the attributeclient_id.
Google is providing alist of these field mappings but thelist is missing the important attribute mapping for storage, which is needed to prevent the creation of cookies.
Tutorial
In this tutorial, we use Google Analytics as a Tag. Before we get started make sure you have a validGA_MEASUREMENT_ID. I assume that you have already worked before with Google Analytics and you are therefore familiarwith the terminologies used.
In their"getting started with Google Tag Manager" Gooogleprovides a snippet, with which you initialize Google Tag Manager with Google Analytics as Tag. But this would createcookies for it.
<!-- Global site tag (gtag.js) - Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script><script> window.dataLayer = window.dataLayer || [] function gtag() { dataLayer.push(arguments) } gtag('js', new Date()) gtag('config', 'GA_MEASUREMENT_ID')</script>To initialize Google Tag Manager without cookies, we only need to add two attributes to 'config'.
<!-- Global site tag (gtag.js) - Google Analytics with out cookies --><script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script><script> window.dataLayer = window.dataLayer || [] function gtag() { dataLayer.push(arguments) } gtag('js', new Date()) gtag('config', 'GA_MEASUREMENT_ID', { client_storage: 'none', client_id: CLIENT_ID, })</script>The only issue we face without cookies is that we need to save the client_id somewhere. Normally the client_idissaved in the cookie. To overcome this we save the client_id in window.localstorage. We also need to create thevalues of the client_id.The client_id is basically the device id.
We can use any value for the client_idbut to be sure we wont get any duplicates we use auuid` for this.
Below, you find a complete example, which generates a uuid for the client_id save it in window.localstorage andinitializes Google Tag Manager.
<!-- Global site tag (gtag.js) - Google Analytics with out cookies --><script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script><script async src="https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/uuidv4.min.js"></script> <script> // https://developers.google.com/tag-manager/devguide window.dataLayer = window.dataLayer || [] function gtag() { dataLayer.push(arguments) } gtag('js', new Date()) // defines window.localstorage key const GA_LOCAL_STORAGE_KEY = 'ga:clientId' // checks if localstorage is available if (window.localStorage) { // checks if user was already connected and loads client_id from localstorage if (localStorage.getItem(GA_LOCAL_STORAGE_KEY)) { // creates new tracker with same client_id as the last time the user visited gtag('js', new Date()) gtag('config', 'GA_MEASUREMENT_ID', { send_page_view: true, client_storage: 'none', client_id: localStorage.getItem(GA_LOCAL_STORAGE_KEY), }) } else { // creates client_id and saves it in localStorage -> currently random number better would be a uuid window.localStorage.setItem(GA_LOCAL_STORAGE_KEY, uuidv4()) // creates new tracker with the new client_id gtag('js', new Date()) gtag('config', 'GA_MEASUREMENT_ID', { send_page_view: true, client_storage: 'none', client_id: localStorage.getItem(GA_LOCAL_STORAGE_KEY), }) } }</script>Thanks for reading. If you have any questions, feel free to contact me or comment on this article. You can also connectwith me on Twitter orLinkedIn.
