Недавно популярный сервис статистики “Яндекс.Метрика” опубликовал новую киллинг-фичу: веб-визор. Владельцы корпоративных сайтов сразу начали сходить по ней с ума: вау! Это же фактически съёмка видео в реальном времени действий посетителей на вашем сайте! Не просто тепловая карта, не просто карта кликов, а реальный “ай-трекинг” того как люди возят курсором мыши по вашим веб-страницам. Потрясающий инструмент для маркетолога, но меня в тот момент сильно задела цена, которую Яндекс просил за эту услугу: нужно в течение трёх месяцев тратить не менее 6000 рублей рекламного бюджета в месяц.
Деньги в целом небольшие, но неприятен сам факт. Поэтому сегодня у меня наконец-то дошли руки рассказать, как устроена эта технология и как сделать аналогичную штуку на своём сайте совершенно бесплатно.
Я не в коем случае не призываю вас “ломать” код Метрики и использовать его в каких-либо нелегальных целях. В том числе – не предлагаю анализировать код самой Яндекс.Метрики во избежание нарушений его лицензионного соглашения. Но тем не менее, это даже не изобретение Яндекса. Сама по себе технология существовала уже много лет, а Яндекс просто купил реализацию, популяризировал и начал продавать как сервис.
Рассмотрим исключительно технологические моменты на примере скрипта, несколько лет назад опубликованного зарубежным разработчиком по ссылке http://blog.fl3x.de/2007/10/18/record-mouse-movement-using-javascript-and-ajax/
Суть в следующем:
На ваши страницы ставится небольшой яваскрипт, который с заданной периодичностью (допустим каждые полсекунды) записывает текущие координаты курсора мыши. Независимо записываются клики. Всё это держится в оперативной памяти до того момента, как вы покидаете страницу. В момент перехода на любую другую страницу – он перехватывается и всё записанное содержимое сбрасывается (постится) в виде JSON-массива на некий файл record.php.
Задача этого php-файла проста: записать принятые данные в файл (или в базу данных), извлечь из них ссылку (куда вы таки хотели перейти) и отредиректить вас туда. Для пользователя это происходит практически незаметно.
Если вы хотите воспроизвести записанные действия, то при генерации страницы нужно просто считать соответствующие записи действий, распарсить JSON-данные и включить их конец html-кода в виде готовых инструкций для яваскрипта, примерно так:
foreach ($j->events as $event) { ?> E.addEvent ( new Event.Replayable(“<?=$event->type?>”, “<?=$event->target?>”, <?=$event->mouseX?>, <?=$event->mouseY?>, new Date().getTime() + <?=$event->time?>, ‘<?=$event->id?>’, ‘<?=$event->href?>’ ) ); <? }
В html-коде появятся аккуратные строчки:
<script>
E.addEvent ( new Event.Replayable(“mousemove”, “BODY”, 495, 1, new Date().getTime() + 10222, ”, ” ) );
E.addEvent ( new Event.Replayable(“mousemove”, “BODY”, 1087, 5, new Date().getTime() + 10645, ”, ” ) );
E.addEvent ( new Event.Replayable(“mousemove”, “BODY”, 1097, 1, new Date().getTime() + 10764, ”, ” ) );
E.addEvent ( new Event.Replayable(“mousemove”, “A”, 357, 80, new Date().getTime() + 45059, ”, ” ) );
E.replayEvents();
</script>
Всё! Демку можно увидеть на сайте разработчика: http://pure.rednoize.com/movelogger/
Советы:
– в record.php приходит сырой пост, не пытайтесь его найти в массиве $_POST. Используйте хитрую фичу $c=file_get_contents(‘php://input’);
– фальшивый курсор, который двигается при воспроизведении видео, это обычная картинка (в данном примере img id=”crosshair”), если вы её не поставите то и курсора не увидите.
UPD: в настоящее время веб-визор Яндекс.Метрики уже предоставляется бесплатно.