Для того, чтобы настроить такое отслеживание и передачу данных в систему веб-аналитики, нам понадобится Google Tag Manager. На примере я рассмотрю отправку событий в Google Analytics. Также эти данные без каких-либо сложностей можно передавать в Яндекс.Метрику.

 

Пример 1

 

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

 

Например, как тут:

 

 

наведение курсора на товар

 

 

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

 

Рассмотрим скрипт, с помощью которого можно решить данную задачу.

 

Принцип работы скрипта заключается в следующем: к объекту, соответствующему отслеживаемому элементу (в примере фигурирует элемент с классом catalogCard), привязываем обработчик события hover. Одноименный метод библиотеки jQuery, hover(), состоит из двух частей – функции с действиями при наведении на элемент и функции с действиями при выведении курсора из области элемента. В первой части засекаем время “пребывания” курсора на элементе. Во второй части проверяем превышает ли данное время 1 секунду (иначе можно считать, что наведение курсора пользователем было случайным и в этом случае отправлять событие не нужно). Затем определяем переменную, содержащую пояснительный текст к элементу и отправляем значения в GTM.

 

Важно точно определить элемент, взаимодействие с которым мы хотим отследить. Тут как нельзя лучше помогают селекторы CSS в Google Tag Manager. Ранее я писала большое руководство по использованию этой возможности в диспетчере тегов. Не знаю как вы, а я вот уже не представляю своей работы в GTM без селекторов. Если вы еще не прониклись новыми горизонтами поведенческой аналитики, которые открывает их применение, скорее переходите к чтению этой статьи.

 

В моем примере нам легко идентифицировать блоки с товарами по их классу catalogCard, поэтому в качестве элемента, по отношению к которому вызывается событие hover, я указала селектор .catalogCard

 

 

 

блоки с товарами

 

А чтобы узнать, на какой конкретно товар навели курсор, в переменную name я передаю текст, соответствующий интересующему пользователя товару. Это также реализовано с помощью селекторов, а именно, в элементе с классом catalogCard-title, выбираем все ссылки и с помощью функции html() получаем текст элемента.

 

 

Для выполнения настройки отслеживания в GTM нам понадобится новый тег типа “Пользовательский тег HTML”. В текстовое поле копируем код JavaScript, рассмотренный выше.

 

пользовательский тег HTML

 

Если данное отслеживание вам необходимо проводить на всех страницах сайта, то в качестве триггера выбирайте все страницы. Если же вас интересуют только определенные страницы сайта, нужно настроить соответствующий триггер.

 

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

 

наведение курсора

 

Например, в атрибуте “Категория” я могу указать “Наведение курсора на товар”, а в атрибуте “Действие” отправлять конкретный элемент, с которым взаимодействовали.

 

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

 

dataLayer

 

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

 

ne-tolko-kliki_6

 

 

Пример 2

 

Рассмотрим пример, когда необходимо отследить факт увеличения картинки товара путем наведения курсора на фото товара на странице товарной карточки.

 

Например, как на карточках товаров этого интернет-магазина бижутерии:

 

карточка товара

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

 

Упрощенная версия кода

 

Изображение товара идентифицируем с помощью класса zoomContainer.

 

ne-tolko-kliki_8

 

Шаги настройки отслеживания в Google Tag Manager аналогичны шагам для первого примера. Единственное отличие – настраивать переменную уровня данных не нужно, так как в упрощенной версии скрипта мы ее не передаем.

 

Факт наведения курсора с товаром, над которым произошло действие, можно связать, например, передав дополнительно данные о странице карточки товара.

 

ne-tolko-kliki_9

 

Пример 3

 

На странице услуги контекстной рекламы сайта OdesSeo в виде диаграммы представлена визуализация процесса работы нашей компании по этой услуге. Диаграмма является интерактивной – при наведении курсора на круги, появляется информация, которая касается этого блока работы.

 

интерактивная диаграмма

 

Задача: настроить отслеживание наведения курсора на элементы диаграммы с передачей названия блока, который соответствует элементу диаграммы.

 

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

 

Надеюсь, что моя статья будет полезной для вас, и вы примените мои методы на своих проектах. Спасибо за внимание и удачи!)