Measuring NextGen gallery clicks on Google Analytics ga.js: a very partial solution

February, 2015, I’ve largely let this website lie, but in the meantime, I seem to have been upgraded to Universal Analytics so none of this now works, at least for me.

Ok, before people gets excited (and judging by the amount of posts around the internet that could be quite a few people) there are a lot of qualifiers to the hack (the code of which is at the bottom of this page).

1. You can’t tell which pictures people are looking at, only the page and that they are clicking through a gallery on that page. So if you have more than one gallery per page, you’re only going to get a cumulative answer.

2. I can’t guarantee, it doesn’t mess up your other analytics settings. I haven’t had any problems but this is a very small site so test!

3. I know Google is phasing out the old asynchronous tag in favour of the Universal tag, but currently, for various reasons, I haven’t upgraded currently but will try the same hack if NextGen don’t add GA integration in their next free iterations (surely?).

4. I’m not a coder, so if you know what you’re doing, I am sure you can do this far, far better and cleaner and if you have please let me know. This came about via trial and error and  is very much a work in progress. But I felt if I wrote this and somehow managed to get a few people to find it then the collective wisdom could improve on it (it can’t be hard) as soon as possible.

So, er, what does this actually do? It’s a fair question.

What it is is a hack for event tracking for outbound links so it fires an event each time someone clicks on a photo in a gallery.

This hack owes everything to one of the few posts I could find that didn’t use jquery (which I ignored because I don’t understand it) and weren’t just manual on every link (which wouldn’t work because of the NextGen gallery code and is obviously tedious). This is where you can see his code that works to measure just outbound clicks on your website. That was on Track outbound links with Google Analytics (ga.js) on Axllent.org so big thanks for their post.

With a bit of tinkering I changed it so that it didn’t just measure the outbound links on the page but all links that aren’t to my domain (which in this case are clicks on the pictures – it doesn’t let you know someone opened the gallery – as I said, lots of qualifiers). So it does measure clicks on links to other sites, but it is also fired by clicks on the image which come through in your events as “javascript:;” in the Event Action and with the URL eg /petra/ as the Event Label. The Event Category is Outgoing Links.

Google Analytics

So all in all, I now know when someone clicks on the second, third pictures of my gallery. It is useful to know that people are interacting with my content, but I don’t know what pictures they are clicking on. Better than nothing? I guess it depends what you need, but it’s the best I can do for now.

Let me know what I’ve done right, wrong, hints and fixes (please!) at pete@travellingismyblanket.com

You can find this on the source of my page but this is the code I ended up having added before the closing </script> on my Google Analytics tag.

/* Attach tracking to all download & external links */
var _gaq = _gaq || [];

function _gaLt(event){
    var el = event.srcElement || event.target;

    /* Loop up the tree through parent elements if clicked element is not a link (eg: an image in a link) */
    while(el && (typeof el.tagName == 'undefined' || el.tagName.toLowerCase() != 'a' || !el.href))
        el = el.parentNode;

      if(el && el.href){
    if(el.href.indexOf(location.host) == -1){
            _gaq.push(["_trackEvent", "Outgoing Links", el.href, document.location.pathname + document.location.search]);
            /* if target not set then delay opening of window by 0.5s to allow tracking */
            if(!el.target || el.target.match(/^_(self|parent|top)$/i)){
                setTimeout(function(){
                    document.location.href = el.href;
                }.bind(el),500);
              
            }
        }

    }
}

/* Attach the event to all clicks in the document after page has loaded */
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)});

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *