How to Track outbound clicks in google analytics

Question

I know there are several ways that will help me find out how many times that user clicked on the outbound links but situation is pretty complicated.

It is a school website, KENT SCHOOL DISTRICT and the home page of the website has a left sidebar with shortcuts (links). Website is built in School Wires (Content Management System) and the school wires does not provided us the code for the site shortcuts.

Under site manager, we have site shortcuts tab (Look Below)

Basically we don't do any hardcoding for the shortcuts.

So far I have tried:

1. I was first planning to use EVENT TRACKING 'onClick' in my anchor tag, but as soon as I found that my school website is not using hard coded links, I dropped that idea.

My question is, Is there anyway that I can track the outbound links? Basically I want to count how many times that shortcut on the left sidebar has clicked?

Answer 1

Using GTM, you could establish a link click listener that fires on all pages, and then create an "Outbound link" tag to fire whenever a link is clicked. You can collect the href attribute of the link to pass into your event as well. That's it in a nutshell, but there's more details here if you like: http://cutroni.com/blog/2013/10/07/auto-event-tracking-with-google-tag-manager/. You can do all that without having to touch the html at all.

Answer 2

I see that you use jQuery on your website. Despite being unable to write attributes onto the links, you can include this snippet of JavaScript which will log a Google Analytics event before sending the user to the link.

function logeventga(category, action, label, value, callback, nonAction){
    var event = {
        'eventCategory': category,
        'eventAction': action
    };
    if (label) event['eventLabel'] = label;
    if (value) event['eventValue'] = value;
    if (callback) event['hitCallback'] = callback;
    if (nonAction) event['nonInteraction'] = 1;
    if (typeof ga == 'function' && ga.hasOwnProperty('loaded') && ga.loaded === true) {
        ga('send', 'event', event);
    } else if (callback) {
        callback.call();
    }
}

$(document).ready(function(){
    $('#div-id a').click(){
        var href = $(this).attr('href');
        logeventga('external-link','click',href,null,function(){
            document.location=href;
        });
        return false;
    }
});

Some notes on how it works:

• You have to wait until the event logging is done before allowing the user to leave the page, otherwise the event may not get logged. Google Analytics has a callback function that gets triggered when the event is logged. You can use this callback function to take the user to the new page after the event is logged by setting document.href. The return false from the click event handler prevents the user from being sent off immediately after the click.
• Some users block Google Analytics with Adblock or similar software. In those cases, you don't want your JavaScript to fail and the user be unable to use the link. The logeventga detects cases of Google Analytics not being loaded and triggers the callback function right away.
• You will have to replace $('#div-id a') with the appropriate jQuery selector that actually finds your links. If there are in a div with an id, you can just replace div-id with the actual id.
• My logeventga function assumes that you use the new Universal analytics that uses the ga function. If you are using the old style analytics calls with _gaq you will have to change the code a little bit.

Answer 3

This code works tickety-boo for me:

// Track external links - http://www.axllent.org/docs/view/track-outbound-links-with-analytics-js/
function _gaLt(event){
  var el = event.srcElement || event.target;
  while(el && (typeof el.tagName == 'undefined' || el.tagName.toLowerCase() != 'a' || !el.href)){ el = el.parentNode; }
  if(el && el.href){
    var link = el.href;
    if(link.indexOf(location.host) == -1 && !link.match(/^javascript\:/i)){
      var hitBack = function(link, target){ target ? window.open(link, target) : window.location.href = link; };
      var target = (el.target && !el.target.match(/^_(self|parent|top)$/i)) ? el.target : false;
      ga("send","event","Outgoing Links",link,document.location.pathname + document.location.search,{"hitCallback": hitBack(link, target)});
      event.preventDefault ? event.preventDefault() : event.returnValue = !1;
    }
  }
}
var w = window;
w.addEventListener ? w.addEventListener("load",function(){document.body.addEventListener("click",_gaLt,!1)},!1) : w.attachEvent && w.attachEvent("onload",function(){document.body.attachEvent("onclick",_gaLt)});

http://www.axllent.org/docs/view/track-outbound-links-with-analytics-js/

Answer 4

I believe that with the new Google Analytics with Enhanced Measurement tracking, if you enable "Outbound clicks" you no longer have to manually setup Google Tag Manager.

It will track them for you as a Google Analytics click event with the parameter outbound set to true

Capture an outbound click event each time a visitor clicks a link that leads them away from your domain(s). By default, outbound click events will occur for all links leading away from the current domain. Links to domains configured for cross-domain measurement (in Tagging Settings) will not trigger outbound click events.