Тепловая карта яндекс. Тепловые карты и вебвизор в Яндекс.Метрике

Приветствую всех, ищущих знаний! Сегодня в фокусе внимания будут такие инструменты интернет-аналитики от Яндекса.Метрики, как тепловые карты и вебвизор.

Все, кто связан с интернет-маркетингом, пользуются инструментами интернет-аналитики.

Основные аналитические системы – это (ЯМ) и (GA). Можно пользоваться только GA, в которой есть возможность загрузки данных из Яндекс.Директ, но вот чего нет в GA, так это Вебвизора, а штука это весьма нужная и занимательная. Но о нем немного позже.

Что такое тепловые карты

«Тепловые карты» — так повелось называть все карты кликов Яндекс.Метрики , но на самом деле в ЯМ есть вкладка «Карты», а в ней: Карта кликов, Карта ссылок, Карта скроллинга и Аналитика форм.

Непосредственно в «Карте кликов» есть несколько режимов отображения карты:

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

Рис. 2. Карты Яндекс.Метрики.

Если при обращении к картам и вебвизору у вас появляется такой экран,

необходимо изменить настройки кода счетчика для Вебвизора здесь:

Рис. 4. Настройки кода счетчика Яндекс.Метрики.

и перезаписать измененный код на все страницы сайта.

Посмотрим тепловую карту кликов в Яндексе за месяц . Кнопка справа вверху позволяет убирать или показывать панель настроек.

Рис. 5. Тепловая карта кликов.

На карте видно, что наибольшее количество кликов на полях формы , что нам и нужно. НО, стрелки показывают, что также люди кликают на активные в визуальном смысле элементы страницы – изображение календаря вверху, флэшки с надписью «до 100 слов» и стилизованную стрелку, указывающую на форму.

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

Отчет по параметру кликов «Регистрация»

В настройках мы можем сегментироваться по разным показателям и сохранять сконструированные отчеты. В данном случае посмотрим, как вели себя те посетители, которые оставили e-mail в форме на landing page.

Рис. 6. Тепловая карта кликов тех, кто заполнил форму.

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

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

Карта ссылок

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

  • количество переходов по ссылке;
  • доля переходов относительно других ссылок на странице.

Рис. 7. Карта ссылок.

Аналитика форм

Показывает воронку взаимодействия с формой : пришел – увидел – заполнил. Тоже нужная вещь.

Рис. 7. Аналитика форм.

В этом примере высокая конверсия формы – 19,57%.

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

всего одно поле. Было бы неплохо добавить «текст-призрак», показывающий, что именно нужно вводить, так как некоторые люди пытаются ввести имя или номер телефона вместо e-mail или наоборот. Особый интерес вызывают 75 посетителей, которые взаимодействовали с формой, но не отправили данные.

В следующем примере есть текст-призрак, 3 поля, конверсия — 2,81%. Сопоставлять между собой конверсии форм различных сайтов не корректно, так как используются совершенно разные предложения, аудитория, оформление, расположение и т.д. Я привожу эту картинку для примера, как по-разному работают формы.

Пользуясь инструментом «Аналитика форм», вы можете тестировать разные варианты форм, добиваясь высокой конверсии.

Рис. 8. Аналитика форм.

Примечание (относится ко всем картам ЯМ):

  • Карта отображается только на тех страницах сайта,

Анализируем поведение пользователей на сайте с инструментами карты кликов от Яндекс Метрика. Аналитика юзабилити, популярности веб-страниц и источников трафика.

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

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

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

Карта ссылок в Яндекс метрике

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

Ссылки будут подсвечены так же, как и на тепловой карте, цветами в зависимости от количества переходов. Максимальные значения теплым цветом, минимальные – холодным цветом. Для каждой ссылке можно посмотреть и конкретное количество переходов.

Тепловая карта кликов яндекс метрики

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

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

или

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

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

По этой карте будет видно, как далеко вниз посетитель прокручивает веб-страницу. При анализе сайта нам нужно обратить внимание на число просмотров, время нахождения в данной области страницы и на то, каким образом распределяется теплота цвета. Чем краснее, тем лучше; чем синее, тем хуже.

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

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

Пример скроллинга в верхней части блога (первый экран) от ярко-красного цвета до ярко-оранжевого:

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

Внизу под картой показано количество и время просмотров в данном месте страницы.

Верх веб-страницы красный:

Ближе к низу веб-страницы зеленый цвет:

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

Настройка тепловой карты яндекса

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

Для карт яндекс метрики существует быстрый способ для быстрого доступа. Просто нужно зайти в панель инструментов, и нажав, перетащить ссылку «Быстрый доступ» на панель закладок. Или добавить в закладки браузера букмарклет, по этой ссылке карта включится.

О том, как добавить карты ссылок, кликов, скроллинга в разные браузеры, можно прочитать в помощи яндекс метрики: help.yandex.ru/metrika/qanda/reports-qanda.xml

Карта путей яндекс метрики

Ее масштаб можно настроить ползунком в сторону минуса или плюса.

Сколько данных вы хотите увидеть, т.е. масштабность охвата - ползунком «детализация». Соответственно, ненужные галки можно убрать.

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

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

Схема работы с отчетом карты путей по сайту.

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

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

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

  • Визуализация данных ,
  • Яндекс API

  • Иногда бывает полезным нанесение каких-то количественных показателей на географическую карту, как в случае отображения зон покрытия мобильной связи/интернета у МТС:


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

    Модульная система

    В версии 2.1 мы открыли доступ пользователям к нашей модульной системе , которая написана на основе YModules , разработанной нашим коллегой . Эта модульная система имеет много разных приятных фич, таких как асинхронный resolve зависимостей, переопределение модулей, etc. Она была уже достаточно подробно , так что если интересно, можете почитать.

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

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

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

    Немного изучив исходники разных проектов, я остановил свое внимание на библиотеке simpleheat авторства . У нее было два ключевых преимущества:

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

    Алгоритм отрисовки тепловых карт

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

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

    Написание функции генератора url"ов для получения тайлов - это фактически и есть вся задача создания тепловой карты для нашего API.

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

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

    Для удобства работы пользователей мы решили, что будем поддерживать все самые популярные форматы входных данных, которые используются в API (Number, IGeoObject, IGeoObject, ICollection, ICollection, GeoQueryResult, JSON), из-за этого нам пришлось наложить не сильно приятное ограничение на программный интерфейс теплокарт. Теплокарте можно задавать только набор данных и нельзя удалять или добавлять точки из этого набора. Таким образом, для работы с данными мы предоставляем всего лишь два метода: getData() и setData().

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

    После того, как данные были предподготовлены можно начать их отрисовывать. Как отрисовывать вопроса, вроде, не стоит (Canvas - наше все, тем более, у него есть замечательная функциональность getDataURL, особенно необходимый в нашем случае, поскольку именно url тайла мы должны предоставить API).

    Для отрисовки каждой отдельной точки будем использовать кисть (рисунок слева), которая представляет из себя черно-белый градиент и рисуется на canvas"е весьма просто:

    Var brush = document.createElement("canvas"), context = brush.getContext("2d"), radius = 20, gradient = context.createRadialGradient(radius, radius, 0, radius, radius, radius); gradient.addColorStop(0, "rgba(0,0,0,1)"); gradient.addColorStop(1, "rgba(0,0,0,0)"); context.fillStyle = gradient; context.fillRect(0, 0, 2 * radius, 2 * radius);
    Вес точки будет определять, с какой прозрачностью кисть будет «рисовать» точку на тайле. После того, как мы отрисуем все точки тайла, у нас получится такой себе негатив нашего тайла тепловой карты.

    var canvas = document.createElement("canvas"), context = canvas.getContext("2d"), maxOfWeights = 1, radius = 20; context.clearRect(0, 0, 256, 256); for (var i = 0, length = points.length; i < length; i++) { context.globalAlpha = Math.min(points[i].weight / maxOfWeights, 1); context.drawImage(brush, points[i].coords - radius, points[i].coords - radius); }
    После чего тайл будет раскрашен установлением цвета каждому пикселю из градиента (options.gradient) в соответствии со значением его прозрачности. Прозрачность же каждого пикселя тайла будет равна общей прозрачности тепловой карты (options.opacity).

    // Создаем градиент. var canvas = document.createElement("canvas"), context = canvas.getContext("2d"), gradient = context.createLinearGradient(0, 0, 0, 256), gradientOption = { 0.1: "rgba(128, 255, 0, 0.7)", 0.2: "rgba(255, 255, 0, 0.8)", 0.7: "rgba(234, 72, 58, 0.9)", 1.0: "rgba(162, 36, 25, 1)" }; canvas.width = 1; canvas.height = 256; for (var i in gradientOption) { if (gradientOption.hasOwnProperty(i)) { gradient.addColorStop(i, gradientOption[i]); } } context.fillStyle = gradient; context.fillRect(0, 0, 1, 256); // Раскрашиваем пиксели тайла. var gradientData = context.getImageData(0, 0, 1, 256).data; var opacity = 0.5 for (var i = 3, length = pixels.length, j; i < length; i += 4) { if (pixels[i]) { j = 4 * pixels[i]; pixels = gradientData[j]; pixels = gradientData; pixels = gradientData; pixels[i] = opacity * (gradientData || 255); } }
    Вроде как и все, но нет. Всегда найдутся какие-то исключительные ситуации, которые придется обработать дополнительно. И в нашем случае возможность задания неограниченного сверху веса точки может привести к тому, что одна точка «погасит» все остальные. Так, например, если добавить на карту несколько сотен точек с весом один и одну точку с весом тысяча, то видна будет только последняя (рисунок слева).


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

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

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

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

    Начнем разбор по порядку.

    Карта ссылок

    Что отображает эта карта? По сути это все, что является у Вас на сайте ссылками.

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

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

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

    Карта кликов

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

    К тому же только у карты есть несколько вариаций отображения карты.

    Наиболее популярно и в основном смотрят именно "тепловую карту". Монохромная - это то же самое, только экран становится чб, а все клики с теми же размерами только красные.

    Карта прозрачности тоже интересный вариант - это выглядит примерно так - весь экран затемнен и только там где кликали как бы протертые места.

    Был забавный случай, когда с коллегой маркетологом смотрели карты по официальному сайту города Алматы и самое протертое место на карте прозрачности было лицо Акима города в одной из новостных публикаций (что был на тот момент).

    Да да именно лицо - народ видимо принципиально, чтобы прочитать новость тыкали курсором мышки ему в лицо. Весь экран такой затемненный и он смотрит на тебя из темноты)

    Покажу карту кликов опять же на примере моего блога.

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

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

    Карта скроллинга

    Постепенно мы перешли к карте скролинга и здесь почти бессмыленно делать скриншоты.

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

    Лично я считаю данный инструмент малополезным для блогов и им подобных многостраничных сайтов.

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

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

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

    Или, например может быть популярным первый экран с УТП и какой-то блок в середине страницы. Можно тот блок что в середине переместить немного выше и тем самым сделать 2 самых цепляющих блока один за другим. Затем спустя несколько дней анализируете снова и так по новой, пока не добьетесь отличного результата и повышения конверсии.

    Про аналитику форм мы поговорим отдельно в другой статье.

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

    Тепловая карта – что это?

    С помощью карты кликов можно визуализировать статистику кликов на вашем сайте. Она отображает клики по всем типам расположенных на странице элементов (даже не являющихся ссылками). С ее помощью можно оценить юзабилити вебресурса и выявить:

    • элементы, которыми пользователи интересуются чаще других
    • элементы дизайна, принимаемые пользователями за ссылки

    → Все статьи про Веб аналитику смотрите тут —

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

    Карта кликов может отображаться в нескольких режимах:

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

    7 фактов об увеличении конверсии с помощью тепловой карты сайта

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

    1. 80% времени посетители уделяют просмотру первого экрана

    По итогам тестов, 80,3% общего времени просмотра страницы пользователи тратят на первый экран. Вывод: все элементы, мотивирующие посетителя к целевым действиям, размещайте выше «линии сгиба».

    2. Большая часть внимания приходится на левую часть страницы

    Человеческий мозг имеет одну особенность – он привык визуальную информацию воспринимать слева направо. Поэтому большинство посетителей после загрузки страницы в браузере начинают просматривать ее с левой стороны. Рекомендация от экспертов ConversionXL: разместите слева ваши буллеты (список выгод). Вообще, на опубликованный в левой части контент приходится около 69% времени посещения.

    3. Пользователи изучают текст страницы сайтов по F -образной траектории

    Было замечено, что основная масса людей сканирует текстовые документы схожим образом: соединенные горячие точки их кликов образуют букву «F».

    Советы:

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

    4. Баннерная слепота уменьшает конверсию

    Баннерная слепота – это игнорирование посетителями контента, напоминающего рекламные баннеры. В наш цифровой век мозг человека научился «не видеть» коммерческую информацию (особенно агрессивно представленную). Совет: оформляя контент, не используйте рекламный стиль.

    5. Важность направления взгляда

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

    6. Анонсы статей имеют большую конверсию, чем сами статьи

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

    7. Мелкий шрифт тоже читают

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

    Где взять тепловую карту кликов?

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

    • Яндекс.Метрика. Интегрируйте код счетчика от Яндекса и получите в придачу много полезных seo-инструментов, включая и тепловую карту. Этот способ реализуется просто и является самым популярным.
    • Google Analytics. Тепловой карты в «привычном» виде сервис веб-аналитики от Гугл не предоставляет. Однако его инструменты позволяют узнать соотношение кликов по определенному элементу к общему числу кликов на сайте. Результат тот же – правда, наглядности нет.
    • Скрипт Clickheat. Установите данный скрипт в корневую директорию сайта и у вас появится собственный сервис статистики. Отличный способ, но не для вебмастеров-новичков.

    Цены платных сервисов тепловых карт

    Некоторые платные seo-сервисы на бесплатных тарифах не предоставляют доступ к тепловым картам. Ниже я привожу самые недорогие тарифные планы, функционал которых включает и «хот-мапы» (хотя некоторые «бесплатности» есть и у этих тарифов):

    • Clicky – от 14,99 $ в месяц (тариф Pro Plus). Первые три недели все инструменты сервиса можно использовать бесплатно.
    • Reinvigorate – от 10 $ в месяц (тариф Starter). Две недели пробного периода (включая доступ к тепловой карте).
    • Crazy Egg – от 9 $ в месяц (тариф Basic; оплата производится раз в год). Пробный период – месяц (только для десяти страниц).
    • SessionCam – 10 $ в месяц за три сайта. Один сайт – бесплатно.

    Вместо заключения

    Тепловая карта кликов и ее анализ – это настоящая обратная связь с посетителями. В сочетании с другими seo-инструментами (например, сплит-тестами) она незаменима в деле повышения конверсии.

    Хороших вам продаж!

    → Всем аналитикам внимание —