Jquery script to catch link click events for Universal Analytics

Question

I am trying to set up event tracking via Google Universal analytics. I found a script example that would appear to do exactly what I need - i.e. track various anchor clicks in the page and categorize them accordingly. However my javascript understanding is still rudimentary and I need help to understand why this script would not work. Basically click events appear not to be triggered at all. I checked - the script is loaded alright and can display an alertbox just upon loading. The script is placed the last in the head part of the page, after the analytics.js and Jquery are loaded.

Hopefully this is something obvious that I am missing, many thanks. Robert

<script type='text/javascript'>
if (typeof jQuery != 'undefined') {
    var filetypes = /\.(zip|exe|dmg|pdf|doc.*|xls.*|ppt.*|mp3|txt|rar|wma|mov|avi|wmv|flv|wav)$/i;
    var baseHref = '';
    if (jQuery('base').attr('href') != undefined) baseHref = jQuery('base').attr('href');
    var hrefRedirect = '';

    jQuery('body').on('click', 'a', function(event) {

        var el = jQuery(this);
        var track = true;
        var href = (typeof(el.attr('href')) != 'undefined' ) ? el.attr('href') : '';
        var isThisDomain = href.match(document.domain.split('.').reverse()[1] + '.' + document.domain.split('.').reverse()[0]);
        if (!href.match(/^javascript:/i)) {
            var elEv = []; elEv.value=0, elEv.non_i=false;
            if (href.match(/^mailto\:/i)) {
                elEv.category = 'email';
                elEv.action = 'click';
                elEv.label = href.replace(/^mailto\:/i, '');
                elEv.loc = href;
            }
            else if (href.match(filetypes)) {
                var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
                elEv.category = 'download';
                elEv.action = 'click-' + extension[0];
                elEv.label = href.replace(/ /g,'-');
                elEv.loc = baseHref + href;
            }
            else if (href.match(/^https?\:/i) && !isThisDomain) {
                elEv.category = 'external';
                elEv.action = 'click';
                elEv.label = href.replace(/^https?\:\/\//i, '');
                elEv.non_i = true;
                elEv.loc = href;

            }
            else if (href.match(/^https?\:/i) && isThisDomain) {
                elEv.category = 'internal';
                elEv.action = 'click';
                elEv.label = href.replace(/^https?\:\/\//i, '');
                elEv.non_i = true;
                elEv.loc = href;

            }            
            else if (href.match(/^tel\:/i)) {
                elEv.category = 'telephone';
                elEv.action = 'click';
                elEv.label = href.replace(/^tel\:/i, '');
                elEv.loc = href;
            }
            else track = false;


            if (track) {
                var ret = true;

                if((elEv.category == 'external' || elEv.category == 'download') && (el.attr('target') == undefined || el.attr('target').toLowerCase() != '_blank') ) {
                    hrefRedirect = elEv.loc;

                    ga('send','event', elEv.category.toLowerCase(),elEv.action.toLowerCase(),elEv.label.toLowerCase(),elEv.value,{
                        'nonInteraction': elEv.non_i ,
                        'hitCallback':gaHitCallbackHandler
                    });

                    ret = false;
                }
                else {
                    ga('send','event', elEv.category.toLowerCase(),elEv.action.toLowerCase(),elEv.label.toLowerCase(),elEv.value,{
                        'nonInteraction': elEv.non_i
                    });
                }

                return ret;
            }
        }
    });

    gaHitCallbackHandler = function() {
        window.location.href = hrefRedirect;
    }
}
</script>

Answer 1

From what you have given there are few things that can go wrong there

1. There is no base tag in the page. You need to have a <base href="" /> in the page
2. The script is added inside head . Then the body element is still not loaded so you need to add the script inside dom ready handler/register the delegated handler to document object instead of body

Assuming jQuery is loaded correctly and it is added before this script try

<base href="yourbaseurl" />

then

if (typeof jQuery != 'undefined') {
    jQuery(function(){
        var filetypes = /\.(zip|exe|dmg|pdf|doc.*|xls.*|ppt.*|mp3|txt|rar|wma|mov|avi|wmv|flv|wav)$/i;
        var baseHref = '';
        if (jQuery('base').attr('href') != undefined) baseHref = jQuery('base').attr('href');
        var hrefRedirect = '';

        jQuery('body').on('click', 'a', function(event) {

            var el = jQuery(this);
            var track = true;
            var href = (typeof(el.attr('href')) != 'undefined' ) ? el.attr('href') : '';
            var isThisDomain = href.match(document.domain.split('.').reverse()[1] + '.' + document.domain.split('.').reverse()[0]);
            if (!href.match(/^javascript:/i)) {
                var elEv = []; elEv.value=0, elEv.non_i=false;
                if (href.match(/^mailto\:/i)) {
                    elEv.category = 'email';
                    elEv.action = 'click';
                    elEv.label = href.replace(/^mailto\:/i, '');
                    elEv.loc = href;
                }
                else if (href.match(filetypes)) {
                    var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
                    elEv.category = 'download';
                    elEv.action = 'click-' + extension[0];
                    elEv.label = href.replace(/ /g,'-');
                    elEv.loc = baseHref + href;
                }
                else if (href.match(/^https?\:/i) && !isThisDomain) {
                    elEv.category = 'external';
                    elEv.action = 'click';
                    elEv.label = href.replace(/^https?\:\/\//i, '');
                    elEv.non_i = true;
                    elEv.loc = href;

                }
                else if (href.match(/^https?\:/i) && isThisDomain) {
                    elEv.category = 'internal';
                    elEv.action = 'click';
                    elEv.label = href.replace(/^https?\:\/\//i, '');
                    elEv.non_i = true;
                    elEv.loc = href;

                }            
                else if (href.match(/^tel\:/i)) {
                    elEv.category = 'telephone';
                    elEv.action = 'click';
                    elEv.label = href.replace(/^tel\:/i, '');
                    elEv.loc = href;
                }
                else track = false;


                if (track) {
                    var ret = true;

                    if((elEv.category == 'external' || elEv.category == 'download') && (el.attr('target') == undefined || el.attr('target').toLowerCase() != '_blank') ) {
                        hrefRedirect = elEv.loc;

                        ga('send','event', elEv.category.toLowerCase(),elEv.action.toLowerCase(),elEv.label.toLowerCase(),elEv.value,{
                            'nonInteraction': elEv.non_i ,
                            'hitCallback':gaHitCallbackHandler
                        });

                        ret = false;
                    }
                    else {
                        ga('send','event', elEv.category.toLowerCase(),elEv.action.toLowerCase(),elEv.label.toLowerCase(),elEv.value,{
                            'nonInteraction': elEv.non_i
                        });
                    }

                    return ret;
                }
            }
        });

        var gaHitCallbackHandler = function() {
            window.location.href = hrefRedirect;
        }    
    });
}