2019/02/20
CSSでユーザーのトラッキング
githubはこちらです。
JSを使わずにCSSだけでユーザーのトラッキングができます。
そういう発想があるのはすごいと思います。
基本的な仕組みはCSSのurl()関数を使います。
リンクのトラッキング
特定のリンクをクリックしたり、ホバーしたりする際に、指定のUPLにリクエストを送りたら、
サーバー側は情報を取得できます。
CSS
|
1 2 3 | #link2:active::after { content: url('track.php?action=link2_clicked'); } |
ブラウザの判定
@supportsを使用して、ブラウザーが特定のCSS機能をサポートするかを確認して判定します。
例：
Firefox : -moz-appearance
Safari or Chrome : -webkit-appearance
CSS
|
1 2 3 4 5 | @supports (-webkit-appearance:none) { #chrome_detect::after { content: url("track.php?action=browser_chrome"); } } |
ホバー時間
新しいキーフレームを定義して、新しいキーフレームがリクエストされるたびにurlをリクエストます。
CSS
|
1 2 3 4 5 6 7 8 | @keyframes pulsate { 0% {background-image: url("track.php?duration=00")} 20% {background-image: url("track.php?duration=20")} 40% {background-image: url("track.php?duration=40")} 60% {background-image: url("track.php?duration=60")} 80% {background-image: url("track.php?duration=80")} 100% {background-image: url("track.php?duration=100")} } |
定義されたキーフレームをアニメーションとして使用します。
その持続時間が最大測量時間と同じです。
そうすると、特定のエリアでマウスを動かしていた時間を測量できます。
CSS
|
1 2 3 4 5 6 7 8 | #duration:hover::after { -moz-animation: pulsate 5s infinite; -webkit-animation: pulsate 5s infinite; /*animation: pulsate 5s infinite;*/ animation-name: pulsate; animation-duration: 10s; content: url("track.php?duration=-1"); } |
選択の解析
ユーザーはチェックボックスをチェックしたかどうかは、CSSの:checkedを使用します。
CSS
|
1 2 3 | #checkbox:checked { content: url("track.php?action=checkbox"); } |
ユーザーはフォームに特定の文言を入力したかどうかは、HTMLのpattern属性を使用します。
:validと組み合わせて、正規表現で入力した値と一致したら指定のUPLにリクエストします。
HTML
|
1 | <input type="text" id="text_input" pattern="^test$" required> |
CSS
|
1 2 3 4 | #text_input:valid { background: green; background-image: url("track.php?action=text_input"); } |
一切CSSが使われないなら、この通りでトラッキングを避けるのは可能ですが、難しいと思います。
Author Profile
スターフィールド編集部
SHARE
