Question

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

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

这很好但有一个问题，一些用户（包括我自己）倾向于鼠标中键/命令+点击大多数链接，以便在新标签中打开它们。这显然不适用于上面的脚本。

我想知道是否有类似event.triggerDefault()的东西可以将事件的控制权交还给浏览器，或者我是否真的需要构建一些可以检测来自用户的midmouse /命令点击的内容。

旁注：我们使用原生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不会更改网址，但这在jsfiddle之外工作正常）

现在剩下的就是让这个跨浏览器兼容，当然插入google跟踪（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分析在您网站上的内部链接中跟踪用户导航，则以下内容可能有所帮助。

将Google Analytics（GA）事件数据存储在Cookie中，但暂时不发送GA事件。
让DOM事件的默认行为执行。
在下一页上，阅读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
});

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

在Google Analytics调用后恢复原始锚定点击事件

2 个答案: