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

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

Для того, чтобы настроить такое отслеживание и передачу данных в систему веб-аналитики, нам понадобится 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>

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