CSSのこのアイデアはすごすぎる！Webページのトラッキング・解析ができるスタイルシート -Crooked Style Sheets
Post on:2018年1月19日
sponsors
CSSはスタイルするため、と思っていましたが、ついにその枠を超えたようです。
Webページでどこのリンクをホバーしたのか、そしてクリックしたのか、マウスをどのくらい動かしたのかなど、トラッキングや解析ができるスタイルシートを紹介します。
ユーザーが使用しているブラウザの情報なども取得できます。
まずは、トラッキングや解析ができるデモが公開されているので、お試しください。
リンクをホバーしたり、クリックしたり、マウスを動かした後に、ページ下部の「Watch Results」をクリックすると、結果ページに移動します。
結果ページ
どのリンクをいつクリックしたのか、いつホバーしたのか、指定エリアでどのくらいマウスを動かしたのか、フォームに特定の文言を入力したのか、チェックボックスをクリックしたのか、ブラウザは何か、解像度はいくつか、ディスプレイの向きはどっちなのか、などの情報が表示されました。
※出力する際には、PHPが使用されています。
Crooked Style Sheetsの仕組み
Crooked Style Sheetsは、外部CSS一つを加えるだけで、Webページのユーザーに関するさまざまな情報を取得できます。
基本的な仕組み
CSSではurl()関数を使用して、外部リソースを追加できます。url()関数の値は呼び出された時のみロードされるため、これをリンクがクリックされた時に利用します。
リンクを記述するHTMLは、要素を特定できるようにidを与えます。
|
1 |
<a href="http://foo.bar" id="link2" target="_blank">Link2</a> |
url()関数の仕組みを利用して、ユーザーにリンクがクリックされた時に特定のURLを呼び出すセレクタをCSSで作成します。
|
1 2 3 |
#link2:active::after { content: url("track.php?action=link2_clicked"); } |
サーバー側では、URLが呼び出された時にPHPでタイムスタンプも合わせて結果ページに出力します。
ブラウザの判定
ブラウザを検出するには@supportsを使用して、ブラウザ固有のCSSプロパティ（-webkit-appearanceなど）をサポートするかを確認して判定します。
|
1 2 3 4 5 |
@supports (-webkit-appearance:none) { #chrome_detect::after { content: url("track.php?action=browser_chrome"); } } |
ホバー時間の解析
そのエリアでどのくらい時間マウスを動かしたのかは、そのエリアで新しいキーフレームがリクエストされるたびにurlをリクエストし、新しいキーフレームを定義します。
|
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")} } |
キーフレームをdivのアニメーションとして使用することで、その持続時間がマウスを動かしていた時間と定義することができます。
|
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擬似クラスを使用します。
|
1 2 3 |
#checkbox:checked { content: url("track.php?action=checkbox"); } |
フォームに入力された特定の文言（デモでは「test」）を検出するためには、正規表現で入力値のパターンを指定するHTMLのpattern属性を使用します。:valid疑似クラスと組み合わせると、正規表現で入力した値と一致したときにトラッキングを要求します。
|
1 |
<input type="text" id="text_input" pattern="^test$" required> |
|
1 2 3 4 |
#text_input:valid { background: green; background-image: url("track.php?action=text_input"); } |
フォントの解析
フォントを検出するためには、新しいフォントファミリーを定義します。テキストはそれが存在した場合にはそのフォントで表示しようとします。その時にブラウザがユーザーのシステム上でそのフォントを見つけられない場合、定義されたフォントはフォールバックとして使用されます。すると、ブラウザはフォントをロードしようとして、サーバ上でトラッキングのスクリプトを呼び出します。
|
1 2 3 4 5 6 7 8 |
@font-face { font-family: Font1; src: url("track.php?action=font1"); } #font_detection1 { font-family: Calibri, Font1; } |
sponsors
