Отслеживание "кликов ярости" в GTM

31 марта, 2020

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

Rage Clicks - это все равно, что бить беспорядочно по клавиатуре, когда пользователь чем-то разочарован. Клики ярости сигнализируют о том, что ваш сайт не отреагировал так, как хотел или думал ваш клиент. Например, у вас текст подчеркнут на сайте, но не имеет ссылки. А пользователь думает, что кликнув по нему, он перейдет на другую страницу. Такие клики еще называют мертвыми (Death Clicks), поскольку они ни к чему не приводят.

Rage Clicks в GTM

Пользователь думает, что это ссылка, и кликает-кликает-кликает

Или при клике на миниатюру изображения человек предполагает, что она откроется в полном размере. Но этого не происходит.

Rage Clicks в GTM

Клики по картинке и почте - пример с сайта fullstory.com

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

Rage Clicks в GTM

Бесконечная загрузка видео - пример с сайта fullstory.com

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

Rage Clicks в GTM

Кликаем-кликаем, а форма не отправляется и не отправляется

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

Упоминая о Rage Clicks и Death Clicks, хотелось бы еще сказать пару слов об Error Clicks и Thrashed Cursor.

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

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

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

Мы же воспользуемся готовым скриптом отслеживания Rage Clicks с помощью Google Tag Manager от Silver Ringvee. Оригинал статьи, в которой автор подробно разбирает принцип его работы, доступен по ссылке.

Чтобы настроить отслеживание кликов ярости в GTM, необходимо:

- создать тег типа Пользовательский HTML и вставить в него код:

В Google Tag Manager это выглядит так:

Rage Clicks в GTM

Код Rage Clicks в GTM (Автор: Silver Ringvee)

Триггер активации - All Pages (Все страницы).

Примечание: на отслеживаемых страницах должен быть загружен jQuery.

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

  • no_of_clicks - сколько кликов нужно, чтобы считать это кликом ярости. По умолчанию - 3;
  • time - за какой период времени должны произойти все щелчки. По умолчанию - 2 секунды, 2;
  • radius - в каком радиусе должны происходить клики. По умолчанию - 100 пикселей, 100.
Rage Clicks в GTM

Изменение значений переменных в скрипте

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

  • event - rage_click, пользовательское событие, котороые мы можем использовать в качестве триггера активации;
  • rc_element - селектор элемента, по которому произошло нажатие;
  • rc_count - количество кликов;
  • rc_max_distance - максимальное расстояние между кликами;
  • rc_time_diff - период от первого до последнего клика;
Rage Clicks в GTM

dataLayer

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

Rage Clicks в GTM

Переменная уровня данных rc_element

Аналогично можно проделать с другими переменными: rc_count, rc_max_distance и rc_time_diff.

- создайте триггер типа Пользовательское событие с именем rage_click:

Rage Clicks в GTM

Пользовательское событие rage_click

- создайте тег типа Google Аналитика - Universal Analytics с типом Событие

Rage Clicks в GTM

Тег Universal Analytics с типом Событие

В этом примере в Категории события я использовал название Rage Clicks, в Действие - встроенную переменную Page Path, чтобы знать, на какой странице бы совершен клик ярости, и rc_element, чтобы определить селектор элемента, по которому произошло нажатие. В Ярлыке события я добавил через дефис дополнительные переменные rc_count и rc_time_diff, чтобы передавать в Google Analytics количество кликов и время от первого до последнего клика.

Условие активации - триггер пользовательского события rage_click. Сохраните настройки тега.

Проверить корректность передачи информации в Google Analytics можно с помощью режима предварительного просмотра.

Rage Clicks в GTM

Режим отладки - событие сработало, тег активирован

В примере выше я кликал по кнопке Продолжить не заполнив обязательные поля формы. Как видим, пользовательское событие rage_click сработало, а тег Universal Analytics был активирован. В отчете В режиме реального времени можно увидеть переданные данные:

Rage Clicks в GTM

В режиме реального времени

Что делать дальше? Посмотреть клики ярости можно в отчете Поведение – События – Лучшие события.

Rage Clicks в GTM

Отчет по событиям

Затем можно скопировать селектор и перейти на ту страницу, на которой пользователь совершил клик ярости. В моем примере это /vouchers. Воспользовавшись расширением для браузера CSS Selector Tester, найдем наш элемент на странице:

Rage Clicks в GTM

Найденный элемент на странице

Элемент на странице найден! Теперь вы точно знаете, что вызвало проблемы у пользователей!

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике