CSS を使用した Web サイト訪問者の追跡

ドイツの物理学学生でプログラミングに興味のある Jan Brömer 氏は、 JavaScript の力を使わずに CSS のみを使用してサイト上の訪問者の動きを追跡する 例をGitHubで公開しました。 Ian が提供するコードを使用すると、文書の外観を記述する形式言語を使用して、デバイスの画面解像度、ブラウザ (またはエンジン) の種類、指定されたフォントの有無など、ユーザーに関する特定の情報を収集できます。もっと。ユーザーがたどったリンクやカーソルを移動したリンクを追跡することも可能です。ページの背景にある非表示のフィールドのテーブルを使用すると、画面上でマウスを移動する際の特徴を識別できます。ただし、繰り返しのアクションは考慮されないため、上記の方法を追跡に使用できるのは、ユーザーが初めてページにアクセスした場合、または非表示のテーブルの特定のセル上にマウスを置いた場合のみです。ここでメソッドの動作を確認できます。このメソッドを使用するには、URL (「foo.bar」) を使用して外部ソースから CSS に画像を追加します。リソースは必要な場合にのみイメージではなくロードされるため、コレクタ スクリプトへのリンクを指定し、それをリンクのクリックやリンク上でのマウスの移動などのイベントにバインドできます。したがって、ユーザーがリンクをクリックしたときに特定の URL をトリガーするセレクターを CSS で作成できます。

# link2 : active :: after {
     content : url ( " track.php? action = link2_clicked " );
}

ブラウザの種類の検出は@supportsルール に基づいています。ここでは、-webkit-Appearance など、ブラウザーのいくつかの CSS プロパティを確認する必要があります。

@supports ( -webkit-appearance : none ) {
     #chrome_detect :: after {
         content : url ( " track.php? action = browser_chrome " );
    }
}

OS が異なれば送信されるフォントも異なるため、フォントを使用してユーザーの OS を特定できます (たとえば、Windows の「Calibri」)。フォントを定義するには、データ収集スクリプトとなるロードのソースとなる新しいフォント ファミリを作成する必要があります。次に、テキストのブロック内で、テスト対象のフォントが最初に示され、新しいファミリーのフォントが 2 番目に示されます。次に、テキストはフォントのスタイルを設定しようとします。最初のフォントが存在する場合、2 番目のフォントは無視されます。ただし、チェックするフォントがない場合、ブラウザはダミー フォントをフォールバックとして使用し、外部スクリプトにリクエストを送信しようとします。

@ font-face {
     font-family : Font1;
    src : url ( " track.php? action = font1 " );
}

# font_detection1 {
     font-family : Calibri, Font1;
}

このメソッドを使用した後に結果が得られない場合、または PHP 警告が表示される場合は、プロパティ値が false であるか、ユーザーがまだページ/リンクにアクセスしていないことを意味します。