Fai clic su Registrazione con JavaScript

Question

Voglio registrare tutti i clic su un collegamento.

Ho scritto un piccolo logger, che può essere chiamato da un URL (restituisce una pagina vuota). Questo url viene chiamato con un metodo jquery-ajax. Ma sfortunatamente non tutti i clic vengono registrati, se l'utente utilizza Firefox (tutto sembra ok in IE).

Ho provato molte cose ma non ho soluzione a questo problema, qualcuno ha una colla?

codice 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: nell'esempio mi sono perso che devo passare parametri dinamici nella chiamata js, quindi è " impossibile " per rimuovere l'evento onclick :(

Answer 1

Vorrei iniziare eliminando il codice "onclick" in linea e vincolando l'evento in seguito:

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

Inoltre, potresti avere un " Condizioni di gara " che si verificano . Nel mio esempio ho impostato async su false .

Ciò interromperà la funzione che ritorna e segue il collegamento prima dell'esecuzione della richiesta.

Informazioni su Async

Il motivo per cui utilizzo async: false qui è perché con l'impostazione predefinita, aync è vero, il che significa che la richiesta AJAX può essere trasmessa solo parzialmente quando il browser visualizza return: true e si allontana dalla pagina.

Questo è " condizioni di gara " Stavo citando. Qui, è un trucco economico che lo evita facendo essenzialmente fermare il browser fino a quando la richiesta non è completa e quindi consentire al browser di fare clic sul collegamento.

Una risposta più sofisticata sarebbe che restituisca " false " ;, (che ucciderà il browser nativo " segui il link " comportamento), e quindi avrà il reale reindirizzamento eseguito nella funzione complete.

Questo non è privo di problemi propri e potrebbe comportare un comportamento di navigazione lenta mentre le richieste sono complete, consentendo agli utenti di fare clic su altri collegamenti, che sembrano non fare nulla, e quindi alla fine una richiesta arriva a caso, e si verifica un reindirizzamento apparentemente casuale.

Pertanto, le soluzioni avanzate includono il blocco del resto della pagina e una sorta di indicazione dell'avanzamento mentre la richiesta viene completata.

(E quindi, la complessità di questa soluzione è un ordine di grandezza più difficile da realizzare in un semplice esempio di <=>)

Answer 2

Penso che il motivo per cui FF ti sta dando scarsi risultati è perché stai lasciando la pagina prima che l'azione richieda tempo per essere eseguita. Come menziona il link di mhartman se usi un target sul tuo link esterno, dovrebbe funzionare bene. Se non riesci a farlo, potresti dover attendere il completamento del log, anche se potresti riscontrare ritardi nella navigazione.

codice HTML

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

il

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 secondo approccio lato server che potresti non aver pensato sarebbe quello di avere una pagina che gestisca i tuoi reindirizzamenti e registri i dati.

Ad esempio:

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

Answer 4

Il poster sopra è corretto, non è affidabile perché si sta lasciando la pagina prima che abbia la possibilità di registrarla.

Puoi farlo:

1) restituisce false, quindi l'href non è attivo. 2) registra il clic 3) usa location.href per reindirizzare all'URL in cui sarebbe stato reindirizzato

potresti notare un leggero ritardo se il gestore onclick impiega molto tempo a eseguire.

Answer 5

In questo esempio verrà generato un post Ajax prima che il clic sul collegamento venga elaborato. Ho scoperto che dovevo chiamare ajax in modo sincrono o il POST non verrà eseguito. In questo esempio il mio post ajax è su una pagina PHP che aggiunge un file di registro. Questo esempio è efficace poiché collega solo un evento click alla finestra. Inoltre, non interferirà con un utente che fa clic su un collegamento.

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