GTM setup

Development steps to implement GTM in a web application

Introduction

This sheet is a guide to quickly implement tracking events. For this to work, we need the Google Tagmanager on the page and several events to be pushed to a datalayer-array. The pushing of these events will kickoff a series of events that ultimately will lead to trusthworthy data that the owner of the system or site can use to analyse the behaviour of her/his guests with the user interface.

If you do not know what a specific variable means or what to put where, just skip that variable and continue. After the first evaluation you will and later on (hopefully) you get the hang of it and will automatically implement these events with every action a user can do!

Test the output on all touchpoints. Trusting the measuring is crucial for data collection :)

1. Determine url of gtm script

The source of the GTM script can either be google (the standard location), or a domain or subdomain of the measuring server.

default: https://www.googletagmanager.com custom: https://data.mydomain.com

2. Place the script in the html-header

Place the GTM script directly in the <head>-tag. Not somewhere lower in the page. Or in a file, called at the bottom of the page. Or worse: tucked away in an external javascript library. Oh and note that you need the proper GTM container ID here (instead of GTM-XXXXXX)

No need to implement the noscript part. Since we use script everywhere. Need an important argument to prioritize the tagmanager? How about it is used to facilitate A/B testing? And thus personalisation for that matter ;)

https://developers.google.com/tag-manager/quickstart

3. Test the output and the resulting measuring pixels

Test the GTM and dataLayer object availability everywhere. Use the browsers' developer tools (console and DOM), check the html-source, the dataLayer-object and all the events that occur.

When available, use the serverside platform debug url to inspect all resulting calls from that one measuring.

GTM code snippet in HTML

<head>
<meta>
<title>

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXX');</script>

<script> // all css, libraries and included scripts come AFTER GTM.</script>
<link rel="stylesheet" type="text/css" href="" media="all" />
<script type="text/javascript" src="">

</head>

<body>

<script> // use dataLayer to push event-names and data-object anywhere in your javascript code.
  dataLayer.push('event.name', { variable_1 : 'value_1', variable_2 : 'value_2' });
</script>

</body>

GTM event implementation