JSでユーザーを追跡する方法

1. 同期AJAX

データをサーバーに送り返す一般的な方法は、収集したユーザーデータをアンロードイベントに配置し、AJAX リクエストを使用してサーバーに送り返すことです。

ただし、Web ページはすでにアンロードされており、ブラウザーがそれを送信するかどうかは不明であるため、非同期 AJAX はアンロードイベントで成功しない可能性があります。したがって、同期 AJAX リクエストに変更する必要があります。

window.addEventListener('unload', 関数(イベント) {
  xhr = new XMLHttpRequest();
  xhr.open('post', '/log', false);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send('foo=bar');
});

上記のコードでは、xhr.open() メソッドの 3 番目のパラメーターは false であり、同期要求を示しています。

このアプローチの最大の問題は、ブラウザがメインスレッドでの同期 AJAX の使用を徐々に許可しなくなることです。したがって、上記のコードは実際には機能しません。

2. 非同期AJAX

非同期 AJAX は実際に機能します。前提として、アンロードイベントには時間のかかる同期操作がいくつかある必要があります。これにより、非同期 AJAX が正常に送信されるのに十分な時間が確保されます。

関数log() {
  xhr = new XMLHttpRequest();
  xhr.open('post', '/log', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send('foo=bar');
}

window.addEventListener('unload', 関数(イベント) {
  ログ（）;

  // 時間のかかる操作
  (i = 1; i < 10000; i++ とします) {
    (m = 1、m < 10000、m++ とします) { 続行; }
  }
});

上記のコードでは、二重ループが強制的に実行され、アンロードイベントの実行時間が長くなり、非同期 AJAX が正常に送信されます。

3. ユーザーのクリックを追跡する

setTimeout は、非同期リクエストが正常に送信されるようにページのアンロードを遅らせることもできます。以下は、ユーザーのクリックを追跡する例です。

// HTML コードは次のとおりです // <a id="target" href="https://baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" >クリック</a>
クリックタイム = 350;
const theLink = document.getElementById('target');

関数log() {
  xhr = new XMLHttpRequest();
  xhr.open('post', '/log', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send('foo=bar');
}

theLink.addEventListener('click', 関数(イベント) {
  イベントをデフォルトにしない();
  ログ（）;

  setTimeout(関数() {
    window.location.href = theLink.getAttribute('href');
  }, クリック時間);
});

上記のコードでは、setTimeout を使用してページのリダイレクトを 350 ミリ秒間遅延し、非同期 AJAX の送信時間を確保しています。

4. リバウンドトラッキング

ユーザーのクリックを追跡し、バウンストラッキングを使用します。

いわゆる「バウンストラッキング」とは、Web ページがジャンプするときに、まず 1 つ以上の中間 URL にジャンプして情報を収集し、その後元のターゲット URL にジャンプすることを意味します。

// HTML コードは次のとおりです // <a id="target" href="https://baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" >クリック</a>
const theLink = document.getElementById('target');

theLink.addEventListener('click', 関数(イベント) {
  イベントをデフォルトにしない();
  window.location.href = '/jump?url=' + 
    encodeURIComponent(theLink.getAttribute('href'));
});

上記のコードでは、ユーザーがクリックすると、強制的に中間 URL にジャンプし、情報を引き継いで処理した後、元のターゲット URL にジャンプします。

Google と Baidu は現在これを実行しています。検索結果をクリックすると、対象の URL にジャンプする前に複数回バウンスします。

5. ビーコンAPI

上記の方法を実行すると、Web ページのアンインストールが遅れ、ユーザーエクスペリエンスに重大な影響が生じます。

ウェブページがアンロードされたときに非同期リクエストが成功しない問題を解決するために、ブラウザは特別にビーコン API を実装しました。これにより、非同期リクエストを現在のメインスレッドから分離してブラウザプロセスで送信できるようになり、確実に送信されるようになります。

window.addEventListener('unload', 関数(イベント) {
  navigator.sendBeacon('/log', 'foo=bar');
});

上記のコードでは、navigator.sendBeacon() メソッドによって非同期リクエストが送信されることが保証されます。最初のパラメーターは要求する URL であり、2 番目のパラメーターは送信するデータです。

Beacon API は POST リクエストを発行することに注意してください。

6. Pingプロパティ

HTML <a> タグには ping 属性があります。ユーザーがクリックすると、属性で指定された URL に POST リクエストが送信されます。

<a href="https://baidu.com" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" ping="/log?foo=bar">
  クリック
</a>

上記のコードでは、ユーザーがジャンプボタンをクリックすると、POST リクエストが URL /log に送信されます。

ping 属性ではデータ本体を指定できず、情報は URL のクエリ文字列を通じてのみ伝達されるようです。

上記は、JS でユーザーを追跡する方法の詳細です。JS でユーザーを追跡する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:

JS 非同期スタックトレース: await が Promise よりも優れている理由
JSPからArthasまでのJava動的トレース技術の研究
JS/HTML5ゲームでよく使われるトラッキングアルゴリズムの例の詳細な説明
VueJSデータ駆動型および依存関係追跡分析の詳細な説明
JavaScript のエラー処理とスタックトレースの説明
Raygun を使用して AngularJS で例外を自動的に追跡する
ウェブページでの自動クリックスルーを実現する JS スクリプト
JSスクリプト言語に基づく基本構文の詳細な説明
シンプルな投票システムを書くための js スクリプト

<<: Linux プロセスの CPU 使用率が 700% に達し、終了できない場合の解決策

>>: MySQL 5.7 のルートパスワードログイン問題の解決策

MySQL のタイムスタンプと日付時刻のタイムゾーンの問題によって生じる DTS の落とし穴の詳細な説明

JSでユーザーを追跡する方法

目次

1. 同期AJAX

2. 非同期AJAX

3. ユーザーのクリックを追跡する

4. リバウンドトラッキング

5. ビーコンAPI

6. Pingプロパティ

MySQL のタイムスタンプと日付時刻のタイムゾーンの問題によって生じる DTS の落とし穴の詳細な説明

適応的な幅と高さを持つ9つの正方形グリッドの背景画像の切り取りの分析

ZabbixはSNMPに基づいてLinuxホストを監視します

Vueがsweetalert2プロンプトコンポーネントを統合する際の問題についてお話ししましょう

IE6 フォントを定義できません: 13px サイズは無効です。IE6 は自動的に大きいフォントソリューションを表示します。

Windows 10 Home Edition に Docker をインストールする方法

Web プロジェクトでの SQL インジェクションの防止

EChartsマウスイベント処理方法の詳細な説明

CentOS に MySQL をインストールしてリモートアクセスを設定する方法

JavaScript配列の一般的なメソッドの概要

推薦する

JavaScript の組み込み Date オブジェクトの詳細な説明

Vueでアイコンをカスタマイズする手順

MySQL Bツリーインデックスとインデックス最適化の概要についての簡単な説明

Windows 10 でカスタムドメイン名をバインドするように Hexo と GitHub を構成する方法

Vue のローカルコンポーネントの紹介

MySQLは現在の日付と時刻を取得する関数の例の詳細な説明

psdカット画像をdiv+css形式に変換する

Cronジョブを使用してCpanelでPHPを定期的に実行する方法

HTMLボタンを中央に配置する方法

Nginx URL 書き換えメカニズムの原理と使用例

フローチャートとUIフローの違い

MySQL 匿名ログインでデータベースを作成できない問題の解決方法

各 Nginx プロセスで開くことができるファイルの最大数を設定する方法

vue3を使用して人間と猫のコミュニケーションアプレットを実装する

win10環境でDockerをインストールする実装