Event Tracking code for multiple links in one banner

Question

I have a banner on my sites home page, It has multiple links and the html code is written within tag and does not contains any anchor links, instead it has a href link only.

My IT heads says its not possible to embedd a onclick event tracking code to track all the links.

Please let me know how will i track this?

Eike Pierstorff Eike Pierstorff · Accepted Answer · 2014-04-11T07:31:42

A pure unobtrusive javascript solution (derived from Googles example, working but not necessarily the most complete or beatiful code) :

function addListener(element, type, callback) {
 if (element.addEventListener) element.addEventListener(type, callback);
 else if (element.attachEvent) element.attachEvent('on' + type, callback);
}

links = document.getElementsByTagName('a');
for(i=0,cnt=links.length;i<cnt;i++) {
    addListener(links[i], 'click', function() {
      ga('send', 'event', 'button', 'click', 'nav-buttons');
    });
}

If you put that in an external js file or an inline script it will "decorate" all links in the page (you would need a more specific selector instead of "all links") with a click event that fire google event tracking when somebody clicks the link. No embedded click code in the link tags necessary (that's bad practice in any case).

If you are already using jQuery (since that's probably the most popular javascript library) you can simply do

$( "a" ).click(function() {
  ga('send', 'event', 'button', 'click', 'nav-buttons');
});

(again, choose a more specific selecor).

Both examples assume Universal Analytics, for classic you'd need to change the event tracking code (see DalmTos answer for examples).

Event Tracking code for multiple links in one banner

2 Answers