Implementing a Universal Analytics Strategy within Google Tag Manager

Let's go deeper with Google Tag Manager & Universal Analytics




TABLE OF CONTENT

IntroductionEvent listenersCase: Click Event listeners (static - dynamic - combination with lookup tables)Case: Custom Event listeners: tracking scrolling on a one-page site (custom html tags)

INTRODUCTION

GTM works with the combination of 3 elements:

Tags: JavaScript code

Triggers: condition that specifies when a tag should be fired

Variables: values used to define triggers or to dynamically insert info in a tag

How does it work?

Tag: line of JavaScript that you add to the pages of your site.

INTRODUCTIONTags - Triggers - Variables

Which tags are supported by Google Tag Manager?



Choose a tag type



Configure the tag




Adwords conversion tag





Custom Html Tags are mainly used to add JS/JQuery script on a webpage (without the interaction with the web agency).Sending non-Google partner conversion pixel


Give the possibility to play around dataLayer with conditions, loops, array, … and send information to Analytics or another tracking tool according to the user's behaviour.

INTRODUCTIONWhy to use Custom Html Tags

Trigger: condition that specifies when a tag should be fired


Trigger: condition that specifies when a tag should be fired



You can combine multiple conditions…

…and exclude others:

Variable: values that define triggers, or dynamically set an information into a tag

Built-in variables:


Variable: values that can be tested by GTM to define triggers, or dynamically set an information into a tag

Built-in variables:


User-defined variables:

INTRODUCTIONWhat's a variable?





Event listeners in Google Tag Manager

EVENT LISTENERS IN GOOGLE TAG MANAGERWhat's new in the new UI

Listeners in GTM are fundamental to trigger tags mainly based on the user behaviour.

Event listeners are now integrated in the tag workflow.

Click Event listener will fire a tag when someone clicks on an element of the page.

EVENT LISTENERS IN GOOGLE TAG MANAGERLet's go deeper into main event listeners: Click and Link Click Events

- All elements (click) : fires the tag when a click event is registered on page.- Just links (link click) : fires the tag only with a click on a link (<a href>), and bringing the user to another url.

Wait for tags: ensure your tag will be fired before opening the link (in case of the tag takes too much time to be executed).

Check validation: ensure you click on a real <a href=""> link.


Add filters to specify links.


The Form Event listener will fire a tag when someone submits form data. It requires a submit() event to be triggered.<form>Name: <input type="text" name="name" />Email: <input type="text" name="email" /><input type="submit" /></form>

EVENT LISTENERS IN GOOGLE TAG MANAGERLet's go deeper into main event listeners: Form

Check Validation will avoid to trigger a tag when required fields are not filled out.


We recommend not use the submit event listener with sophisticated technologies (Ajax, JS, JQuery, asynchronous

loading, …)


We suggest 2 workarounds:Trigger the tag when the user lands to the 'succeed' page after completing the form.


If the succeed page has no unique URL, ask you agency to push a dataLayer into the code of the page.<script>dataLayer.push({'event': 'form_succeed'});</script>


How to create static and

dynamic track events

GTM IMPLEMENTATION STEP-BY-STEPSimple Google Analytics track event

Google Analytics track event based on a PDF download click:











Event category: PDF

Event action: /VOO_evasion_UG_box_FR_150615.pdf

Event label: FR

GTM IMPLEMENTATION STEP-BY-STEPDynamic track event

Dynamically get the name of the pdf:

Event category: PDF

Event action: /VOO_evasion_UG_box_FR_150615.pdf

Event label: FR





GTM Javascript

<script>url = "http://www.domain.be/nl/pdf/";langUrl = url.slice(21,23);switch (langUrl) { case "fr" : lang="French"; break; case "nl" : lang="Dutch"; break; case "en" : lang="English"; break;}alert(lang);</script>

Javascript

URL > /fr/pdf/document-a-telecharger/ Dynamic Event label > French / Dutch / English /…

GTM IMPLEMENTATION STEP-BY-STEPUse the power of Javascript

Work with Javascript to play around text element:

GTM Javascript

<script>url = "http://www.domain.be/nl/pdf/";langUrl = url.slice(21,23);switch (langUrl) { case "fr" : lang="French"; break; case "nl" : lang="Dutch"; break; case "en" : lang="English"; break;}alert(lang);</script>

Javascript





Track scrolling on one-page site with Custom

Html Tags

SECTION 1

SECTION 2

SECTION 3

SECTION 4

500 px

1400 px

1800 px

2250 px

650 px

Send VirtualTrackPageviews

…/section2/

SECTION 1

SECTION 2

SECTION 3

SECTION 4

500 px

1400 px

1800 px

2250 px

650 px

SECTION 1

SECTION 2

SECTION 3

SECTION 4

500 px

1400 px

1800 px

2250 px

TRACK SCROLLING ON ONE-PAGE SITE WITH CUSTOM HTML TAGSUse Custom Html Tags to trigger tags on read web page section

SECTION 1

SECTION 2

SECTION 3

SECTION 4

500 px

1400 px

1800 px

2250 px

650 px

Send VirtualTrackPageviews

…/section2/


If position scroll (650px) > top section2 (500px) and < bottom section2 (1400px)then send '/product/section2/' to Google Analytics

<script>jQuery(function($) {topContent = false;posScroll = $(window).scrollTop()+$(window).height();posScroll2 = $(window).scrollTop();topSection1 = $('div.section1').position().top+$('div.section1').height(); topSection1bis = $('div.section1').position().top;if (((posScroll >= topSection1 && posScroll < topSection1+150) || (posScroll2 >= topSection1bis-150 && posScroll2 < topSection1bis-50)) && !topContent) { dataLayer.push({'event':'ScrollBarEvent', 'virtualUri':'/product/section1/'});

topContent = true; }}</script>





<script>jQuery(function($) {topContent = false;posScroll = $(window).scrollTop()+$(window).height();posScroll2 = $(window).scrollTop();topSection1 = $('div.section1').position().top+$('div.section1').height(); topSection1bis = $('div.section1').position().top;if (((posScroll >= topSection1 && posScroll < topSection1+150) || (posScroll2 >= topSection1bis-150 && posScroll2 < topSection1bis-50)) && !topContent) { dataLayer.push({'event':'ScrollBarEvent', 'virtualUri':'/product/section1/'});

topContent = true; }}</script>






dataLayer.push({'event':'ScrollBarEvent', 'virtualUri':'/product/section1/'});


Google Analytics results

THANK YOU

THANK YOU

Marketing

Implementing a Universal Analytics Strategy within Google Tag Manager