Clique Logging com JavaScript

Question

Eu quero registrar todos os cliques em um link.

Eu escrevi um pouco logger, que pode ser chamado por um url (retorna uma página em branco). Esta url é chamado com uma-ajax-jquery método. Mas, infelizmente, não cada clique é registrado, se o usuário usa o Firefox (tudo parece ok no IE).

Eu tentei muitas coisas, mas não tenho nenhuma solução para este problema, tem alguém uma cola?

código 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: eu perdi no exemplo que eu tenho que passar parâmetros dinâmicos na js-chamada, por isso é "impossível" para remover o onclick evento: (

Answer 1

Gostaria de começar se livrar do inline 'onclick' Código e vinculativa do evento mais tarde:

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

Além disso, você pode ter uma "condição de corrida" ocorrendo . No meu exemplo eu tenho assíncrona set false .

Isto irá parar a função de retornar e seguir o link antes de o pedido ter sido realizada.

Sobre Async

A razão que eu uso async: false aqui é porque com o padrão, aync é verdade, o que significa que o pedido AJAX só pode ser parcialmente transmitida pelo tempo que o navegador vê return: true, e navega fora da página.

Este é que "condição de corrida" Eu estava mencionando. Aqui, é um truque barato que evita-lo fazendo o navegador essencialmente vir a uma parada até que o pedido está completo, e, em seguida, permitindo que o navegador de clicar no link.

Uma resposta mais sofisticada seria tê-lo retornar "false", (que vai matar os navegadores "link seguir" comportamento nativa), e depois ter o real redirecionamento realizado na função complete.

Isto não é sem a sua própria mente questões, e pode resultar em comportamento de navegação lenta enquanto os pedidos completo, permitindo aos usuários tempo para clicar outros links, que parecem não fazer nada, e depois, eventualmente, um pedido obtém através em um horário aleatório, e a ocorre redirecionamento aparentemente aleatória.

Assim, soluções avançadas incluem o bloqueio do resto da página e dando algum tipo de indicação de progresso enquanto os concluída solicitação.

(e, portanto, a complexidade desta solução é uma ordem de magnitude mais difícil de retirar em um exemplo simples do que async: false)

Answer 2

Eu acho que o FF razão é que lhe dá maus resultados é porque você está deixando a página antes de a ação leva tempo para executar. Como elo de mhartman menciona se você usar um alvo no seu link externo que deve funcionar bem. Se você não pode fazer isso, então você pode ter que esperar para que o registro completo, embora você pode ver atrasos na navegação.

código HTML

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

o

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 3

A segunda abordagem mais do lado do servidor que você pode não ter pensado seria ter uma página que lida com seus redirecionamentos e registra os dados em seguida.

Por exemplo:

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

Answer 4

O cartaz acima é correto, ele não é confiável porque você está deixando a página antes que ele tenha a oportunidade de registrá-lo.

Você pode fazer isso:

1) return false, então a href não está ativo. 2) Conecte o clique 3) uso location.href para redirecionar para o url que teria sido redirecionado para

que você pode ver um pequeno atraso se leva muito tempo para o seu manipulador onclick para executar.

Answer 5

Este exemplo irá disparar um posto ajax antes do link clique é processado. Eu descobri que eu tinha para chamar ajax síncrona ou o POST não será executada. Neste exemplo o meu post ajax é uma página PHP que anexa um arquivo de log. Este exemplo é eficiente uma vez que só atribui um evento de clique para a janela. Ele também não irá interferir com um usuário clicar em um link.

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