Нажмите кнопку ведение журнала С помощью JavaScript


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

Я написал маленький регистратор, который можно вызвать по 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;
}

EDIT: я пропустил в примере, что я необходимо передать динамические параметры в вызове js, поэтому удалить событие onclick "невозможно": (

5 6

5 ответов:

Я бы начал избавляться от встроенного кода 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: false здесь, заключается в том, что по умолчанию aync является true, что означает, что запрос AJAX может быть только частично передается к тому времени, когда браузер видит return: true и переходит от страницы.

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

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

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

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

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

Я думаю, что причина, по которой 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;
  }
}

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

Например:

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

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

Можно сделать так:

1) возвращает false, поэтому href не активен. 2) регистрируйте щелчок 3) Используйте местоположение.href для перенаправления на url он был бы перенаправлен на

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

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

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