Отслеживание наведения курсора на элементы сайта

Часто на сайтах встречается функционал, при котором посетителю для того, чтобы увидеть какой-то контент, нужно навести курсор мыши на элемент сайта. При таком действии пользователя происходит подгрузка новой информации: открывается новый текст, расширяется описание товара/услуги;  если это изображение, то происходит его увеличение или замена на другое и т. п. Как и прочие поведенческие факторы такие действия пользователя на сайте несут информацию о его визите и заинтересованности в вашем контенте. Поэтому в сегодняшней статье я предлагаю рассмотреть один из способов отслеживания наведения курсора мыши на элементы сайта. Для того, чтобы настроить такое отслеживание и передачу данных в систему веб-аналитики, нам понадобится Google Tag Manager. На примере я рассмотрю отправку событий в Google Analytics. Также эти данные без каких-либо сложностей можно передавать в Яндекс.Метрику. Подробнее о том, как подружить Метрику и GTM я писала в прошлой статье. Пример 1 На сайтах интернет-магазинов часто встречается реализация списков товаров, настроенная таким образом, что для ознакомления с информацией о товаре необходимо навести курсор на интересующий товар. При этом действии подгружается текстовый блок с подробной информацией. Например, как тут: Такое поведение посетителя сайта может свидетельствовать о его заинтересованности в предложении магазина, поэтому для аналитика сбор этих данных будет полезным. Рассмотрим скрипт, с помощью которого можно решить данную задачу. Принцип работы скрипта заключается в следующем: к объекту, соответствующему отслеживаемому элементу (в примере фигурирует элемент с классом catalogCard), привязываем обработчик события hover. Одноименный метод библиотеки jQuery, hover(), состоит из двух частей — функции с действиями при наведении на элемент и функции с действиями при выведении курсора из области элемента. В первой части засекаем время “пребывания” курсора на элементе. Во второй части проверяем, превышает ли данное время 1 секунду (иначе можно считать, что наведение курсора пользователем было случайным и в этом случае отправлять событие не нужно). Затем определяем переменную, содержащую пояснительный текст к элементу и отправляем значения в GTM. Важно точно определить элемент, взаимодействие с которым мы хотим отследить. Тут как нельзя лучше помогают селекторы CSS в Google Tag Manager. Ранее я писала большое руководство по использованию этой возможности в диспетчере тегов. Не знаю как вы, а я вот уже не представляю своей работы в GTM без селекторов. Если вы еще не прониклись новыми горизонтами поведенческой аналитики, которые открывает их применение, скорее переходите к чтению этой статьи. В моем примере нам легко идентифицировать блоки с товарами по их классу catalogCard, поэтому в качестве элемента, по отношению к которому вызывается событие hover, я указала селектор .catalogCard

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

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

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

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

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

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

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

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