CSSを使用したユーザーアクションの追跡

この投稿では、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 ）を使用できます。

 /* <a class="spycss" href="https://google.com">spycss</a>*/ .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を決定する
• デバイスの向きとタイプを決定する

この投稿では、最も必要な追跡メカニズムのいくつかがレビューされました。 上記のすべてのアプローチがここで使用されている完全な例を見つけることができます 。