谷歌分析调用后恢复原始锚点点击事件

Question

对于我们网站上的一堆锚标签，我们会向 Google Analytics 发送一个事件以跟踪用户行为，现在我正在使用以下代码（点击触发）：

event.preventDefault();
ga(tracker, 'event', category, action, label, value, { 'hitCallback':
    function(){
        window.location = url;
    }
}); 

这工作正常，但有一个问题，一些用户（包括我自己）倾向于使用鼠标中键/命令+单击大多数链接，以便在新选项卡中打开它们。这显然不适用于上述脚本。

我想知道是否有类似event.triggerDefault() 的东西会将事件的控制权交还给浏览器，或者我是否真的必须构建一些东西来检测来自用户的中间鼠标/命令点击。

旁注：我们使用原生 javascript

Answer 1

在How to trigger an event after using event.preventDefault() 和How to clone or re-dispatch DOM events? 的帮助下，我想出了以下解决方案：

<script>
var anchor = document.getElementById('anchor');
anchor.addEventListener('click', function(e){
    if(e.eventHandled) return;
    e.preventDefault();

    window.alert('Javascripts');

    var clonedEvent = new e.constructor(e.type, e);
    clonedEvent.initEvent(e.type, true, false);
    clonedEvent.eventHandled = true;
    anchor.dispatchEvent(clonedEvent);
});
</script>
<a href="http://www.google.com/" id="anchor">Google</a>

现在，当命令+单击链接时，您首先会收到警报，然后会发送到新选项卡。

Jsfiddle：http://jsfiddle.net/8NRJY/1/（请注意，如果您进行正常点击，jsfiddle 不会更改 url，但这在 jsfiddle 之外可以正常工作）

现在剩下的就是让这个跨浏览器兼容，当然还要插入谷歌跟踪（dispatchEvent 将在回调中）。

编辑：这是跨浏览器（至少 IE8+）兼容的版本。

如果您使用本机 javascript，第一个函数应该是库的一部分。

<script>
var addEventListener = function(elem, eventName, handler, useCapture) {
    if (elem!=null) {
        if (elem.addEventListener) {
            if (useCapture===true||useCapture===false) {
                elem.addEventListener(eventName, handler, useCapture);
            }
            else {
                elem.addEventListener(eventName, handler);
            }
        } else {
            elem.attachEvent('on' + eventName, function(evt) {              
                evt = evt || window.event;
                evt.target = evt.target || evt.srcElement;
                handler(evt);
            });
        }
    }
};

var onReady = function (fn) {
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', fn);
    } else {
        document.attachEvent('onreadystatechange', function() {
            if (document.readyState === 'interactive' || document.readyState === 'complete'){
                fn();
            }
        });
    }
};

var fireEvent = function(el, event){
    if(document.createEvent){
        var clonedEvent = new event.constructor(event.type, event);
        clonedEvent.initEvent(event.type, true, false);
        el.dispatchEvent(clonedEvent);
    }else if(document.createEventObject){
        var clonedEvent = document.createEventObject();
        el.fireEvent('on'+event.type, clonedEvent);
    }
};

onReady(function(){
    var anchor = document.getElementById('anchor');
    addEventListener(anchor, 'click', function(e){
        if(!anchor.eventDispatched){
            e.preventDefault ? e.preventDefault() : e.returnValue = false;
            anchor.eventDispatched = true;
            fireEvent(anchor, e);
        }else{
            anchor.eventDispatched = false;
            e.returnValue = true;
        }
    });
});
</script>
<a id="anchor" href="http://www.google.com">Test</a>  

编辑 2： 解决此问题以使用 Google Analytics（分析）被证明是一项比我想象的要困难得多的任务。

在现代浏览器中，它可以立即运行。在 IE8 中，一次只有一个事件（存储在 window.event），这意味着 Google 的回调会覆盖它，这意味着我无法重新触发原始事件。我正在尝试各种克隆事件的方法以使其正常工作，但到目前为止还没有成功。

我讨厌你 IE8。

编辑 3：我已经放弃尝试在 IE8 中进行这项工作。

编辑 4：事实证明，Chrome 将新窗口阻止为弹出窗口，因为该事件是在回调之后触发的（即使它是原始用户点击事件）。

Answer 2

如果您想使用 Google 分析跟踪您网站上内部链接的用户导航，以下可能会有所帮助。

1. 将 Google Analytics (GA) 事件数据存储在 Cookie 中，但暂时不要发送 GA 事件。
2. 让 DOM 事件的默认行为执行。
3. 在下一页上，读取 cookie，查找排队的 GA 事件，并将它们发送到分析。

根据我的经验，cookie 是在离开页面前立即设置的。

为确保 GA 事件与您报告中的正确页面相对应，您应该执行以下操作将事件发送给 GA：

var currentPage = window.location.pathname;
var previousPage = document.referrer.replace(/^[^:]+:\/\/[^/]+/, '').replace(/#.*/, '');

ga('set', 'page', previousPage);
ga(tracker, 'event', category, action, label, value, { 
    'hitCallback': function(){
        ga('set', 'page', currentPage);
    },
    'nonInteraction': 1
});

回调为后续分析请求恢复页面值。非交互可确保事件不会影响您的跳出率。