Когда важны не только клики. Собираем статистику по наведению курсора на элементы сайта
Отслеживание наведения курсора на элементы сайта
Часто на сайтах встречается функционал, при котором посетителю для того, чтобы увидеть какой-то контент, нужно навести курсор мыши на элемент сайта. При таком действии пользователя происходит подгрузка новой информации: открывается новый текст, расширяется описание товара/услуги; если это изображение, то происходит его увеличение или замена на другое и т. п. Как и прочие поведенческие факторы такие действия пользователя на сайте несут информацию о его визите и заинтересованности в вашем контенте. Поэтому в сегодняшней статье я предлагаю рассмотреть один из способов отслеживания наведения курсора мыши на элементы сайта.
Для того, чтобы настроить такое отслеживание и передачу данных в систему веб-аналитики, нам понадобится Google Tag Manager. На примере я рассмотрю отправку событий в Google Analytics. Также эти данные без каких-либо сложностей можно передавать в Яндекс.Метрику. Подробнее о том, как подружить Метрику и GTM я писала в
прошлой статье.
Пример 1
На сайтах интернет-магазинов часто встречается реализация списков товаров, настроенная таким образом, что для ознакомления с информацией о товаре необходимо навести курсор на интересующий товар. При этом действии подгружается текстовый блок с подробной информацией.
Например, как тут:

Такое поведение посетителя сайта может свидетельствовать о его заинтересованности в предложении магазина, поэтому для аналитика сбор этих данных будет полезным.
Рассмотрим скрипт, с помощью которого можно решить данную задачу.
Принцип работы скрипта заключается в следующем: к объекту, соответствующему отслеживаемому элементу (в примере фигурирует элемент с классом catalogCard), привязываем обработчик события hover. Одноименный метод библиотеки jQuery, hover(), состоит из двух частей — функции с действиями при наведении на элемент и функции с действиями при выведении курсора из области элемента. В первой части засекаем время “пребывания” курсора на элементе. Во второй части проверяем, превышает ли данное время 1 секунду (иначе можно считать, что наведение курсора пользователем было случайным и в этом случае отправлять событие не нужно). Затем определяем переменную, содержащую пояснительный текст к элементу и отправляем значения в GTM.
|
<script> jQuery('.catalogCard').hover( function () { begin = new Date().getTime(); }, function () { if ((new Date().getTime() - begin) >= 1000) { var s_name = jQuery(this).find('.catalogCard-title a').html(); dataLayer.push({name:s_name, event:'hover'}); } } ); </script> |
Важно точно определить элемент, взаимодействие с которым мы хотим отследить. Тут как нельзя лучше помогают селекторы CSS в Google Tag Manager. Ранее я писала большое руководство по использованию этой возможности в диспетчере тегов. Не знаю как вы, а я вот уже не представляю своей работы в GTM без селекторов. Если вы еще не прониклись новыми горизонтами поведенческой аналитики, которые открывает их применение, скорее переходите к чтению
этой статьи.
В моем примере нам легко идентифицировать блоки с товарами по их классу catalogCard, поэтому в качестве элемента, по отношению к которому вызывается событие hover, я указала селектор .catalogCard
|
jQuery('.catalogCard').hover |

А чтобы узнать, на какой конкретно товар навели курсор, в переменную name я передаю текст, соответствующий интересующему пользователя товару. Это также реализовано с помощью селекторов, а именно, в элементе с классом catalogCard-title, выбираем все ссылки и с помощью функции html() получаем текст элемента.
|
jQuery(this).find('.catalogCard-title a').html() |
Для выполнения настройки отслеживания в GTM нам понадобится новый тег типа “Пользовательский тег HTML”. В текстовое поле копируем код JavaScript, рассмотренный выше.

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

Например, в атрибуте “Категория” я могу указать “Наведение курсора на товар”, а в атрибуте “Действие” отправлять конкретный элемент, с которым взаимодействовали.
Для этого нам понадобится переменная уровня данных. В качестве имени переменной указываем name (значение переменной передаем в строке dataLayer.push({name:s_name, event:’hover’}); пользовательского кода).

В качестве триггера будем использовать пользовательское событие «hover», которое мы передаем в теге.

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

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

Так как на странице расположен только один интересующий нас элемент, в этом случае можно обойтись упрощенной версией скрипта, которая будет передавать сведения только о факте наведения мыши на объект, без передачи его названия.
Упрощенная версия кода
|
<script> jQuery('.zoomContainer').hover( function () { begin = new Date().getTime(); }, function () { if ((new Date().getTime() - begin) >= 1000) { dataLayer.push({event:'hover'}); } } ); </script> |
Изображение товара идентифицируем с помощью класса zoomContainer.

Шаги настройки отслеживания в Google Tag Manager аналогичны шагам для первого примера. Единственное отличие — настраивать переменную уровня данных не нужно, так как в упрощенной версии скрипта мы ее не передаем.
Факт наведения курсора с товаром, над которым произошло действие, можно связать, например, передав дополнительно данные о странице карточки товара.
Пример 3
На странице
услуги контекстной рекламы сайта OdesSeo в виде диаграммы представлена визуализация процесса работы нашей компании по этой услуге. Диаграмма является интерактивной — при наведении курсора на круги, появляется информация, которая касается этого блока работы.

Задача: настроить отслеживание наведения курсора на элементы диаграммы с передачей названия блока, который соответствует элементу диаграммы.
Такое отслеживание также можно настроить с помощью предложенного скрипта. Для этого случая в него нужно будет внести некоторые изменения, связанные со спецификой построения диаграммы, а именно с поиском соответствующего отслеживаемому кругу диаграммы текста.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
<script> jQuery('.big-circle').hover( function () { begin = new Date().getTime(); }, function () { if ((new Date().getTime() - begin) >= 1000) { var words_set = jQuery(this).closest('.circle-element').find('.top-text tspan'); var words_text = []; words_set.each(function() { words_text.push(jQuery(this).html()); }); words_textR = words_text.reverse(); var text_phrase = words_textR.join(' '); dataLayer.push({event:'hover_diagram', phrase:text_phrase}); } } ); </script> |
Надеюсь, что моя статья будет полезной для вас, и вы примените мои методы на своих проектах. Спасибо за внимание и удачи!)
Не понятно
Добрый день.
Подскажите, что именно Вам не понятно, и я постараюсь прояснить этот момент для Вас.
Добрый день, хотелось бы подробней последовательность, по первому примеру.
Не понятно —
«Для этого нам понадобится переменная уровня данных. В качестве имени переменной указываем name (значение переменной передаем в строке dataLayer.push({name:s_name, event:’hover’}); пользовательского кода).»
Где эту переменную мы указываем при настройке отправки события?
А так же не понятно —
«А чтобы узнать, на какой конкретно товар навели курсор, в переменную name я передаю текст, соответствующий интересующему пользователя товару. Это также реализовано с помощью селекторов, а именно, в элементе с классом catalogCard-title, выбираем все ссылки и с помощью функции html() получаем текст элемента.»
Какие ссылки и где выбираем?
Спасибо.
спасибо, очень полезно!
но у меня не вышло настроить по первому примеру
что в качестве триггера ставить на событие?
Евгений, спасибо за положительную оценку!
В качестве триггера нужно использовать пользовательское событие «hover», которое мы передаем тут http://prntscr.com/fupymj
А что именно не получилось? Расскажите подробнее, как Вы настраиваете и где возникает проблема.
Статья прикольная но у меня что-то не передает текст. Может какието условия должны соблюдаться??
var s_name = $(this).find(‘.sprite-whytous [class=»name»]’).html();
если проверяю в консоле $(‘.sprite-whytous [class=»name»]’).html();
то текст определяеться. Но вместо текста у меня уходят неопределенные данные почему то undefined
Добрый день.
Какое условие Вы используете для активации пользовательского тега?
Спс разобрался сам. Чутка код переделал и все заработало
Супер=)
очень крутая статья))) спасибо большое))
Николай, спасибо большое! Мне очень приятно=)
Спасибо за статью. Такой вопрос: не могу разобраться, что делать с dataLayer.push({name:s_name, event:’hover’}); куда его нужно вставить?
Вадим, спасибо)
Весь этот код http://prntscr.com/fivvb5 нужно добавить в новый пользовательский тег в GTM. При этом вместо селекторов .catalogCard и .catalogCard-title a в моем примере Вам нужно установить свои.
Круто. Спасибо.
Спасибо! Я очень рада, что статья понравилась=)