Возобновить исходное событие щелчка привязки после вызова Google Analytics

С помощью Как вызвать событие после использования event.preventDefault () и Как клонировать или повторно отправлять события DOM ? Я пришел к следующему решению:

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

Теперь все, что осталось, - это сделать этот кросс-браузер совместимым и, конечно же, вставить отслеживание 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 блокирует новое окно как всплывающее, потому что событие запускается после обратного вызова (даже если это исходное событие щелчка пользователя).

Если вы хотите отслеживать переход пользователей по внутренним ссылкам на вашем сайте с помощью Google Analytics, вам может помочь следующее.

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

Обратный вызов восстанавливает значение страницы для последующих запросов аналитики. Отсутствие взаимодействия гарантирует, что событие не повлияет на ваш показатель отказов.