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 のルートパスワードログイン問題の解決策

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

目次

1. 同期AJAX

2. 非同期AJAX

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

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

5. ビーコンAPI

6. Pingプロパティ

HTML の基礎_一般的なタグ、共通タグ、表

リクエスト数を制限するために Ajax 同時リクエストを実装するために js を使用するサンプルコード

メモリの原則に関する詳細な説明: JS では変数はヒープに保存されるのか、スタックに保存されるのか?

JS でカルーセル画像を実装するいくつかの方法

タイムスタンプの差を計算するSQLメソッド

画像比較を実現するjQueryプラグイン

Dockerでイメージをプルするための手順を完了する

CSS で中空マスクレイヤーを実装するサンプルコード

Webpack でよく使われる 12 個の Loader を共有する (要約)

Vue3 における非親子コンポーネントの値転送の詳細な説明

推薦する

CSS を使用して画像の色を変更する 100 の方法 (収集する価値あり)

アコーディオンセカンダリメニューを実装するためのjQueryプラグイン

Mysql での結合操作

vue3 学習ノートにおける axios の使用の変更の概要

12個のJavascriptテーブルコントロール（DataGrid）が整理されています

Windows 10 インストール vmware14 チュートリアル図

MySQL マルチバージョン同時実行制御メカニズム (MVCC) ソースコードの詳細な説明

LeetCode の SQL 実装 (183. 注文をしたことがない顧客)

Mysql: 定義者として指定されたユーザー ('xxx@'%') が存在しません解決策

MySQL プロンプト「通信パケットの読み取り中にタイムアウトになりました」の解決方法

ウェブページ作成における絶対パスと相対パスの違い

Vue スキャフォールディング学習プロジェクト作成方法

ホバードロップダウンメニューを実装するためのネイティブJS

union (all) と limit および exists キーワードの使用法を理解するための MySQL シリーズチュートリアル

MySQL リンクを表示し、異常なリンクを削除する方法