この投稿では、JavaScriptをオフにしてプラグインがなくても、動作データをサードパーティサーバーに送信できる理由を確認できます。
また、ここでは、HTMLとCSSのみを使用してユーザーから行動情報を取得する方法についても説明します。
おそらく、この記事を読んだ後、私は「車輪を発明した」と思われるでしょう。 実際、この投稿で説明されているメソッドは新しいものではなく、ほぼすべてのブラウザーをサポートする仕様を使用しています。
何らかの方法で、この情報は、ユーザーの行動を監視する非標準の方法を理解するのに役立ちます。現時点では、「設定」で「無効」にしたり、AdBlockやGhosteryなどのプラグインでブロックしたりすることはできません。
背景
あなたが持っていることをちょっと想像してください：
- JavaScriptがオフになっている、またはGhosteryなどのプラグインがインストールされているオーディエンス
- ユーザーの行動を追跡したい
この問題の解決策を見つける前に、現在どのような追跡方法があるのか見てみましょう。
- Yandex.Metrica、GoogleアナリティクスなどのJavaScriptのバグは、クライアント側で機能します。
- logstash、awstatなどのアプリケーションログアナライザー -サーバー上のアプリケーションログを操作します。
- 静的カウンター -原則として、非表示の画像またはその他のリソースをロードし、JavaScriptコードを必要としません。
JavaScriptのバグは、要件に基づいて適切ではありません。 静的カウンタが付属しているものを除きます。 たとえば、Yandex.Metricaのバグは、次の形式の画像をアップロードします。
<noscript><div><img src="//mc.yandex.ru/watch/XXXXXXXX" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
クライアントがJavaScriptを実行しない場合、このアプローチは次のような情報を提供します。
- ヒット
- ホスト
- IPアドレス
- 訪問時間
- ...その他のデータ
しかし、1つの問題があります。すべての情報は本質的に静的です。つまり、ユーザーがページ上でどのように行動したかに関する情報を受け取りません。
解決策-CSSを使用する
CSSでは、 url（resource-address）ステートメントを使用して外部リソースをロードできます。 通常、このリソースは、ページのレンダリングに必要になったときにのみロードされます。 この機能を使用して、ユーザーの行動に関する情報を収集してみませんか？ 次のような特別なCSSを非常にうまく作成できます。
- ユーザーの行動データを収集する
- CSSハックを使用してブラウザーのバージョン/機能を定義する
そのため、私たちのタスクはHTML + CSSコードを生成することです。これにより、ユーザーと対話するときにブラウザーがサーバーにgetリクエストを行うようになります。
たとえば、リンクのクリックを追跡するとします。 このために、 ：active pseudo-class 、つまりそのようなテンプレート（ jsfiddle ）を使用できます。
.spycss:active::after { content: url("/backend/click-google"); }
このようなリンクをクリックすると、/ backend / click-googleでGETが取得されます。
同様に、他の擬似クラスを使用できます。
.spycss1:hover::after { content: url("/backend/hover"); } .spycss2:focus::after { content: url("/backend/hover"); }
どちらの場合も、サーバーでGETを受け入れます。
SpyCssで高速化する
このようなCSSを手動で記述し、すべてのリンクを追跡することは、非常に問題が多く非生産的です。 これらの目的のために、小さなSpyCssライブラリを作成しました。 これを使用すると、問題なくトラッキングHTML + CSSを生成できます。 たとえば、このコードを使用して追跡リンクを生成できます。
<?php // , State-less $userId = 'get_from_cookie--OR--fetch_from_db'; // , GET . $backendUrl = 'https://spy-css-backend/'; $s = new \SpyCss\SpyCss($userId, $backendUrl); // // <a class="scsssXXXX" href="https://hcbogdan.com">hcbogdan.com</a> echo $s->builder() ->tag('a') ->content('hcbogdan.com') ->attribute('href', 'https://hcbogdan.com') ->interactions([ new SpyCss\Interaction\Active('click_on_hcbogdan_com') ]) ->get(); // CSS echo '<style>'.$s->extractStyles().'</style>';
これで、リンクのクリックを追跡し、DOM要素の上にマウスを移動できます。 HTML5フォームを見てみましょう。 つまり、検証（ jsfiddle ）の場合：
<form> <input type="text" name="name" required /> </form> <style> .field:valid { background: red; } </style>
有効な疑似クラスを使用してフォームの入力を追跡できるのとまったく同じ方法で判明します。
// <input type="text" class="scsssXXXX" required /> echo $s->builder() ->tag('input') ->attributes([ 'name' => 'you_name', 'value' => '', 'required' => true, 'placeholder' => ' ', ]) ->interactions([ new \SpyCss\Interaction\Valid('you_fill_input'), ]) ->get(); echo '<style>'.$s->extractStyles().'</style>';
ユーザーがフィールドに入力すると、GETリクエストを受け取ります。
また、cssアニメーションを使用して、ユーザーが（ホバー状態を受け取った）DOM要素の上にカーソルを置いた時間を追跡できます。 例：
@keyframes spycss { 0% {background-image: url("/backend/0")} 100% {background-image: url("/backend/100")} } .spycss:hover::after { animation: spycss 20s infinite; }
SpyCssライブラリを使用した同様の例（接頭辞-webkit、-mozが追加されます）：
echo $s->builder() ->tag('a') ->content('hcbogdan.com') ->attributes([ 'href' => 'https://hcbogdan.com', 'target' => '_blank' ]) ->interactions([ new \SpyCss\Interaction\Online('view_on_hcbogdan_com'), ]) ->get(); echo '<style>'.$s->extractStyles().'</style>';
まとめ
JavaScriptのバグがオフになっているかアクセスできない場合でも、CSSを使用します。
- ユーザーの行動を追跡する
- 一部のブラウザバージョンを検出する
- おおよそのウィンドウサイズとPPIを決定する
- デバイスの向きとタイプを決定する
この投稿では、最も必要な追跡メカニズムのいくつかがレビューされました。 上記のすべてのアプローチがここで使用されている完全な例を見つけることができます 。