Как использовать Heatmaps для отслеживания кликов на WordPress-сайте

В отличие от Google Analytics, работающего с цифрами и статистикой, heatmaps (тепловые карты) показывают точные места, которые привлекают внимание посетителей.

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

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

Зачем использовать heatmaps на WordPress-сайте

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

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

С помощью heatmaps вы сможете:

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

heatmap поведения прокрутки

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

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

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

Как добавить heatmap на страницу WordPress-сайта

Когда дело доходит до установки heatmaps, вам просто нужно выбрать один из инструментов. Crazy Egg, Heatmap for WordPress, Hotjar Connecticator, Lucky Orange и SeeVolution - это самые популярные из доступных инструментов.

Heatmap for WordPress и Hotjar являются бесплатными. Остальные три относятся к классу премиум-плагинов. Однако они предлагают бесплатные ознакомительные версии.

Для демонстрации мы воспользуемся плагином Hotjar Connecticator. После его установки и активации необходимо создать учетную запись на сайте hotjar.com, добавить URL-адрес сайта, который вы хотите отслеживать, скопировать предоставленный код отслеживания и вставить его на странице плагина в панели администрирования WordPress.

Теперь пришло время создать heatmap. Это необходимо сделать на платформе Hotjar. Нажмите «Heatmaps», затем «New Heatmap».

Затем нужно выбрать необходимые настройки таргетинга. Вы хотите отслеживать heatmap на одной странице или на нескольких одновременно? Если нужен последний вариант, то нужно задать форматы URL-адресов. Потом вы сможете настроить таргетинг на все страницы из определенной категории (отсортированные по типу, дате публикации и т. д.). Вы также сможете ввести конкретные слова, которые содержат ссылки, и Hotjar начнет отслеживать эти страницы.

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

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

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

Вот как выглядит первый скриншот, предоставленный Hotjar (тестирование было выполнено на ненастроенной версии WordPress-темы Hestia):

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

Пример: как с помощью Heatmaps мы улучшили целевые страницы на ThemeIsle и CodeinWP

Нам нравятся heatmap, и мы используем их на многих страницах ThemeIsle. Страницы сайта посвящены WordPress-темами, поскольку компания является интернет-магазином, который продает темы и плагины для этой CMS.

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

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

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

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

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

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

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

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

Важность A / B тестирования

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

После использования heatmap в течение определенного времени и отслеживания поведения пользователей начните составлять план по улучшению юзабилити сайта.

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

Как провести A / B тестирование?

Согласно рейтингам и отзывам в репозитории WordPress.org Nelio A/B Testing является наиболее популярным инструментом. После установки плагина вы сможете выбрать тип сплит-тестирования, который хотите запустить. При этом стоит учитывать, что данный плагин включает в себя большой выбор опций для сравнения: страницы, записи, заголовки, виджеты и многое другое.

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

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

Кстати, с помощью плагина Nelio A / B Testing также можно создавать heatmaps. Но не такие подробные, как те, что создают перечисленные выше плагины.

Заключение

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

Пожалуйста, оставьте свои отзывы по текущей теме статьи. За комментарии, дизлайки, подписки, отклики, лайки низкий вам поклон!