Inorder to make the installation robust & easy to maintain, avoid running inline GA code. Instead, use GTM auto-events or jQuery customHTML, to append onclick events on-the-fly to page elements.

This requires that DOM elements must be named in a consistent way, because the tracking will be dependent on these names. If IDs, Classes or DOM elements are renamed, then tracking functionality will be break!

 

ID attributes on div elements:

<a href=”#” id=”tracking-link1“>click here</a>

 

CLASS attributes:

<div class=”tracking-navigation-links“>

<a href=”#” id=”tracking-link1“>click here</a>

</div>

 

HTML5 data attributes:

<a href=”#” data-tracking-action=”click”

data-tracking-event=”video”

data-tracking-entity=”component”

data-tracking-event-context-id=”12345″

data-tracking-event-context-category=”video”

data-tracking-event-context-action=”play”

data-tracking-event-context-label=”video name”

data-tracking-event-context-value=”0″

data-tracking-event-context-noninteractive=”false”>click here</a>

 

Phone number markup:

<span id=”telephoneNumber1” class=”tracking-number-replace tel number” itemprop=”telephone“>

<a href=”tel:+44123400000”>+44 (0)1234 00000</a></span>

 

Form markup for sensitive fields:

<input id=”CreditCardPin” type=”text” class=”tracking-sensitive ClickTaleSensitive no-mouseflow sessioncamexclude -metrika-nokeys”>

 

YouTube & Vimeo require enablejsapi=1 or api=1:

<iframe src=”//www.youtube.com/embed/fBLc6UedJ98?enablejsapi=1” id=”ytplayer” width=”640″ height=”510″ frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<iframe src=”http://player.vimeo.com/video/76167614?api=1” id=”vimeo_player_1″ width=”640″ height=”510″ frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><!– Note: vimeo does not support SSL –>

 

Page Title:

<title>Error 404 – Page not found</title>

<title>Thankyou for Ordering</title>

<title>Thankyou for Contacting</title>

 

IMPORTANT: If data variables are output by the CMS, or by another TMS, then they can be re-mapped to GTM. There is no need to declare these variables twice! For example:

window.isLoggedIn = “true”;

or

window.universal_variable.events.push({“action”: “product-added-to-basket”});

image078

There is a great blog post about clean element markup by Jeff Chasin here.

 

You can test for semantic and structured markup using these tools:

0117 3361103