Анализ тепловых карт – это научный подход к оптимизации коэффициента конверсии вашего интернет-магазина или веб-сайта. Это способ на основе данных измерить эффективность ваших целевых страниц, контактных форм и воронок покупок. Mouseflow – это бесплатный инструмент для анализа тепловых карт, воспроизведения и записи сеансов. В этой статье мы рассмотрим Mouseflow, интегрировав его с нашим любимым инструментом CMS – WordPress.

Что такое тепловая карта?

Для тех из вас, кто плохо знаком с темой анализа тепловых карт, вот простое изложение.

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

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

Эволюция тепловых карт за 10 лет, источник: два октября.

Возьмем, к примеру, карту кликов в поисковой системе.

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

На скриншоте выше показано, как тепловые карты менялись за десять лет. Еще в 2005 году они называли его «священным треугольником», что означало, что первые несколько букв первых двух ссылок привлекали большую часть внимания поисковика.

Десять лет спустя мы научили наши глаза сканировать первые несколько слов из 5-6 верхних ссылок. Это дает нам прямоугольную тепловую карту, которую мы видим в правой части скриншота.

Что такое запись и воспроизведение сеанса?

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

Движение мыши является сильным индикатором того, где на веб-сайте находится внимание посетителя.

Запись сеанса – идеальное решение. Сессия, по существу, вся деятельность осуществляется посетителем в одно посещение. Сюда входит время, с которого был загружен веб-сайт, до момента закрытия вкладки (или окна). Mouseflow записывает отдельные сеансы посетителей вашего веб-сайта и позволяет вам воспроизводить их в любое время из вашего браузера.

Воспроизведение записанного сеанса называется Session Replay. Фактически это видео всего взаимодействия посетителя с сайтом. Сюда входит вводимая информация (пароли всегда скрыты), взаимодействия с формами, клики и все другие действия.

Преимущества записи и воспроизведения сеанса

Запись и воспроизведение сеанса – незаменимый инструмент при тестировании взаимодействия с пользователем, A / B-тестировании и тестировании удобства использования – и все это с живыми пользователями.

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

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

Тепловые карты
Запись сеанса
Воспроизведение сеанса
Запись сеанса формы
Сбор отзывов

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

Панель управления Mouseflow

Панель управления Mouseflow с высоты птичьего полета

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

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

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

Нажмите “Тепловые карты”

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

Скриншот карты кликов в WordPress, созданной с помощью Mouseflow

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

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

Скриншот карты движения в WordPress, созданной с помощью Mouseflow

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

Внимание! Тепловая карта

Тепловая карта внимания – интересный показатель. Он представляет те области, где пользователи проводят максимальное количество времени.

Давайте сделаем снимок экрана, чтобы объяснить.

Скриншот карты Attention Heatmap в WordPress, созданной с помощью Mouseflow

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

Как использовать тепловые карты внимания для улучшения копии страницы продаж?

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

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

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

Прокрутка тепловой карты

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

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

Снимок экрана с тепловой картой прокрутки в WordPress, созданной с помощью Mouseflow

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

Сколько сеансов мне нужно записать?

Mouseflow дает вам возможность выбрать, сколько сеансов записывать вне трафика. Например, если вы введете ⅓, то будет записываться сеанс каждого третьего посетителя. Другими словами, будет записано 30% сеанса вашего трафика.

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

Простой способ оценить это число – просмотреть отчет по трафику в Google Analytics. Например, если вы получаете 1000 уникальных посещений в месяц и хотите записывать, скажем, 500 сеансов, вы должны настроить Mouseflow для записи одного из каждых двух посетителей, то есть 50% трафика.

Географическая тепловая карта

Снимок экрана с географической тепловой картой в WordPress, созданной с помощью Mouseflow

На географической тепловой карте отмечены страны, откуда приезжает большинство ваших посетителей. Эти данные доступны в большинстве аналитических программ, таких как Google Analytics или Kissmetrics. Скриншот выше взят с демонстрационного сайта, поэтому выделена только Индия.

Воронки

Пример воронки загрузки электронной книги в WordPress, созданный Mouseflow

Последовательность шагов – это последовательность шагов, которые посетитель выполняет для выполнения действия на вашем веб-сайте.

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

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

Для простоты рассмотрим два шага (или страницы) этого действия.

На первой странице посетитель читает о предложении и вводит адрес электронной почты.
Вторая страница – это страница подтверждения, на которой посетитель видит кнопки загрузки / загрузки PDF-файла.

Таким образом, последовательность загрузки электронной книги состоит из двух шагов, как показано на скриншоте ниже.

Создание новой воронки для загрузки электронной книги в WordPress с помощью Mouseflow

Mouseflow измеряет процент прерывания на каждом этапе воронки. В нашем примере мы не загрузили электронную книгу и покинули веб-сайт после просмотра первой (целевой) страницы.

Коэффициент конверсии воронки загрузки электронной книги в Mouseflow

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

Как оптимизировать коэффициент конверсии с помощью последовательностей в Mouseflow?

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

Формы

Отслеживание форм в WordPress с помощью Mouseflow

Mouseflow позволяет отслеживать, как посетители взаимодействуют с вашими формами в WordPress. Это особенно полезно при формировании лидов B2B и контент-маркетинге, где стоимость лида значительно выше по сравнению с веб-сайтом / продуктом B2C.

Давайте рассмотрим тестовую форму WPExplorer, которую я создал для этого руководства.

Сегментация полей в отслеживаемой форме в Mouseflow

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

Как улучшить скорость заполнения форм с помощью Mouseflow?

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

Как отслеживать форму в WordPress с помощью Mouseflow?

Отслеживание формы в WordPress с помощью Mouseflow включает в себя несколько шагов:

Сначала настройте форму в WordPress и скопируйте URL
Перейдите на страницу форм на панели управления Mouseflow и нажмите «Новая форма».
Вставьте URL-адрес, который вы скопировали на шаге 1.
Mouseflow автоматически распознает форму со страницы вместе со всеми ее полями.
Вы можете присвоить имя каждому полю в форме, чтобы его было легче отслеживать.
Наконец, нажмите «Создать форму», чтобы начать отслеживать взаимодействия с формой.

Обратная связь

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

Вот как выглядит типичная кампания обратной связи:

Кампания обратной связи в WordPress, созданная с помощью Mouseflow

После того, как вы заполните опрос, это страница подтверждения.

Страница подтверждения / благодарности за кампанию обратной связи

Как создать кампанию обратной связи в WordPress с помощью Mouseflow?

Теперь давайте посмотрим, как можно создать кампанию обратной связи в Mouseflow.

Войдите в свою панель управления Mouseflow, нажмите «Отзыв» в меню слева и нажмите «Добавить новую кампанию».

Создание новой кампании обратной связи в Mouseflow

Вы можете добавить столько вопросов, сколько вам нужно, минимум один вопрос. Варианты ответа включают множественный выбор, текстовый абзац (маленький / большой) или Net Promoter Score.

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

Наконец, вы определяете содержимое страницы успеха и нажимаете Далее.

Триггеры в кампании обратной связи

Триггеры определяют, когда и где показывается каждая кампания обратной связи. Mouseflow предлагает ряд параметров для определения триггеров. Например, на скриншоте выше:

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

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

Kill switch для кампании обратной связи в Mouseflow

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

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

Что мне нравится в Mouseflow

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

Модель Freemium

Модель ценообразования Mouseflow

Mouseflow работает по модели freemium, предоставляя вам 200 бесплатных кредитов каждый месяц.

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

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

Встроенная совместимость с WordPress

Панель управления плагином Mouseflow в WordPress

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

Новая запись под названием Mouseflow должна появиться на левой панели вашей панели управления WordPress.

Вставка кода отслеживания Mouseflow в WordPress

Щелкните Код отслеживания, чтобы вставить код отслеживания на свой сайт WordPress. Вы можете найти информацию о коде отслеживания для сайта в своей учетной записи Mouseflow в разделе «Настройки».

Информация о сайте в Mouseflow

После этого Mouseflow начнет записывать ваши сеансы на вашем сайте WordPress.

Другие интересные вещи

Процесс подключения нового пользователя Mouseflow

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

Сторонняя интеграция

Mouseflow интегрируется с более чем тридцатью сторонним программным обеспечением

Mouseflow поддерживает несколько сторонних интеграций, от CMS до программного обеспечения для маркетинга и расширенного программного обеспечения для управления тегами. На момент написания Mouseflow поддерживает 30 встроенных интеграций, сгруппированных по шести основным категориям:

Системы управления контентом: Помимо WordPress, Mouseflow интегрируется с Joomla, Drupal, Blogger и старыми добрыми веб-сайтами HTML5. Он также интегрируется с популярными конструкторами сайтов, такими как Squarespace и Weebly. Wix еще не получил специальной интеграции.
Электронная коммерция: Mouseflow интегрируется с ведущим программным обеспечением электронной коммерции с открытым исходным кодом, таким как Prestashop, Magento, 3dcart и популярными платными решениями, такими как Shopify.
Аналитика: вы можете интегрировать данные Mouseflow с популярными аналитическими программами, такими как Google Analytics, Adobe Analytics, и специализированными, такими как Kissmetrics и Coremetrics.
Маркетинг: Mouseflow поддерживает ведущее маркетинговое программное обеспечение, такое как Hubspot, Instapage, Unbounce, Optimizely и другие.
Обслуживание клиентов: полезная поддержка клиентов в режиме реального времени является краеугольным камнем для успешного бизнеса и его долгосрочной стабильности. Mouseflow также интегрируется с ведущим программным обеспечением поддержки клиентов и справочной службы, таким как Zendesk, Olark, Freshdesk и Zopim.
Управление тегами. Атрибуция – ключ к измерению ваших маркетинговых усилий и рентабельности инвестиций. Существует расширенное программное обеспечение для управления тегами, такое как Segment.io и Google Tag Manager. Mouseflow изначально интегрируется с ними вместе с Ensighten и Tealium.

Помимо этого, Mouseflow также имеет мощный REST API, с помощью которого вы можете получить доступ к данным с любого настраиваемого портала.

Клиентура Mouseflow

У Mouseflow есть офигенная клиентура

Mouseflow используется некоторыми из крупнейших компаний отрасли, включая Hubspot, Optimizely и Intuit. На момент написания их клиентская база составляет более 100 000 человек.

Заключение

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

Давайте кратко подведем итоги того, что мы уже рассмотрели:

Что такое тепловые карты?
Как запись и воспроизведение сеанса помогают в анализе поведения пользователей
Возможности Mouseflow, включая тепловые карты (щелчок, движение, внимание, прокрутка и география), воронки, формы и кампании обратной связи.
Как настроить WordPress и Mouseflow
Прохладный фактор в Mouseflow, в том числе его 30+ сторонняя интеграция и бессрочный план.

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

Источник записи: https://www.wpexplorer.com