javascript - 用于捕获 Universal Analytics 链接点击事件的 Jquery 脚本

Question

我正在尝试通过 Google Universal Analytics 设置事件跟踪。我找到了一个脚本示例，它似乎可以完全满足我的需要 - 即跟踪页面中的各种 anchor 点击并相应地对其进行分类。然而，我对 javascript 的理解仍然很初级，我需要帮助才能理解为什么这个脚本不起作用。基本上点击事件似乎根本不会被触发。我检查过 - 脚本加载正常并且可以在加载时显示一个警告框。在加载 analytics.js 和 Jquery 之后，脚本放在页面头部的最后。

希望这是我明显遗漏的东西，非常感谢。罗伯特

<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

根据您提供的信息，几乎没有什么地方会出错

1. 没有 base页面中的标记。你需要有一个 <base href="" />在页面中
2. 脚本添加在head里面.然后 body元素仍未加载，因此您需要在 dom 就绪处理程序中添加脚本/将委托(delegate)处理程序注册到 document对象而不是 body

假设 jQuery 已正确加载并在该脚本尝试之前添加

<base href="yourbaseurl" />

然后

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