Blog

CSSでユーザーのトラッキング

2019.02.19Cat:Blog css3

githubはこちらです。

JSを使わずにCSSだけでユーザーのトラッキングができます。
そういう発想があるのはすごいと思います。

基本的な仕組みはCSSのurl()関数を使います。

リンクのトラッキング
特定のリンクをクリックしたり、ホバーしたりする際に、指定のUPLにリクエストを送りたら、
サーバー側は情報を取得できます。

CSS

ブラウザの判定
@supportsを使用して、ブラウザーが特定のCSS機能をサポートするかを確認して判定します。

例:
Firefox : -moz-appearance
Safari or Chrome : -webkit-appearance

CSS

ホバー時間
新しいキーフレームを定義して、新しいキーフレームがリクエストされるたびにurlをリクエストます。

CSS

定義されたキーフレームをアニメーションとして使用します。
その持続時間が最大測量時間と同じです。
そうすると、特定のエリアでマウスを動かしていた時間を測量できます。

CSS

選択の解析
ユーザーはチェックボックスをチェックしたかどうかは、CSSの:checkedを使用します。

CSS

ユーザーはフォームに特定の文言を入力したかどうかは、HTMLのpattern属性を使用します。
:validと組み合わせて、正規表現で入力した値と一致したら指定のUPLにリクエストします。

HTML

CSS

一切CSSが使われないなら、この通りでトラッキングを避けるのは可能ですが、難しいと思います。

Author Profile

ShuTzuyu
台湾出身のシュウです。 大学は情報管理と国際企業を専攻、2015年卒業後、来日。 アニメとデザインが好きです。
» 投稿一覧
     
  • Launch Cart越境ECカート

Archive

ページTOPへ