Отслеживание наведения курсора на элементы сайта
Часто на сайтах встречается функционал, при котором посетителю для того, чтобы увидеть какой-то контент, нужно навести курсор мыши на элемент сайта. При таком действии пользователя происходит подгрузка новой информации: открывается новый текст, расширяется описание товара/услуги; если это изображение, то происходит его увеличение или замена на другое и т. п. Как и прочие поведенческие факторы такие действия пользователя на сайте несут информацию о его визите и заинтересованности в вашем контенте. Поэтому в сегодняшней статье я предлагаю рассмотреть один из способов отслеживания наведения курсора мыши на элементы сайта.
Для того, чтобы настроить такое отслеживание и передачу данных в систему веб-аналитики, нам понадобится Google Tag Manager. На примере я рассмотрю отправку событий в Google Analytics. Также эти данные без каких-либо сложностей можно передавать в Яндекс.Метрику. Подробнее о том, как подружить Метрику и GTM я писала в прошлой статье.
Пример 1
На сайтах интернет-магазинов часто встречается реализация списков товаров, настроенная таким образом, что для ознакомления с информацией о товаре необходимо навести курсор на интересующий товар. При этом действии подгружается текстовый блок с подробной информацией.
Например, как тут:
Такое поведение посетителя сайта может свидетельствовать о его заинтересованности в предложении магазина, поэтому для аналитика сбор этих данных будет полезным.
Рассмотрим скрипт, с помощью которого можно решить данную задачу.
Принцип работы скрипта заключается в следующем: к объекту, соответствующему отслеживаемому элементу (в примере фигурирует элемент с классом catalogCard), привязываем обработчик события hover. Одноименный метод библиотеки jQuery, hover(), состоит из двух частей – функции с действиями при наведении на элемент и функции с действиями при выведении курсора из области элемента. В первой части засекаем время “пребывания” курсора на элементе. Во второй части проверяем, превышает ли данное время 1 секунду (иначе можно считать, что наведение курсора пользователем было случайным и в этом случае отправлять событие не нужно). Затем определяем переменную, содержащую пояснительный текст к элементу и отправляем значения в GTM.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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
|
1 |
jQuery('.catalogCard').hover |
А чтобы узнать, на какой конкретно товар навели курсор, в переменную name я передаю текст, соответствующий интересующему пользователя товару. Это также реализовано с помощью селекторов, а именно, в элементе с классом catalogCard-title, выбираем все ссылки и с помощью функции html() получаем текст элемента.
|
1 |
jQuery(this).find('.catalogCard-title a').html() |
Для выполнения настройки отслеживания в GTM нам понадобится новый тег типа “Пользовательский тег HTML”. В текстовое поле копируем код JavaScript, рассмотренный выше.
Если данное отслеживание вам необходимо проводить на всех страницах сайта, то в качестве триггера выбирайте все страницы. Если же вас интересуют только определенные страницы сайта, нужно настроить соответствующий триггер.
Для отправки информации в Google Analytics можно настроить тег типа “Universal Analytics” и в качестве типа отслеживания указать “Событие” с атрибутами, идентифицирующими элемент, с которым взаимодействовал посетитель.
Например, в атрибуте “Категория” я могу указать “Наведение курсора на товар”, а в атрибуте “Действие” отправлять конкретный элемент, с которым взаимодействовали.
Для этого нам понадобится переменная уровня данных. В качестве имени переменной указываем name (значение переменной передаем в строке dataLayer.push({name:s_name, event:’hover’}); пользовательского кода).
В качестве триггера будем использовать пользовательское событие “hover”, которое мы передаем в теге.
Таким образом мы можем собирать информацию о факте наведения курсора на один из интересующих нас объектов и непосредственно название элемента, к которому относилось это взаимодействие.
Пример 2
Рассмотрим пример, когда необходимо отследить факт увеличения картинки товара путем наведения курсора на фото товара на странице товарной карточки.
Например, как на карточках товаров этого интернет-магазина бижутерии:
Так как на странице расположен только один интересующий нас элемент, в этом случае можно обойтись упрощенной версией скрипта, которая будет передавать сведения только о факте наведения мыши на объект, без передачи его названия.
Упрощенная версия кода
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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 в моем примере Вам нужно установить свои.
Круто. Спасибо.
Спасибо! Я очень рада, что статья понравилась=)