Отслеживание наведения курсора на элементы сайта
Часто на сайтах встречается функционал, при котором посетителю для того, чтобы увидеть какой-то контент, нужно навести курсор мыши на элемент сайта. При таком действии пользователя происходит подгрузка новой информации: открывается новый текст, расширяется описание товара/услуги; если это изображение, то происходит его увеличение или замена на другое и т. п. Как и прочие поведенческие факторы такие действия пользователя на сайте несут информацию о его визите и заинтересованности в вашем контенте. Поэтому в сегодняшней статье я предлагаю рассмотреть один из способов отслеживания наведения курсора мыши на элементы сайта.
Для того, чтобы настроить такое отслеживание и передачу данных в систему веб-аналитики, нам понадобится 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 в виде диаграммы представлена визуализация процесса работы нашей компании по этой услуге. Диаграмма является интерактивной — при наведении курсора на круги, появляется информация, которая касается этого блока работы.
Задача: настроить отслеживание наведения курсора на элементы диаграммы с передачей названия блока, который соответствует элементу диаграммы.
Такое отслеживание также можно настроить с помощью предложенного скрипта. Для этого случая в него нужно будет внести некоторые изменения, связанные со спецификой построения диаграммы, а именно с поиском соответствующего отслеживаемому кругу диаграммы текста.
<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 в моем примере Вам нужно установить свои.
Круто. Спасибо.
Спасибо! Я очень рада, что статья понравилась=)