Яндекс.Метрика Веб-визор – бесплатно своими руками

Недавно популярный сервис статистики “Яндекс.Метрика” опубликовал новую киллинг-фичу: веб-визор. Владельцы корпоративных сайтов сразу начали сходить по ней с ума: вау! Это же фактически съёмка видео в реальном времени действий посетителей на вашем сайте! Не просто тепловая карта, не просто карта кликов, а реальный “ай-трекинг” того как люди возят курсором мыши по вашим веб-страницам. Потрясающий инструмент для маркетолога, но меня в тот момент сильно задела цена, которую Яндекс просил за эту услугу: нужно в течение трёх месяцев тратить не менее 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: в настоящее время веб-визор Яндекс.Метрики уже предоставляется бесплатно.