Журналирование с помощью JavaScript

Question

Я хочу регистрировать все клики по ссылке.

Я написал небольшой регистратор, который можно вызвать по URL-адресу (возвращает пустую страницу). Этот URL вызывается с помощью jquery-ajax-метода. Но, к сожалению, не каждый клик регистрируется, если пользователь использует Firefox (в IE все выглядит нормально).

Я пробовал много вещей, но у меня нет решения этой проблемы, у кого-нибудь есть клей?

HTML-код:

<a href="http://google.com" onclick="return loggClick();">Click</a>

JS-JQuery-Skript:

function loggClick(){
   $.ajax({
        type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
            sid: 'abc123' //random data
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false
    });
    return true;
}

РЕДАКТИРОВАТЬ: я пропустил в примере, что мне нужно передать динамические параметры в вызове js, так что "невозможно" удалить событие onclick: (

Answer 1

Я думаю, что причина, по которой FF дает вам плохие результаты, в том, что вы покидаете страницу до того, как действие займет время. Как упоминает ссылка mhartman, если вы используете цель для своей внешней ссылки, она должна работать нормально. Если вы не можете этого сделать, возможно, вам придется подождать завершения журнала, хотя вы можете увидеть задержки в навигации.

HTML код

<a href="http://google.com" onclick="return loggClick(event);">Click</a>

The

function loggClick(e) {
  if (!e) e = window.event;

  e.preventDefault();  // cancels the link

  var theLink = this.href;  // stores the link for later

  $.ajax({
     async: false,
     type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
            sid: 'abc123' //random data
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false,
         complete: function() {
           // navigate when the log completes
           this.location.href = theLink;
         }
    });
    return true;
  }
}

Answer 2

Я бы начал избавиться от встроенного кода 'onclick' и связать событие позже:

  <a href="http://google.com" rel="outbound" >Click</a>


   $("a[rel=outbound]").click(function(){ 
        var url = this.href; 
        $.ajax({
        async: false,
        type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
                sid: 'abc123' //random data
                clicked: url
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false
     });
     return true; 
  }); 

Кроме того, может иметь место «Условие гонки» . В моем примере я установил async в false .

Это остановит функцию, возвращающую и следующую по ссылке до выполнения запроса.

Об Async

Причина, по которой я здесь использую async: false, заключается в том, что по умолчанию aync имеет значение true, что означает, что запрос AJAX может быть передан только частично к тому времени, когда браузер увидит return: true и уйдет со страницы.

Это то «состояние гонки», о котором я упоминал. Здесь это дешевый трюк, который позволяет избежать его, заставляя браузер фактически останавливаться до тех пор, пока запрос не будет выполнен, а затем позволяя браузеру щелкнуть ссылку.

Более сложным ответом было бы возвращение «false» (что приведет к уничтожению нативного поведения «переходить по ссылке») в браузерах, а затем перенаправление real , выполненное в функции complete.

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

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

(И, следовательно, сложность этого решения на порядок сложнее в простом примере, чем async: false)

Answer 3

Вторым, более сложным подходом на стороне сервера, о котором вы, возможно, и не задумывались, было бы создание страницы, которая обрабатывает ваши перенаправления и регистрирует данные.

Например:

<a href="LoggerRedirect.ff?url=http://google.com">Click</a>

Answer 4

В этом примере будет запущен пост Ajax до обработки ссылки. Я обнаружил, что должен был вызвать ajax синхронно, иначе POST не будет выполнен. В этом примере мой пост ajax относится к странице PHP, которая добавляет файл журнала. Этот пример эффективен, поскольку он только присоединяет событие нажатия к окну. Это также не помешает пользователю перейти по ссылке.

//attach click event to window
attachClickEvent = function() {
    $(document).on('click', function(e) { //document for IE8 compatibility
        var element = $(e.target);
        var tag = element.prop('tagName');

        if (tag === 'A') {
            var data = {'title':document.title, 'URL':element.attr('href'), 'origin':location.href};
            logData(data);
        }
    });
}

logData = function(data) {
    $.ajax({
        async: false,
        cache: false,
        type: "POST",
        data: data,
        url: 'logger.php',
        success: function(msg) { 
            //debugging
        },
        error: function() {
            //debugging
        }
    });
}

Answer 5

Приведенный выше плакат верен, он ненадежен, поскольку вы покидаете страницу до того, как у нее появится возможность ее зарегистрировать.

Вы можете сделать это:

1) вернуть false, поэтому href не активен. 2) войти в клик 3) использовать location.href для перенаправления на URL, который был бы перенаправлен на

вы можете увидеть небольшую задержку, если выполнение обработчика onclick займет много времени.