Verfolgung von Benutzer-Interaktion auf einer Webseite

Ich versuche zu verfolgen Benutzer-Interaktion auf einer website, die ich verwalten, mich. Durch tracking-ich meine, ich möchte, um zu verfolgen, welche Taste oder das widget, das der Benutzer gedrückt und Wann und auch wie viel Zeit ein Benutzer ausgegeben und etc. Bevor ich Tauchen Sie ein in die Codierung etwas über Javascript, die ich nur um eine Idee zu bekommen, was sind die besten Optionen, um solche Dinge zu tun und mögliche Fallstricke.

Ich denke, deine Frage ist ein bisschen breit. Sie könnte verwenden unterschiedliche Technologien, um Ihr Ziel zu erreichen. Zu hören, die Ereignisse jQuery, um die Daten zu speichern müssen Sie die Optionen wie PHP oder Python.
Es gibt third-party-js-tools wie omniture , comscore, die es ermöglichen, tracking auf einem mehr granularen Ebene über die Website. Ich bin nicht sicher, ob dies eine option für Sie
Danke ! Auch ich habe bereits ein back-End-Datenbank in MySQL und dem framework läuft auf Python. Ich versuche nur, um eine grundlegende workflow für die Nachverfolgung. So zum Beispiel das klicken auf eine Schaltfläche sollte , vielleicht, Feuer ein ajax-Aufruf und die Durchführung der normalen Aufgabe zur gleichen Zeit asynchron. Wie kann ich erreichen, dass. Könntest du ein Beispiel zeigen ?

InformationsquelleAutor Zahid Hossain | 2013-09-12

Es ist schon einige Zeit her, dass diese Frage gepostet wurde, aber ich habe ein einfaches JavaScript-Modul, genau dies zu tun.

Anstatt mit Bildern, es fängt Ereignis-Daten die vom Nutzer angegebenen HTML-element(s) entlang Seite einige grundlegende Informationen über die Website-Besucher browser-Konfiguration. Die Daten werden dann an einen angegebenen server-Endpunkt mit einem XHR ausgelöst, auf die beforeunload Veranstaltung.

Hier ein link zum GitHub-Projekt und ein Beispiel-Seite

Bezug auf den code, hier ist ein Beispiel, wie der HTML würde das so Aussehen:

<!DOCTYPE html>
<html>
    <head>
        <title>Interaction Tracker Example</title>
    </head>
    <body>
        <div class="someElement"></div>
        <div class="someOtherElement"></div>
        <div class="conversion"></div>
        <script src="interactor.min.js" type="application/javascript"></script>
        <script>
            //An example instantiation with custom arguments
            var interactions = new Interactor({
                interactions        : true,
                interactionElement  : "someElement someOtherElement",
                interactionEvents   : ["mousedown"],
                conversions         : true,
                conversionElement   : "conversion",
                conversionEvents    : ["mouseup"],
                endpoint            : '/usage/interactions',
                async               : true
            });
        </script>
    </body>
</html>

Die Architektur ermöglicht es Ihnen, leicht verfolgen Sie mehrere Elemente durch mehrere Instanzen, so dass Sie anpassen, welche Endpunkte verschiedene Interaktionen, die gesendet werden. Dies ermöglicht eine saubere Trennung von server-side pre-processing vor der Speicherung der Daten in einer Datenbank.

var elementsToTrack = [
    {
        element  : "cssClass1",
        events   : ["mouseup", "touchend"],
        endpoint : "/interactions/c1"
    }, 
    {
        element  : "cssClass2",
        events   : ["mouseup"],
        endpoint : "/interactions/c2"
    },
    { 
        element  : "cssClass3",
        events   : ["mouseup"],
        endpoint : "/interactions/c3"
    }
];

for (var i = 0; i < elementsToTrack.length; i++) {
    var el = elementsToTrack[i];
    new Interactor({
        interactionElement  : el.element,
        interactionEvents   : el.events,
        endpoint            : el.endpoint
    });
}

Schließlich, es ist sehr leicht (etwa 5KB minified) und leicht erweiterbar ist, um die meisten Bedürfnisse.

InformationsquelleAutor Greenstick

3

Wenn Sie nicht brauchen, um wieder einen beliebigen Wert vom server, ajax ist ein bisschen overhead - würde ich verwenden Sie die Bild-pings (Erstellung von Bild-Elemente mit script als Quelle, mit der alle parameter, die Sie senden möchten)

Für Veranstaltungen, die Sie binden, zu dokumentieren und überprüfen Sie die Ereignis-Ziel (bewusst - Unschärfe, Fokus und ändern Sie nicht die Blase)
```
document.body.addListener(event, function() {
    var i = new Image();
    i.src = 'script.php?target=' + event.target;
}, false);
```
Zur Zeitmessung, Sie überprüfen könnten, Zeit, die vergeht zwischen den Ereignissen auf Elemente.

Wie funktioniert das? Was bedeutet die Daten Aussehen?

InformationsquelleAutor magyar1984
1

Ich würde empfehlen, sich in so etwas wie mixpanel. Es ist sehr einfach zu integrieren und Sie bieten Ihnen mit den grafischen tools zum analysieren großer Datenmengen. Die grundlegende Prämisse ist ähnlich zu dem, was Sie sagte. Feuer asynchrone Ereignisse auf spezifische Interaktion mit dem Benutzer, vorbei, entlang einer Reihe von Optionen. Sie können auch integrieren Sie in Ihre Python-code, die macht es einfach zu verfolgen, wenn Sie server-Seite-Aktionen stattfinden. Beispiel:
```
$("#my_button").click(function() {
  //This sends us an event every time a user clicks the button
  mixpanel.track("Button clicked"); 
});
```
Erkunden Sie die Dokumente für sich selbst. https://mixpanel.com/docs/integration-libraries/javascript

Mixpanel ist nur eine option, aber die Prämisse ist die gleiche für alle. Die Sache, die Sie beachten müssen, ist die Verwaltung, die Daten, nachdem es gesammelt wurde. Unternehmen wie mixpanel bieten eine schöne GUI zu machen, weniger Kopfschmerzen.

InformationsquelleAutor mikekavouras
0

Google Analytics bietet eine gute Javascript-Bibliothek für:

https://github.com/googleanalytics/autotrack

Natürlich, es erwartet Sie die Verwendung von Google Analytics in Eure app, aber es hat eine Kostenlose version, die Sie verwenden können. Überprüfen Sie die Vergleich zwischen Ihren Kostenlose und kostenpflichtige services.

InformationsquelleAutor pfernandom

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.