Klicken Sie auf Protokollierung mit JavaScript

Question

Ich möchte alle Klicks auf einen Link zur Anmeldung.

Ich habe ein wenig Logger geschrieben, die durch eine URL (gibt eine leere Seite) aufgerufen werden kann. Diese URL wird mit einer Jquery-Ajax-Methode aufgerufen. Aber leider ist nicht jeder Klick protokolliert, wenn der Benutzer verwendet firefox (sieht alles ok in IE).

Ich habe viele Dinge ausprobiert, aber keine Lösung für dieses Problem, habe jemand einen Klebstoff?

HTML-Code:

<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: Ich habe im Beispiel verpaßt, dass ich dynamische Parameter in dem js-Aufruf übergeben müssen, so ist es „nicht möglich“ das Onclick-Ereignis zu entfernen: (

Answer 1

Ich würde anfangen, 'Onclick' des Inline-rid Code und Bindung das Ereignis später:

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

Auch Sie könnten eine "Race Condition" haben auftretenden . In meinem Beispiel habe ich gesetzt asynchrone auf false .

Damit wird die Funktion zurückkehrt und über den Link stoppen, bevor die Anforderung durchgeführt wurde.

Über Async

Der Grund, warum ich async: false hier verwenden, weil mit dem Standard, aync wahr ist, was die AJAX-Anforderung bedeutet, dass nur teilweise durch die Zeit übertragen werden kann der Browser return: true und navigiert weg von der Seite sieht.

Dies ist das „Race Condition“ Ich war zu erwähnen. Hier ist es ein billiger Trick, der es, indem sie den Browser im Wesentlichen zum Stillstand kommen vermeidet, bis die Anforderung abgeschlossen ist, und dann den Browser ermöglicht den Link zu klicken.

Eine anspruchsvollere Antwort wäre, die es zurückgeben „false“, (was den Browser tötet native „auf dem Link“ Verhalten), und dann wird das mit real Umleitung in der complete Funktion ausgeführt.

Das ist nicht ohne seinen eigenen Probleme Geist und in langsamen Surfverhalten während Anforderungen vollständig, so dass Anwender Zeit andere Links klicken führen könnte, die nichts scheinen zu tun, und dann schließlich eine Anfrage bekommt zu einem zufälligen Zeitpunkt durch, und eine scheinbar zufällige Umleitung auftritt.

Daher erweiterte Lösungen umfassen den Rest der Seite blockiert und eine Art von Fortschrittsanzeige zu geben, während die Anforderung abgeschlossen ist.

(und somit die Komplexität dieser Lösung ist eine Größenordnung schwieriger, in einem einfachen Beispiel als async: false abziehen)

Answer 2

Ich denke, der Grund FF SieFormal schlechte Ergebnisse ist zu geben ist, weil Sie die Seite gehen, bevor die Aktion Zeit in Anspruch nimmt auszuführen. Wie mhartman des Link erwähnt, wenn Sie ein Ziel auf dem externen Link verwenden, sollte es funktionieren. Wenn Sie das nicht tun können, dann können Sie warten, bis das Protokoll zu beenden, obwohl es zu Verzögerungen bei der Navigation sehen können.

HTML-Code

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

die

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

Ein zweiter Server-Seite Ansatz, die Sie nicht gedacht haben würde, eine Seite zu haben, die Ihre Umleitungen behandelt und protokollieren dann die Daten.

Zum Beispiel:

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

Answer 4

Das oben gezeigte Plakat richtig ist, es ist unzuverlässig, weil Sie die Seite verlassen, bevor es eine Chance, es zu loggt hat.

Sie können dies tun:

1) return false, so dass der href nicht aktiv ist. 2) log das Klicken 3) verwenden location.href auf die URL umleiten es umgeleitet worden wäre, zu

Sie könnten eine leichte Verzögerung sehen, ob es lange Zeit für die Onclick-Handler nimmt auszuführen.

Answer 5

In diesem Beispiel wird eine Ajax-Post, bevor der Link klicken abfeuern verarbeitet wird. Ich fand ich hatte Ajax anrufen synchron oder die POST wird nicht ausgeführt. In diesem Beispiel ist meine Ajax-Post auf eine PHP-Seite, die eine Protokolldatei anhängt. Dieses Beispiel ist effizient, da es nur ein Click-Ereignis an das Fenster anbringt. Es wird auch nicht stört ein Benutzer auf einen Link klicken.

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