Аналитика будущего — следим за взглядом пользователя

Пример работы

Для работы примера:
— нажмите кнопку «Включить видео и разрешите доступ к камере»
— водите указателем мыши по разным углам экрана нажимая «1» на клавиатуре.
— примерно после 20 нажатий нажмите кнопку «Результат»

 

 

Оригинальный пример статьи про отслеживание взгляда пользователя взят с хабра и источника

Введение

Такой пример отслеживания сейчас — это из разряда sience fiction, и не используется в реальных проектах, не воспринимайте это слишком серьезно.

Иногда при настройке трекинга на сайтах бывают шутки типа «было бы круто сразу следить за взглядом!», и вот теперь это возможно технически, благодаря Machine Learning, а конкретнее TensorFlow.js и clmtrackr.js. Сейчас конечно никто такого не внедрит в свой сайт, особенно учитывая GDPR политику и борьбу за приватные данные в сети, а также то, что такие библиотеки очень активно используют CPU (наверное пользователь сначала подумает, что в сайт встроен майнер), но давайте попробуем запустить простой пример.

Зачем это нужно?

Ну например чтобы при просмотре определенного блока, например товара, или баннера — отправить событие в Google Analytics, даже если пользователь на него не кликнул.

В данном примере реализован самый простой способ — отслеживание взгляда «лево-право». При взгляде на левую часть экрана — background страницы становится красный. При взгляде на правую часть — зеленым.

Но ведь никто не запрещает при этих триггерах (или более сложных) выполнить код:

ga(‘send’,’event’,’view’,’right’) и тому подобное..

Как запустить пример

  • В самом верху страницы, под заголовком есть спойлер, откройте его.
  • Нажмите кнопку «Включить видео и разрешите доступ к камере» (не бойтесь, изображение никуда не передается и не сохраняется).
  • Водите указателем мыши по разным углам экрана нажимая «1» на клавиатуре. Так скрипт сохраняет снимки для обучения.
  • Примерно после 20 нажатий нажмите кнопку «Результат». После этого наш «искуственный интеллект» обучается на снимках и через пару секунд вы увидите указатель.
  • Перемещайте взглядом по разным углам страницы и смотрите на результат 😀.

Что нужно для настройки

TensorFlow.js — библиотека для machine learning’a.
Clmtrackr.js — библиотека для распознавания лица.
Оба скрипта работают в браузере, и не нуждаются в дополнительном сервере.

От вас нужно только подключить их и настроить по примерам самих библиотек.

Понравилась статья? Поделиться с друзьями:
Комментариев: 1
  1. seoonly.ru

    Прикольно… :smile:

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: