Отслеживание "кликов ярости" в GTM
Клики ярости (Rage Clicks) - это клики пользователей, которые многократно щелкают, нажимают на элемент(ы) на вашем сайте или в мобильном приложении, потому что им что-то не нравится, или они не могут понять, что делать дальше на странице/экране. В этой статье познакомимся со способом отслеживания яростных кликов с помощью GTM.
Rage Clicks - это все равно, что бить беспорядочно по клавиатуре, когда пользователь чем-то разочарован. Клики ярости сигнализируют о том, что ваш сайт не отреагировал так, как хотел или думал ваш клиент. Например, у вас текст подчеркнут на сайте, но не имеет ссылки. А пользователь думает, что кликнув по нему, он перейдет на другую страницу. Такие клики еще называют мертвыми (Death Clicks), поскольку они ни к чему не приводят.
Или при клике на миниатюру изображения человек предполагает, что она откроется в полном размере. Но этого не происходит.
Аналогично с электронной почтой. Пользователь думает, что его перенаправит в почтовый мессенджер, но e-mail на сайте не является кликабельным, а всего лишь текст. Иногда видео могут не загружаться сразу. Нетерпение быстро нарастает, и мы начинаем чаще нажимать на кнопку мыши.
Но самое страшное для нас (маркетологов и владельцев бизнеса), когда пользователь хочет оставить заявку или совершить заказ, нажимает на кнопку Отправить и... ничего не происходит.
Разработчик не сознается, что недавно вносил изменения на сайте и не проверил отправку формы. А мы, кроме как посмотреть Вебвизор в Яндекс.Метрике, больше никаких зацепок не имеем. И то не всегда. Итог - теряем деньги.
Упоминая о Rage Clicks и Death Clicks, хотелось бы еще сказать пару слов об Error Clicks и Thrashed Cursor.
Клики ошибок (Error Clicks) - клики, которые возникают, например, когда пользователь заполняет форму, и что-то указывает неверно (формат почтового индекса, номер кредитной карты, электронную почту и т.д.). Ему выскакивает сообщение об ошибке, но он не понимает, что оно значит, поэтому продолжает нажимать на кпопку Отправить, Далее и т.д. А если так и не разберется, то просто покинет сайт.
Побитый курсор (Thrashed Cursor) - термин, означающий хаотичное, беспорядочное перемещение мыши. Движение мыши пользователя, например, по кругу, может свидетельствовать о том, что человек сбит с толку, потерян или ожидает загрузки страницы.
Отслеживание таких действий является частью UX-аналитики. На рынке существуют решения, способные отслеживать все вышеперечисленное. Одним из самых популярных является сервис fullstory.com.
Мы же воспользуемся готовым скриптом отслеживания Rage Clicks с помощью Google Tag Manager от Silver Ringvee. Оригинал статьи, в которой автор подробно разбирает принцип его работы, доступен по ссылке.
Чтобы настроить отслеживание кликов ярости в GTM, необходимо:
- создать тег типа Пользовательский HTML и вставить в него код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<script> if ( typeof(jQuery) === 'function' ) { jQuery(document).ready(function($) { jQuery.fn.extend({ getPath: function() { var path, node = this; while (node.length) { var realNode = node[0], name = realNode.localName; if (!name) break; name = name.toLowerCase(); var parent = node.parent(); var sameTagSiblings = parent.children(name); if (sameTagSiblings.length > 1) { var allSiblings = parent.children(); var index = allSiblings.index(realNode) + 1; if (index > 1) { name += ':nth-child(' + index + ')'; } } path = name + (path ? '>' + path : ''); node = parent; } return path; } }); // Number of rage clicks var no_of_clicks = 3; //Time interval - 3 for 3 secs, 4 for secs and likewise var time = 2; var click_events = []; //internal variables var possible_click = 3; var radius = 100; function detectXClicks(count, interval) { var last = click_events.length - 1; var time_diff = (click_events[last].time.getTime() - click_events[last - count + 1].time.getTime()) / 1000; //returns false if it event period is longer than 5 sec if (time_diff > interval) return null; //check click distance var max_distance = 0; for (i = last - count + 1; i < last; i++) { for (j = i + 1; j <= last; j++) { var distance = Math.round(Math.sqrt(Math.pow(click_events[i].event.clientX - click_events[j].event.clientX, 2) + Math.pow(click_events[i].event.clientY - click_events[j].event.clientY, 2))); if (distance > max_distance) max_distance = distance; if (distance > radius) return null; } } var result = { count: count, max_distance: max_distance, time_diff: time_diff } return result; } function removeUsedClickPoints(count) { click_events.splice(click_events.length - count, count); } $("body").click(function(event) { click_events.push({ event: event, time: new Date() }); //remain only required number of click events and remove left of them. if (click_events.length > possible_click) { click_events.splice(0, click_events.length - possible_click); } //detect 3 click in 5 sec if (click_events.length >= 3) { var result = detectXClicks(no_of_clicks, time); if (result != null) { var path = $(event.target).getPath(); //console.log('Rage Click: ' + JSON.stringify(result)); dataLayer.push({ 'event': 'rage_click', 'rc_element': path, 'rc_count': result.count, 'rc_max_distance': result.max_distance, 'rc_time_diff': result.time_diff }); removeUsedClickPoints(3); } } }); }); } </script> |
В Google Tag Manager это выглядит так:
Триггер активации - All Pages (Все страницы).
Примечание: на отслеживаемых страницах должен быть загружен jQuery.
Этот тег отвечает за обнаружение кликов ярости и отправку пользовательского события rage_click в dataLayer. Есть несколько переменных, которые вы можете изменить в зависимости от задач:
- no_of_clicks - сколько кликов нужно, чтобы считать это кликом ярости. По умолчанию - 3;
- time - за какой период времени должны произойти все щелчки. По умолчанию - 2 секунды, 2;
- radius - в каком радиусе должны происходить клики. По умолчанию - 100 пикселей, 100.
Следующие переменные помещаются в уровень данных при обнаружении кликов ярости:
- event - rage_click, пользовательское событие, котороые мы можем использовать в качестве триггера активации;
- rc_element - селектор элемента, по которому произошло нажатие;
- rc_count - количество кликов;
- rc_max_distance - максимальное расстояние между кликами;
- rc_time_diff - период от первого до последнего клика;
Автор рекомендует не передавать все переменные в инструменты аналитики, а использовать только те, которые необходимы. Для этого создайте пользовательские переменные типа Переменная уровня данных с соответствующим именем. Например, для rc_element она будет выглядеть так:
Аналогично можно проделать с другими переменными: rc_count, rc_max_distance и rc_time_diff.
- создайте триггер типа Пользовательское событие с именем rage_click:
- создайте тег типа Google Аналитика - Universal Analytics с типом Событие
В этом примере в Категории события я использовал название Rage Clicks, в Действие - встроенную переменную Page Path, чтобы знать, на какой странице бы совершен клик ярости, и rc_element, чтобы определить селектор элемента, по которому произошло нажатие. В Ярлыке события я добавил через дефис дополнительные переменные rc_count и rc_time_diff, чтобы передавать в Google Analytics количество кликов и время от первого до последнего клика.
Условие активации - триггер пользовательского события rage_click. Сохраните настройки тега.
Проверить корректность передачи информации в Google Analytics можно с помощью режима предварительного просмотра.
В примере выше я кликал по кнопке Продолжить не заполнив обязательные поля формы. Как видим, пользовательское событие rage_click сработало, а тег Universal Analytics был активирован. В отчете В режиме реального времени можно увидеть переданные данные:
Что делать дальше? Посмотреть клики ярости можно в отчете Поведение – События – Лучшие события.
Затем можно скопировать селектор и перейти на ту страницу, на которой пользователь совершил клик ярости. В моем примере это /vouchers. Воспользовавшись расширением для браузера CSS Selector Tester, найдем наш элемент на странице:
Элемент на странице найден! Теперь вы точно знаете, что вызвало проблемы у пользователей!