Haga clic en Registro con JavaScript

Question

Quiero registro de todos los clics en un enlace.

He escrito un pequeño registrador, que puede ser llamado por medio de un url (devuelve una página vacía).Esta dirección se llama con un jquery-ajax-método.Pero, lamentablemente, no cada clic se registra, si el usuario utiliza firefox (todo lo que se ve bien en IE).

He intentado muchas cosas pero no tienen ninguna solución para este problema, a alguien de la 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;
}

EDITAR:Me he perdido en el ejemplo que tengo para pasar parámetros dinámicos en el js-llamada, por lo que es "no es posible" para eliminar el evento onclick :(

Answer 1

Me gustaría empezar deshacerse de la línea de la 'onclick' el código y la unión del evento en:

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

También, usted podría tener una "Race Condition" que ocurren.En mi ejemplo he conjunto de async a false.

Esto detendrá la función de regresar y seguir el enlace antes de que la solicitud ha sido realizada.

Acerca De Async

La razón por la que utilizo async: false aquí es porque con el valor predeterminado, aync es cierto, lo que significa que la petición AJAX sólo puede ser parcialmente transmitida por el tiempo que el navegador se ve return: true, y abandone la página.

Ese es el "race condition" yo estaba mencionando.Aquí, un barato truco que evita que el navegador esencialmente viene a parar hasta que la solicitud está completa, y luego permitir que el navegador haga clic en el enlace.

Una más sofisticada respuesta sería tener que volver a "false", ( que va a matar a los navegadores nativos ", siga el enlace" comportamiento ), y luego tener la real la redirección se realiza en el complete la función.

Este no es sin sus propios problemas de la mente, y podría resultar en un lento comportamiento de navegación, mientras que las solicitudes completas, permitiendo a los usuarios el tiempo que haga clic en otros enlaces, que parece no hacer nada, y luego, finalmente, una solicitud se presenta a través de en un tiempo aleatorio, y aparentemente al azar se produce la redirección.

Por lo tanto, las soluciones avanzadas incluyen el bloqueo de el resto de la página y dar algún tipo de indicación de progreso mientras la solicitud completa.

( Y, por tanto, la complejidad de esta solución es de un orden de magnitud más difícil de sacar en un ejemplo simple de async: false )

Answer 2

Creo que la razón por la que FF le está dando malos resultados es porque abandona la página antes de que la acción tarde en ejecutarse. Como menciona el enlace de mhartman, si usa un objetivo en su enlace externo, debería funcionar bien. Si no puede hacerlo, puede que tenga que esperar a que se complete el registro, aunque puede ver retrasos en la navegación.

Código HTML

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

el

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

Un segundo enfoque más del lado del servidor que quizás no haya pensado sería tener una página que maneje sus redireccionamientos y registre los datos en ese momento.

Por ejemplo:

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

Answer 4

El póster anterior es correcto, no es confiable porque está saliendo de la página antes de que tenga la oportunidad de iniciar sesión.

Podrías hacer esto:

1) devuelve falso, por lo que href no está activo. 2) registra el clic 3) use location.href para redirigir a la url a la que habría sido redirigido

es posible que vea un ligero retraso si su controlador onclick tarda mucho tiempo en ejecutarse.

Answer 5

Este ejemplo disparará una publicación ajax antes de que se procese el clic en el enlace. Descubrí que tenía que llamar a ajax sincrónicamente o la POST no se ejecutará. En este ejemplo, mi publicación ajax es en una página PHP que agrega un archivo de registro. Este ejemplo es eficiente ya que solo adjunta un evento de clic a la ventana. Tampoco interferirá con un usuario que haga clic en un enlace.

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