点击链接触发Google Analytics跟踪且当前页不跳转的实现问题

问题根源 #

你当前的代码存在两个核心错误导致原页面跳转：

• 点击事件回调没有声明事件参数e，e.preventDefault()执行时报错失效，后续的return false也没有正常触发
• 额外添加的setTimeout(function(){location.href=that.href;},200)逻辑主动触发了原页面跳转，和target="_blank"新标签打开的需求完全冲突

修复方案 #

方案1：极简修复（不需要保证GA上报100%送达） #

直接修改JS代码两处即可，HTML代码无需调整：

function waitForLoad(id, callback){
    var timer = setInterval(function(){
        if(document.getElementById(id)){
            clearInterval(timer);
            callback();
        }
    }, 100);
}

waitForLoad("trackbooks", function(){
    console.log("load successful, you can proceed!!");
    // 给点击回调添加事件参数e
    document.getElementById("trackbooks").onclick = function(e)
    {
        var that=this;
        _gaq.push(['_trackEvent','Download','PDF',this.href]);
        // 删除导致原页面跳转的setTimeout跳转逻辑
        e.preventDefault();
        return false; 
    }
});

这个方案依赖a标签原生的target="_blank"特性，浏览器会自动在新标签打开PDF，同时触发GA上报。

方案2：高可靠修复（保证GA事件上报完成后再打开PDF） #

如果需要避免上报还没发出去就跳转导致的上报丢失，推荐用这个方案，JS代码修改如下：

function waitForLoad(id, callback){
    var timer = setInterval(function(){
        if(document.getElementById(id)){
            clearInterval(timer);
            callback();
        }
    }, 100);
}

waitForLoad("trackbooks", function(){
    console.log("load successful, you can proceed!!");
    document.getElementById("trackbooks").onclick = function(e)
    {
        e = e || window.event;
        e.preventDefault();
        const pdfUrl = this.href;
        // 上报GA事件
        _gaq.push(['_trackEvent','Download','PDF', pdfUrl]);
        // 等GA上报完成后再在新标签打开PDF
        _gaq.push(function() {
            window.open(pdfUrl, '_blank', 'noopener noreferrer');
        });
        return false; 
    }
});

这个方案主动阻断了a标签的默认行为，等GA上报队列执行完成后再手动打开新标签，不会触发原页面跳转，同时上报成功率更高。

内容的提问来源于stack exchange，提问作者Riots