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”});
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: