Карты скроллинга для эффективного сплит-тестирования. Карта кликов, скроллинга и ссылок в Яндекс.Метрике

Здравствуйте, дорогие читатели моего блога!

Совсем недавно на свой блог я установил счетчик Яндекс Метрика. Этот счетчик, также как и Live Internet, ведет статистику посещаемости интернет ресурсов, но создан в первую очередь для оценки эффективности рекламных компаний, которые проводятся с целью раскрутки блогов и сайтов.

Здесь нажимаем кнопку «Добавить счетчик»:

В открывшемся окне заполняем необходимые поля:

После заполнения информации нажимаем кнопку «Продолжить». В результате откроется вкладка «Код счетчика»:

Здесь можно выбрать элементы счетчика.

Можете сразу отметить галочкой пункт «Вебвизор», тогда действия посетителей будут записываться на видео, которое можно будет потом просматривать и оценивать качество и эффективность страниц сайта.

Советую Вам отметить пункт «Точный показатель отказов». Раньше Яндекс засчитывал показатель отказов немного по другой схеме. Сейчас отказом считается посещение продолжительностью менее 15 секунд и просмотром не более одной страницы.

Новая схема учета позволяет существенно снизить процент отказов на блоге или сайте. Подробнее про отказы я напишу в одной из своих статей, чтобы ничего не пропустить, рекомендую Вам .

Здесь же можете выбрать информер и настроить его внешний вид. Информеры можно выбрать трех видов:

Цветовую схему можно настроить по своему усмотрению:

Если не желаете устанавливать на свой ресурс графический информер, то просто не отмечайте этот пункт. В этом случае после того, как вы вставите код счетчика, никаких внешних изменений на сайте не произойдет, однако статистика будет собираться, и Вы всегда сможете ее посмотреть.

Здесь Вы также можете настроить доступ к статистике. Делается это во вкладке «Доступ». Вариантов всего два, это:

— публичный доступ к статистике;

— показывать данные информера.

Однако можно настроить доступ конкретным пользователям.

После того как Вы выполнили все настройки, необходимо скопировать код, предложенный сервисом, и вставить его на свой ресурс. Например, в футер блога, перед закрывающим тэгом /body.

Статистика, вебвизор, карты ссылок и кликов, анализ показателей Яндекс Метрики.

После установки и настройки счетчика, через некоторое время на информере появятся цифры статистики посещаемости Вашего ресурса:

Вы сможете перейти на сервис Яндекс Метрика и посмотреть статистику более детально.

Здесь все выполнено очень красочно и информативно. Особенностью счетчика Яндекс Метрики являются карты ссылок и кликов, а также Вебвизор – инструмент, который совсем недавно стал доступен всем абсолютно бесплатно. Эти инструменты являются уникальными, их Вы не встретите ни в одном другом счетчике.

При переходе к сервису можно наблюдать следующую картину:

Здесь мы видим статистику посещаемости с прогнозом на сегодняшний день, который составляется на основе предыдущей посещаемости сайта. Также имеется график источников трафика, популярные ключевые фразы, по которым переходят на ресурс, и география посетителей.

Перечислять все возможности Яндекс Метрики не буду, ничего сложного там нет, а остановлюсь, пожалуй, на самых интересных инструментах – это вебвизор и карты ссылок и кликов.

Если при установке счетчика Вы подключили этот инструмент (впрочем, подключить Вебвизор и выполнить другие настройки Вы можете в любое время, перейдя в редактирование своих счетчиков), то производится запись посещений Вашего ресурса, а также действий (кликов, переходов, копирование текста, просмотры страниц и т.п.) проводимых посетителями.

Вы можете посмотреть видеозаписи вебвизора и оценить качество страниц Вашего ресурса, перейдя на вкладку «Поведение — Вебвизор»:

Здесь представлен список посещений с довольно информативным описанием о них:

В этом видео Вы можете просмотреть одну из записей вебвизора на моем блоге:

Карты ссылок и кликов

Тоже довольно интересные инструменты, благодаря которым Вы можете оценить эффективность и целесообразность размещения любых ссылок на ресурсе в том или ином месте каждой его страницы.

Для того чтобы посмотреть карту ссылок, необходимо перейти во вкладку «Поведение-Карта ссылок». Из списка, появившегося в окне, можно выбрать любую страницу для анализа:

После чего Вы увидите такую картину:

Карта кликов немного отличается от карты ссылок. Попасть на нее можно как из окна карты ссылок, так и выбрав в меню вкладку «Поведение-Карта кликов».

Здесь Вы можете наблюдать активность переходов по ссылкам в выбранный Вами период времени. Для наглядности будет построена тепловая карта, в которой, как и в предыдущем случае, наиболее активные ссылки будут выделены теплыми цветами (красный, оранжевый, желтый), а менее активные – холодными (зеленый, синий, фиолетовый). Вот как это выглядит:

Вообще Яндекс Метрика, при правильном подходе, очень полезный и эффективный инструмент, анализируя который, можно оценить и поработать над эффективностью страниц своего ресурса.

Этот инструмент может помочь Вам эффективно размещать ссылки и рекламу на страницах сайтов и блогов, помочь улучшить поведенческие факторы.

Про улучшение поведенческих факторов я писал в , советую Вам ее прочитать.

На этом у меня все. Как Вам статья?

Обсуждение: 37 комментариев

Классная статистика у Яндекса получается. А при установке Яндекс метрики, индексация случайно не ускоряется? 🙂

В видео почему звук отсутствует! :scratch:

Александр Бобрин

Виктор, в вебвизоре нет звука 🙂 Насчет индексации не знаю, у меня она и так быстрая 🙂

Просто у меня иногда Яндекс чудачит. То за 5 мин статью проиндексирует, то 2 дня ждать приходится. с Google вроде пока все спокойно. Как думаешь, может тоже эксперимент провести? Хуже то я думаю не будет?! 🙂

Просто чудеса техники! Очень понравилась тепловая карта! :good:

Убедил. Есть у меня форум который Яндекс наотрез отказывается в поисковую выдачу включать. Поставлю на него метрику, может передумает 🙂

Когда-то стояла у меня еа сайте, который Яндекс не индексировал. Почитал Борисова, убрал. Никаких изменений. Но все же логично, что молодым сайтам с большим показателем отказом ни к чему светиться перед Яндексом.

Саша, А. Борисов писал о том, что молодым блогам вредно ставить я метрику, но вот, каков тот самый порог молодости... Может быть это три, шесть, девять месяцев? А может год — два тоже молодость? Что в твоём понимании зрелый блог и молодой?

И спасибо за хорошую статью. 🙂

Андрей

Я думаю, что если у тебя даже молодой блог, то метрика не повредит. Ну мало у тебя контента и что с того, Яшка понимает что ты еще молодой!

У нас с поведеньческие факторы не очень, очень мног просмотров еденичных... поэтому пока воздержимся вебизора.

Привет Андрей слушай вот у меня статистика стоит от Яндкса давно, но вот вебвизор не как не хочет работать пишет, что нет кода или запрещено отображать страницу во фрейме. Я и так и сяк код вставлял внутри боди всеравно не работает, ❓ может ты знаешь, в чем дело?

Макс у меня та же фигня ошибку вебвизор выбивает... возможно твой сайт построен в системе юкоз? ❓

Мне кажется, что пока блог молодой и соответственно не может похвастаться большой посещаемостью, лучше воздержаться от счетчика Яндекс Метрики. Хоть и различные доводы по поводу этому поводу не доказаны, все же лучше не рисковать. Или ставить только в том случаи, когда он действительно необходим. Это мое мнение!

Яндекс Метрика вообще прикольная штука. Там очень точный анализ поведения можно сделать!

Ого, Александр, меня озадачило уже после первого прочитанного абзаца... а может не стоит на молодой блог ставить много счетчиков?! Наверно я повременю с этим...через время поставлю...

Александр, два вопроса к вам, из прочитанного материала... Первый, у вас метрика счетчик стоит? Куда его предпочитиельно установить? , если он установлен не на главной, то получается он выдает неправильную статистику сайта? Также прочитал статью про ливинтрнет счетчик, то там вы советуете установить его не на главной, а значит и этот счетчик не будет показывать действительную картину? я правильно понял Вас?

Интересный ресурс — эта метрика от яндекса...не думал даже что так много в ней есть возможностей... честно удивлен...спасибо за информацию...

Александр, а где у Вас стоит счетчик метрика, рассмотрел многие страницы, но так и не нашел

Александр

да метрика действительно загадочная статистика... показывает теперь плюс на сайте посещаемость... хотя четыре дня тому назад из-за метрики посещаемость упала... видимо метрика делает какие-то расчеты, что негативно сказываются на сайте...уже думал сегодня убирать эту метрику, но на сегодня показывает радостные цифры...посмотрим что будет дальше... я так и не услышал от Вас, почему метрику убрали?

А я вот, ребята, выскажу свое мнение. Никогда не ставил яндекс-метрику на свой сайт и не поставлю. Мне хватает счетчика от Li. Больше ничего не надо. У меня, кстати, тоже на блоге есть статья про Яндекс-метрику.

Не хочу ставить ее на свой блог. НЕТ. Хоть что со мной делайте =)

Сколько всего придумают, чтобы за сайтом следить. Только и остается сидеть и счетчики изучать. Нужно специально человека нанимать, чтобы следил, одному не справится с этим.

Что, что, а про вебвизор ни разу не слышал. Спасибо за подробное описание этой функции. Попробую применить его на своём сайте.

Хороший счетчик, наряду с аналитикой от Гугл составляют основу для анализа любому вебмастеру, который хочет изучить свою аудиторию и двигаться вперед.

Кстати, Александр, сейчас тестируется новая Метрика, уже пробовали? Мне понравилось, новые возможности, хотя не все показатели еще можно глянуть.

Особенно понравился вебвизор. По этому принципу похоже Яндекс и отслеживает поведенческие факторы каждого сайта.

Вебвизор не понравился, не следит за поп-апами, и были проблемы с мобильными девайсами, не коректно собирал данные, в этом ключе получше смотрится www.plerdy.com/ru/heatmap/

Экономия бюджета

Увеличение конверсии

Улучшение оффера

Карта скроллинга главной страницы сайта такси

Рис. 1 — первый экран сайта. Он должен быть самым «красным», т.к. по умолчанию посетитель попадает сразу на него и видит его какое-то время (время тоже можно увидеть, оно будет отображаться на реальной карте в верхнем левом углу). Вывод по этому экрану сейчас довольно прост — тут вопросов нет.

Рис. 2 — видим, что тут уже область оранжевая. Значит, часть аудитории уже ушла со страницы. Сделали они заявку или нет — это нам не видно без подключения аудиторий. Тем не менее, область оранжевая, значит, люди смотрят этот экран.

Рис. 3 — мы видим, что данная область более красная, чем на рис.2. Значит, посетители на ней проводят больше времени. Это экран с ценами. На ценах всегда должна быть примерно такая картина. Это означает, что в целом предложение посетителю интересно, если цена удовлетворит, то, возможно, будет совершен заказ. Какой тут можно сделать вывод? Первый и очевидный — переставить экраны 2 и 3 местами, чтобы человек сразу увидел цены. Логично?
А вот и не совсем! Если мы переместим экраны местами, то люди, кому цены не подходят, будут быстрее уходить с сайта, ухудшая показатель процента отказа. Нам это не надо. Если не покупают, то пусть хоть на наши поведенческие факторы поработают!

Рис. 5 — ситуация аналогичная. Сейчас идет тренд к тому, что блоки преимуществ у всех одинаковые, и глаз посетителя за них не цепляется. Отсюда вывод: либо преподносить свои преимущества как-то иначе, либо вообще отказаться от этого блока.

Рис. 6 — тоже интересная ситуация. Этот экран зеленый, значит, человека этот блок, с большего, интересует. То, что этот блок последний, позволяет сделать неожиданный вывод: возможно, пользователь не получил всей необходимой информации на странице, раз долистал до конца страницы и остановился на этом блоке (по сути он повторяет первый экран сайта)

Как видим, буквально за 10 минут у нас уже появилось, как минимум 3 гипотезы по улучшению страницы:

1. Убрать или переделать блок с преимуществами
2. Вместо него придумать что-то ещё интересное
3. Попробовать переставить местами экраны 2 и 3 и посмотреть на показатель отказов

Сложности в работе с картой скроллинга

Бывает ситуация, когда не работает карта скроллинга в Метрике, нет данных или страница не отображается. Эта проблема возникает из-за настроек сервера. Решается достаточно просто с помощью разработчика вашего сайта, либо технической поддержки хостинга.

Если же вы хотите сами решить проблему отсутствия данных в карте скроллинга, то можете попробовать следующее:

• Открыть доступ фаерволла к metrika.yandex.ru и mc.yandex.ru
• Проверить ответ сервера . Если в нем будет строка X-Frame-Options: SAMEORIGIN , это значит, что установлен запрет на отображение страницы во фрейме. Сделано это на стороне сервера из соображений безопасности данных. Если у вас именно такая ситуация, то обратитесь к своим разработчикам и покажите им . Там я достаточно подробно расписал вариант решения.

Вы помните, как последний раз покупали музыкальный альбом? Старые добрые дни виниловых пластинок, кассет и компакт-дисков? Времена, когда iTunes еще не существовал и в помине и купить качественный сингл было не так просто? Так вот, ваш лендинг можно сравнить с хитовым альбомом. Когда вы разрабатываете свою страницу, то наверняка воспринимаете ее как нечто целое, как сумму отдельных элементов — каждый ее раздел является частью повествования.

Но интернет-пользователи имеют краткую продолжительность концентрации внимания. Они жаждут хита. Хотя вполне возможно, что ваша целевая аудитория по-прежнему предпочитает «полные альбомы», любит прокручивать страницу и не прочь услышать всю историю, думайте о пространстве выше «линии сгиба» как о сингле — это область, которая привлекает или отталкивает ваших посетителей.

Как современному маркетологу, вам известно, что чем больше вы знаете о ваших клиентах, тем лучше для вас. К счастью, в наше время существуют технологии, которые позволяют фиксировать некоторые аспекты поведения пользователей. Карты прокруток, или скроллинга (scrollmap) и другие инструменты помогут вам визуализировать опыт посетителя: понять, насколько далеко вниз люди продвигаются на вашей странице, что они нажимают и как они усваивают информацию? Если вы собираетесь заняться оптимизацией-конверсии или уже работаете в этом направлении, вам стоит включить в свой аналитический арсенал.

Что такое карта скроллинга?

Карты прокруток, карты кликов и тепловые карты — это инструменты, позволяющие визуализировать поведение пользователей на вашем лендинге. Причем первые дают нам наглядное представление о количестве времени, которое посетитель затратил при просмотре страницы.

Карты прокруток выражают информацию цветами. В зависимости от инструмента, красный, белый и желтый обычно указывают на области, просмотру которых пользователи уделяют больше всего времени, тогда как сегменты зеленовато-голубого, темно-синего и черного цвета они практически никогда не видят.

Как работают эти инструменты?

К наиболее популярным сервисам с картами прокруток относятся Hotjar, Crazy Egg, Decibel Insight и Clicktale, а также Яндекс Метрика. Каждый из них имеет небольшое отличие. Как правило, вы сообщаете инструменту, по какой странице и скольким посетителям вам необходимо собрать данные.

По словам Дэвида Дарманина (David Darmanin), основателя и генерального директора в Hotjar: «Важным фактором здесь является то, сколько трафика привлекает ваша страница. На сайтах с низкой посещаемостью поведенческие паттерны проявляются уже на 2 000 просмотров. Ресурсам с более высоким трафиком может не хватить и 10 000».

Ваш инструмент будет собирать для вас данные до тех пор, пока не получит достаточное количество просмотров страницы, а затем сгенерирует карту прокруток/кликов или тепловую карту. Взгляните пример с сайта Telestream, программы для скринкастинга (screencasting) и редактирования видео:

Из этой карты мы можем почерпнуть несколько вещей:

1. Лишь некоторые пользователи опускаются ниже ряда из 4 изображений, тем самым упуская из виду важные характеристики продукта, указанные под ними.
2. Данные свидетельствуют о том, что эти 4 изображения создают

Подобная информация может оказаться чрезвычайно полезной, когда вы будете проводить тестирование. В случае с Telestream она помогает сформировать тестируемую гипотезу (и выигрышную вариацию). Здесь вы можете подумать: «Секундочку, разве мне действительно нужно тестировать что-либо? Если я обнаружил, что большинство моих посетителей не прокручивают страницу ниже линии сгиба, разве я не могу просто переместить самый важный контент выше этой линии?»

И да, и нет. Представим, что поступили таким образом. Вы перенесли информацию, которую считаете важной, на первый экран: ваши CTA-элементы, основные ценности продукта и т. д. В одних случаях это влечет за собой повышение конверсии, в других — понижение, а в третьих — и вовсе не дает никаких результатов.

Проблематичность такого подхода заключается в нескольких причинах:

1. Вы угадываете. Откуда вы знаете, что информация, которую вы считаете самой важной, будет иметь большое значение для посетителей?
2. Вы выполнили действие, но не подготовили себя к оценке причины и следствия. Ваши изменения действительно оказывают хоть какое-то влияние или являются внешними факторами?
3. Вы загнали себя в угол. У вас есть результат, но вам не хватает ответа на вопрос «почему» — без «почему» двигаться вперед крайне сложно.

Без тщательного контроля вы не можете быть уверены в том, что ваши изменения оказали какой-либо эффект на результат. На самом деле уверены вы можете быть только в том, что у вас нет возможности проверить, были ли эти изменения причиной повышения или понижения конверсии. Вы остались в неведении.

Хотя карты прокруток весьма полезны, они являются лишь частью головоломки. Они позволяют вам создавать более обоснованные теории для тестов на основе наблюдений за поведением пользователей на вашей странице. Тестирование — это единственный способ обрести уверенность в изменении и получить более полное представление о целевой аудитории.

Так что да, при использовании карт скроллинга вам все равно нужно прибегать к тестированию.

Изучаем поведение пользователей

Любое тестирование начинается с Изучения (первый этап бесконечного процесса оптимизации). Изучение является органическим и экспансивным: это стадия сбора данных. Вы должны вооружиться как можно более достоверной информацией, прежде чем начнете строить гипотезы.

Бесконечный процесс оптимизации носит итеративный характер и влечет за собой постоянный рост: слева — изучение, справа — подтверждение, по центру — рост и озарения.

В какой-то степени сбор данных вращается вокруг вашей аналитики и пользовательских исследований. Именно здесь карты прокруток, тепловые карты и карты кликов вступают в игру. Как видите, эти инструменты предоставляют вам только часть информации, которую вам нужно усвоить, до того, как вы приступите к тестам, но это не делает их менее важными. Для некоторых компаний карты скроллинга могут иметь решающее значение.

Не губите ваш сплит-тест еще до его начала

Вообразим, что вы не используете никаких дополнительных аналитических инструментов. Вы решили провести тест с одной вариацией — вы добавили новую секцию к основной части страницы. Через некоторое время данные, полученные по результатам тестирования, показывают, что ваше изменение ни к чему не привело, и разумеется, вы отказываетесь от данной стратегии.

Вот в чем заключается главная проблема: когда вы проводите сплит-тест, вы должны захватить достаточное количество конверсий, чтобы . Выражаясь словами простого обывателя, если вариация превзойдет контрольную страницу с 95% статистической достоверности, вы можете предположить, что в 19 случаях из 20 полученные вами результаты окажутся верными.

На самом деле вы должны достигать 95% статистической достоверности для каждого проводимого теста. Если вы тестируете область вашей страницы, которую большинство посетителей не замечают, вам будет намного сложнее отследить изменение при повышении уровня конверсии. Большая часть пользователей не увидит никакой разницы между контрольным лендингом и вашим вариантом. Если 90% посетителей не прокручивают страницу ниже линии сгиба, и именно там было внедрено ваше изменение, значит в обоих случаях эти люди видят контрольную версию.

Небольшое количество клиентов, которые бы поучаствовали в вашем тесте, не оказали бы значительного влияния на конверсию, ведь они представляют собой лишь малую часть вашей аудитории. Кроме того, в такой ситуации вам бы пришлось продлить время проведения теста, чтобы достичь 95% статистической достоверности, поскольку скачок конверсии был бы незначительным, а это в свою очередь требует больше трафика для обнаружения изменений.

Не пренебрегайте первым синглом

Мы рассказали о том, почему карты прокруток позволяют вам лучше понять поведение посетителей вашего лендинга. Но мы еще не обсуждали факторы, которые побуждают этих людей скролить страницу. Помните аналогию с музыкальным альбомом? Вполне возможно, что ваши пользователи хотят прослушать весь альбом, но ваш первый сингл (пространство над линией сгиба) отбивает у них желание.

Именно первым экраном вы производите первое впечатление на посетителей: хорошее, плохое или ужасное. Если это впечатление будет плохим, новые пользователи вряд ли станут прокручивать страницу и скорее всего покинут ее. Если вы только начинаете заниматься оптимизацией конверсии, тестируйте все, что размещено выше линии сгиба: доработайте ваше уникальное торговое предложение и посмотрите, будут ли посетители скролить страницу.

Что вы думаете о картах прокруток и подобных аналитических инструментах? Как вы задействуете эти инструменты в ваших усилиях по оптимизации? Какие инструменты вам нравятся больше всего? Поделитесь своим мнением в комментариях!

Карта скроллинга - инструмент для анализа того, как распределяется внимание посетителей на определенных областях страниц сайта. Карта поможет вам подобрать оптимальную длину страниц и правильно разместить важную информацию.

Карта показывает среднее время и количество просмотров определенного участка страницы, на который вы навели курсор. Также вы можете получить статистику для группы страниц . Например, для отдельного каталога.

Вы можете использовать несколько режимов отображения карты:

• «Тепловая карта» - изменение времени просмотра страницы выделено зонами разного цвета.
• «Карта прозрачности» - области страницы, которые пользователь просматривал меньшее время затемнены, области, которые просматривались большее время - более прозрачные.

Минимум - минимальное время просмотра от общего времени Загрузка страницы сайта при переходе посетителя на нее. К просмотрам также относятся перезагрузка страницы, обновление AJAX-сайтов, отправка данных с помощью метода hit .

Максимум - максимальное время просмотра от общего количества просмотров выбранной страницы.

Примечание.

Статистика по группе страниц

Для просмотра статистики по группе страниц можно использовать дополнительные символы в поле для ввода URL.

Рассмотрим пример. Необходимо получить статистику по страницам, входящим в каталог https://example.com/goods/. Чтобы данные отобразились на карте, введем в поле адрес https://example.com/goods/* (после ввода этот же адрес отобразится в выпадающей подсказке). Данные загрузятся автоматически.

Карта будет отображена на наиболее популярной странице сайта, URL которой соответствует указанному условию. Числовые показатели (среднее время и количество просмотров) будут являться объединенными для всех страниц, соответствующих условию.

Показ данных в iframe

Если ваш сайт защищен от показа в iframe (то есть в настройках сервера используется заголовок X-Frame-Options), то собранные данные будут недоступны для просмотра. Чтобы просмотреть данные о посещении сайта, необходимо добавить в настройки сервера исключение для домена webvisor.com и его поддоменов, а также для домена вашего сайта с помощью регулярного выражения

^https?:\\/\\/([^\\/]+\\.)?(yourdomain\\.com|webvisor\\.com)\\/

Если вы используете nginx, добавьте следующие исключения в конфигурацию:

Location / {\n set $frame_options "";\n if ($http_referer !~ "^https?:\\/\\/([^\\/]+\\.)?(yourdomain\\.com|webvisor\\.com)\\/"){\n set $frame_options "SAMEORIGIN";\n }\n add_header X-Frame-Options $frame_options;\n ...\n }

где yourdomain\\.com - имя домена вашего сайта. Используйте доменную зону вашего сайта (может отличаться от.com).

Ограничение размера страниц

Для отображения данных на карте необходимо соблюдать некоторое ограничение размера страниц сайта. Ниже указаны значения для отображения карты в разных браузерах:

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Тепловая в «Метрике» «Яндекса» – это полезный, и удобный инструмент анализа поведения пользователей на сайте. Если хотите знать, какие элементы страницы отвлекают внимание от заветных кнопок «купить» и «оставить заявку», что ищут на сайте московские женщины и как ведут себя пользователи, перешедшие из соц.сетей, то вам сюда. В статье: базовые понятия, краткий обзор функций и сценариев применения сервиса. 10-ти приемов для повышение конверсии, кочующих из статьи в статью здесь не будет.

В статьях про карту кликов «Яндекса» в основном перечисляют режимы ее работы, дают пару и на этом закругляются. Как ее применять вообще не объясняют, видимо думают, что все рождаются веб-аналитиками и все и так знают. Я не буду так делать, а вместо этого приведу пару примеров того, как с помощью этого инструмента анализировать поведение пользователей и совершенствовать сайта. Но обо всем по порядку, поэтому начнем с базы.

Что это такое?

Кликов – это визуализация статистики по самым закликиваемым элементам на сайте. Она помогает понять, на что пользователи обращают больше всего внимания и какие фрагменты дизайна принимают за кнопки и активные ссылки. Карта кликов сайта доступна в «Яндекс.Метрике» и в большинстве платных сервисов веб-аналитики. Выбирать можно любую, но мы расскажем об инструменте «Яндекса», потому что свое, родное и любимое.

Как работает карта кликов «Яндекса»?

В «Метрике» есть четыре варианта визуализации отчетов:

• Тепловая карта кликов – вариант по умолчанию. В этом случае элементы страницы, по которым кликают относительно часто, подсвечиваются теплыми цветами (красный, оранжевый, желтый), а менее популярные – холодными (зеленый, синий, фиолетовый).
• Монохромная . То же самое, только используется единственный красный цвет. Чем ярче область, тем больше по ней кликают, а чем тусклее, тем меньше.

• Карта кликов по ссылкам и кнопкам. В этом случае все взаимодействия пользователей с сайтом делятся на два вида: клики по ссылкам и кнопка и обычные. Первые отмечаются красным или ранжевым, а вторые – синим.

• Прозрачная. Здесь работает все тот же принцип, единственное отличие в способе визуализации. Чем чаще нажимают на элемент, тем прозрачней в его области темная «маска», наложенная на сайт. Сразу понятно, на что смотрят посетители.

• Карта элементов. В этом режиме подсвечиваются не конкретные области, а элементы целиком. Этот режим можно включать просто чтобы доставить себе эстетическое удовольствие (вы поймете, о чем я).

Что умеет карта кликов «Яндекса»?

Настраивать сегмент аудитории, о котором вы хотите получить информацию. Разбираем по пунктам.

1. Настройка параметров просмотра. Можно учитывать только те, в которых посетитель заходил определенный URL, кликал по какому-либо заголовку и так далее.
2. Настройка параметров визита. Здесь можно отфильтровать пользователей по географии, типу устройства, поведению, источнику перехода и истории посещений.
3. Дополнительная настройка профиля пользователя. Можно отфильтровать по полу, возрасту, географии и другим параметрам.
4. Выбор периода. Здесь все просто: от одного дня до года.
5. Сравнение двух сегментов. Если хотите сравнить поведение пользователей в этом и предыдущем месяце или двух разных сегментов аудитории, выбирайте этот пункт.

В качестве примера я выбрал пришедших из поиска мужчин, которые переходили по ссылке на блог. Количество кликов не покажу.

Как применять тепловую карту кликов в «Яндекс.Метрике»?

Банально, но для тестов и аналитики. В самом простом сценарии можно посмотреть, что интересно посетителю сайта: каталог товаров, описание услуг, страница контактов или блог. Исходя из этой информации можно скорректировать путь пользователя на сайте, чтобы ему жилось проще и веселее. Например, запихнуть популярную ссылку на блог повыше и полевее. Для этого подойдет режим тепловой карты кликов, стоящий по умолчанию.

Второй вариант – посмотреть, какие элементы дизайна люди ошибочно принимают за кнопки и активные ссылки. Это поможет очистить страницу от вещей, которые перетягивают на себя внимание. Допустим, у вас на главной есть какая-то плашка, очень похожая на форму для заполнения. Причем вы об этом и не подозреваете, потому что ни разу не открывали карту кликов. А люди кликают по плашке но их постигает разочарование, потому что ничего не происходит. Не надо быть специалистом по UX, чтобы понять, что это плохо. Такие ложно-активные элементы отвлекают внимание пользователя от настоящих кнопок, заставляют его тратить больше времени на навигацию и снижают удобство сайта. Чтобы их найти, проще всего включить карту кликов по кнопкам и ссылкам.

Третий вариант – оценить, как работает перелинковка на странице или какие пункты меню чаще всего выбирают люди. Здесь поможет карта кликов по элементам. Вообще, это очень полезный режим, потому что он нагляднее, чем режим по умолчанию и никогда не вводит в заблуждение, как режим с активными ссылками. Поясню. НА предыдущем скриншоте несколько областей выглядят почти одинаково оранжево, поэтому понять, какая ссылка популярней, довольно сложно. С помощью карты кликов по элементам мы избавляемся от проблемы легко и изящно – все цвета получаются максимально разными.

Наконец, можно посмотреть, куда чаще всего клацает какой-то конкретный сегмент аудитории. Например, люди пришедшие из соцсетей или поиска, жители Казани или школьники с айфонами (нет). Для этого нужно воспользоваться панелькой, о которой я рассказывал выше.

Резюмируем

Тепловая карта кликов помогает улучшать юзабилити сайтов, выстраивать для клиента оптимальный путь к целевому действию и анализировать поведение разных групп пользователей.

Что делать, если карта кликов в «Метрике» не работает?

Такое бывает, если сайт защищен от показа в iframe или вы используете nginx. Подробную инструкцию, как действовать в этом случае дал сам «Яндекс», но на всякий случай повторим.

Если у вас стоит iframe, нужно добавить в исключения домен «Вебвизора» (webvisor.com), его поддомены и ваш собственный домен. Сделать это можно через регулярное выражение:

^https?:\/\/([^\/]+\.)?(yourdomain\.com|webvisor\.com)\/

В случае с nginx, дополнительный код с исключениями выглядит вот так:

location / {
set $frame_options "";
if ($http_referer !~ "^https?:\/\/([^\/]+\.)?(yourdomain\.com|webvisor\.com)\/"){
set $frame_options "SAMEORIGIN";
}
add_header X-Frame-Options $frame_options;
...
}

А есть другие инструменты?

Да, тепловых карт кликов много, некоторые предлагаются в составе других инструментов веб-аналитики, а некоторые отдельно или в виде плагина для CMS. В принципе, все они делают примерно одно и то же, отличаются только детализацией данных. Примеры:

• ClickHeat:
• Mouseflow:
• CrazyEgg:
• OpenWebAnalytics.

Первые три – платные сервисы, а OWA можно скачать просто так.

Что в итоге?

Карта кликов «Яндекса» помогает следить за поведением пользователя, оптимизировать его путь до целевого действия, оценивать эффективность разных элементов страницы и получать еще кучу полезной информации. Если делать все правильно и учитывать данные, которые дает эта метрика, можно ненароком увеличить конверсию и повысить удобство сайта. Если это вас не пугает, то вперед, делайте.