So verfolgen Sie Benutzer mit JS

1. Synchrones AJAX

Eine gängige Methode zum Zurücksenden von Daten an den Server besteht darin, die gesammelten Benutzerdaten in das Entladeereignis einzufügen und sie mithilfe einer AJAX-Anfrage an den Server zurückzusenden.

Allerdings kann es sein, dass asynchrones AJAX beim Entladeereignis nicht erfolgreich ist, weil die Webseite bereits entladen wird und der Browser es möglicherweise sendet, aber nicht muss. Daher müssen wir zu einer synchronen AJAX-Anfrage wechseln.

window.addEventListener('entladen', Funktion (Ereignis) {
  let xhr = neue XMLHttpRequest();
  xhr.open('posten', '/log', falsch);
  xhr.setRequestHeader('Inhaltstyp', 'Anwendung/x-www-form-urlencoded');
  xhr.send('foo=bar');
});

Im obigen Code ist der dritte Parameter der Methode xhr.open() false, was auf eine synchrone Anforderung hinweist.

Das größte Problem bei diesem Ansatz besteht darin, dass Browser die Verwendung von synchronem AJAX im Hauptthread nach und nach nicht mehr zulassen. Daher funktioniert der obige Code nicht wirklich.

2. Asynchrones AJAX

Asynchrones AJAX funktioniert tatsächlich. Die Voraussetzung ist, dass beim Entladevorgang einige zeitaufwändige Synchronisierungsvorgänge stattfinden müssen. Dadurch bleibt genügend Zeit, damit das asynchrone AJAX erfolgreich gesendet werden kann.

Funktion log() {
  let xhr = neue XMLHttpRequest();
  xhr.open('posten', '/log', wahr);
  xhr.setRequestHeader('Inhaltstyp', 'Anwendung/x-www-form-urlencoded');
  xhr.send('foo=bar');
}

window.addEventListener('entladen', Funktion(Ereignis) {
  Protokoll();

  // eine zeitaufwändige Operation
  für (sei i = 1; i < 10000; i++) {
    für (let m = 1; m < 10000; m++) { weiter; }
  }
});

Im obigen Code wird die Ausführung einer Doppelschleife erzwungen, die die Ausführungszeit des Entladeereignisses verlängert und dazu führt, dass das asynchrone AJAX erfolgreich gesendet wird.

3. Verfolgen von Benutzerklicks

setTimeout kann das Entladen der Seite auch verzögern, um sicherzustellen, dass die asynchrone Anforderung erfolgreich gesendet wird. Unten sehen Sie ein Beispiel zum Verfolgen von Benutzerklicks.

// Der HTML-Code lautet wie folgt // <a id="target" href="https://baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" >klick</a>
const Klickzeit = 350;
const theLink = document.getElementById('Ziel');

Funktion log() {
  let xhr = neue XMLHttpRequest();
  xhr.open('posten', '/log', wahr);
  xhr.setRequestHeader('Inhaltstyp', 'Anwendung/x-www-form-urlencoded');
  xhr.send('foo=bar');
}

theLink.addEventListener('klicken', Funktion (Ereignis) {
  event.preventDefault();
  Protokoll();

  setzeTimeout(Funktion () {
    window.location.href = theLink.getAttribute('href');
  }, Klickzeit);
});

Der obige Code verwendet setTimeout, um die Seitenumleitung um 350 Millisekunden zu verzögern und so dem asynchronen AJAX Zeit zum Senden zu geben.

4. Rebound-Verfolgung

Verfolgen Sie Benutzerklicks und verwenden Sie Bounce-Tracking.

Das sogenannte „Bounce-Tracking“ bedeutet, dass eine Webseite beim Absprung zunächst zu einer oder mehreren Zwischen-URLs springt, um Informationen zu sammeln, und dann zur ursprünglichen Ziel-URL springt.

// Der HTML-Code lautet wie folgt // <a id="target" href="https://baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" >klick</a>
const theLink = document.getElementById('Ziel');

theLink.addEventListener('klicken', Funktion (Ereignis) {
  event.preventDefault();
  fenster.location.href = '/jump?url=' + 
    encodeURIComponent(theLink.getAttribute('href'));
});

Wenn der Benutzer im obigen Code klickt, wird er gezwungen, zu einer Zwischen-URL zu springen, die Informationen zu übernehmen und nach der Verarbeitung zur ursprünglichen Ziel-URL zu springen.

Google und Baidu machen das jetzt auch. Wenn Sie auf die Suchergebnisse klicken, werden diese mehrmals zurückgewiesen, bevor sie zur Ziel-URL springen.

5. Beacon-API

Die oben genannten Vorgehensweisen verzögern die Deinstallation von Webseiten und beeinträchtigen das Benutzererlebnis erheblich.

Um das Problem zu lösen, dass asynchrone Anforderungen beim Entladen der Webseite nicht erfolgreich sein können, hat der Browser speziell eine Beacon-API implementiert, mit der asynchrone Anforderungen vom aktuellen Hauptthread getrennt und im Browserprozess gesendet werden können, sodass das Senden garantiert werden kann.

window.addEventListener('entladen', Funktion (Ereignis) {
  navigator.sendBeacon('/log', 'foo=bar');
});

Im obigen Code stellt die Methode navigator.sendBeacon() sicher, dass die asynchrone Anfrage gesendet wird. Der erste Parameter ist die anzufordernde URL und der zweite Parameter sind die zu sendenden Daten.

Beachten Sie, dass die Beacon-API eine POST-Anfrage ausgibt.

6. Ping-Eigenschaften

Der HTML-Tag <a> verfügt über ein Ping-Attribut. Sobald der Benutzer darauf klickt, wird eine POST-Anfrage an die durch das Attribut angegebene URL gesendet.

<a href="https://baidu.com" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" ping="/log?foo=bar">
  klicken
</a>

Wenn der Benutzer im obigen Code auf die Sprungschaltfläche klickt, wird eine POST-Anfrage an die URL /log gesendet.

Das Ping-Attribut kann keinen Datenkörper angeben und es scheint, dass die Informationen nur über die Abfragezeichenfolge der URL übermittelt werden können.

Oben finden Sie Einzelheiten zum Verfolgen von Benutzern mit JS. Weitere Informationen zum Verfolgen von Benutzern mit JS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!