Как можно отслеживать пользователей сайта на чистом CSS

Что можно узнать при помощи данного метода?

Основная информация которую мы можем отследить о пользователи при помощи данного метода, это:

  • разрешение экрана устройства входа;
  • используемый браузер;
  • кликаемые внешние ссылки;
  • элементы, на которые наводится мышь;
  • системные шрифты.

Как это работает?

В CSS мы можем добавлять изображения с внешнего ресурса с помощью свойства url("foo.bar"); Интересно то, что данный ресурс загружается только тогда, когда это необходимо(например, при нажатии на ссылку)

Таким образом, мы можем создать селектор в CSS, который вызывает определенный URL-адрес, когда пользователь нажимает на ссылку:

На стороне сервера, скрипт PHP, сохраняйте метку времени, когда вызывается URL.

Какой используется браузер можно определить с помощью @supports Media-Query, где мы проверяем свойства CSS для браузера,специфичные для каждого отдельно(например -webkit-appearance для Chrome)

Что бы определить шрифт, создается новое семейство шрифтов (вместо ссылки на шрифт, вставляется ссылка на скрипт для отслеживания статистики). Затем производится проверка наличия шрифта в системе пользователя, и когда он не найден, будет вызван уже фиктивный шрифт.

Протестировать данный метод можете самостоятельно в тут.

Источник: GitHub

Оставьте ответ

comment-avatar

*