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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Linux プロセスの CPU 使用率が 700% に達し、終了できない場合の解決策
>>: MySQL 5.7 のルートパスワードログイン問題の解決策
目次1. プロトタイプとは何ですか? 2. プロトタイプ__プロト__ 4. コンストラクター5. ...
例えば:コードをコピーコードは次のとおりです。 <html> <ヘッド> &...
目次テクノロジースタック効果分析するテクノロジースタックサイドバー用Antdtabは要素を使用します...
目次1. リソースのダウンロード2. ソフトウェアを解凍する2.1 場所を選択する2.2 名前を変更...
IPSec の概要IPSec (インターネット プロトコル セキュリティ): ネットワーク層と適用さ...
SQL では、GROUP BY は SELECT の結果のデータをグループ化するために使用されます。...
1. flex-grow、flex-shrink、flex-basis プロパティflex-grow...
需要: この需要は緊急に必要です!地下鉄のシーンでは、脱出経路を示す矢印を描かなければなりません。こ...
1. はじめに少し前、開発者がテスト環境や本番環境で誤った操作をし、データベースを誤って削除/更新し...
この記事では、MySQL 8.0.20のインストールと設定方法についての詳細なチュートリアルを参考ま...
Linux環境変数の設定ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定...
背景先週、会社で MySQL レプリケーションのトレーニングを受けたので、今週末は学んだことを実践す...
以前、動的フォームを記述しているときに落とし穴に遭遇しました。インデックスの添え字をキーとして使用す...
これは、データベース サーバーが、接続が多すぎるのを避けるために、一定時間非アクティブな状態が続くと...
目次1. DIVとSPANの違いと特徴2. スパンタグの概要3. 拡大と改善4. 凡例の効果の実証例...