Прототип системи відслідковування дій користувачів на сайтах за допомогою CSS

Розробник Ян Бьохер (Jan Böhmer) представив прототип системи відстеження переміщення відвідувачів по сайтах за допомогою CSS. Система не вимагає виконання коду на JavaScript.

Які дані можна отримати за допомогою цієї системи?

При розміщенні коду на сайті, можна отримати базову інформацію про відвідувача: інформацію про розмір екрану, тип браузера і наявності заданих шрифтів. На основі відмінностей в доступних шрифтах можна визначити тип ОС.

Крім того, можна визначити по яких посиланнях на сторінці переходив користувач або до яких з посилань підводив курсор миші. Також можна виявити переміщення миші по екрану (фоном виводиться прозора таблиця полів, за якою визначається переміщення миші). Код може відстежувати тільки перші кліки та наведення миші, наступні кліки по посиланням або повторні наведення миші не враховуються.

Як вона працює?

Реалізація використовує можливості CSS по додаванню зображень із зовнішніх джерел за допомогою властивості url ( "foo.bar"). Оскільки ресурси завантажуються тільки при необхідності, можна вказати замість зображення посилання на зовнішній скрипт-відслідковувач статистики й прив'язати до таких подій, як перехід на посилання або підведення миші до посилання. Для відстеження кліків можна використовувати код:

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

Для визначення ідентифікатора браузера можна використовувати правила @supports для перевірки наявності специфічних для кожного типу браузерів властивостей CSS. Наприклад, тільки браузери на Chromium підтримують властивість -webkit-appearance:

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

Для визначення наявності шрифтів в CSS створюється нове фіктивне сімейство шрифтів, як джерело для завантаження якого вказується зовнішній скрипт-відслідковувач даних. Далі формуються блоки тексту в якому першим вказується шрифт, що перевіряється, а другим – фіктивний шрифт. Якщо шрифт, що перевіряється, присутній, то наступний буде проігноровано, але якщо шрифту, що перевіряється, немає, браузер спробує використовувати фіктивний шрифт як запасний варіант і відправить запит до зовнішнього скрипту:

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

Протестувати роботу методу можна на спеціально підготовленій демонстраційній сторінці.