Коли важливі не лише кліки. Збираємо статистику щодо наведення курсору на елементи сайту

Відстеження курсору на елементи сайту

Для того, щоб побачити певний контент, відвідувачу необхідно навести курсор миші на елемент сайту. Під час цієї дії відбувається підвантаження нової інформації: відкривається текст, розширюється опис товару/послуги, збільшується або замінюється зображення тощо. Такі дії користувача на сайті дають інформацію про його інтерес до контенту, тому вони можуть бути важливими для аналітики.

Мета статті:

Вивчити спосіб відстеження наведення курсора миші на елементи сайту.

Необхідні інструменти:

Для налаштування такого відстеження та передачі даних до системи веб-аналітики, нам потрібен Google Tag Manager. У статті розглядається відправка подій в Google Analytics, але також ці дані можна без проблем передавати до Яндекс.Метрики. Детальніше про інтеграцію Метрики і GTM можна прочитати в минулій статті.

Приклад 1: Відстеження наведеного курсора на товар

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

Приклад:

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

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

Рішення задачі за допомогою скрипту

Скрипт, що реалізує це відстеження, працює наступним чином:

  1. До елементу сайту, який ми хочемо відстежити (в нашому випадку елемент з класом catalogCard), прив’язуємо обробник події hover.
  2. Метод hover() з бібліотеки jQuery складається з двох частин:
    • Функція з діями при наведенні на елемент.
    • Функція з діями при виведенні курсора з області елементу.
  3. У першій частині фіксуємо час перебування курсора на елементі.
  4. У другій частині перевіряємо, чи перевищує час перебування курсора 1 секунду. Якщо ні, то можна вважати, що наведення було випадковим, і подія не відправляється.
  5. Якщо час перевищує 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. Якщо ви ще не використовуєте ці інструменти для поведінкової аналітики, раджу ознайомитися з цією статтею.

У моєму прикладі блоки з товарами ідентифікуються за класом catalogCard, тому селектором для події hover є .catalogCard.

Як відстежити наведення курсору на конкретний товар за допомогою Google Tag Manager

Щоб визначити, на який конкретно товар відвідувач наводить курсор, в перемінну name ми передаємо текст, що відповідає цікавому товару. Це реалізовано за допомогою селекторів. В елементі з класом catalogCard-title вибираються всі посилання, і за допомогою функції html() отримуємо текст елемента.

Як працює код:

jQuery(this).find('.catalogCard-title a').html()
блоки с товарами

Кроки для налаштування в Google Tag Manager

Створення користувацького тегу HTML
Для того, щоб налаштувати відстеження в GTM, створюємо новий тег типу “Пользовательский тег HTML”. У текстове поле копіюємо JavaScript код, який ми розглядали раніше.

 jQuery(this).find('.catalogCard-title a').html()

Налаштування тригера
Якщо відстеження потрібно на всіх сторінках сайту, вибираємо тригер “Всі сторінки”. Якщо ж ви хочете налаштувати відстеження лише на певних сторінках, потрібно створити тригер для цих сторінок.

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

Відправка даних у Google Analytics
Для відправки інформації в Google Analytics створюємо тег типу “Universal Analytics” і обираємо тип відстеження “Событие”. У атрибуті “Категорія” вказуємо “Наведение курсора на товар”, а в атрибуті “Действие” відправляємо конкретний елемент, з яким взаємоділи користувачі.

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

Налаштування змінної рівня даних
Для цього створюємо змінну рівня даних. У якості імені змінної вказуємо name, значення якого передаємо в рядку: dataLayer.push({name:s_name, event:’hover’}); У цьому випадку в змінній s_name міститься назва товару, на який наводиться курсор.

dataLayer

Тригер для відстеження наведення курсора

В якості тригера будемо використовувати користувацьку подію “hover”, яку передаємо в теги.

gtm

Таким чином, ми можемо збирати інформацію про факт наведення курсора на один з цікавих нам об’єктів і безпосередньо назву елемента, до якого це взаємодіялося.

не тільки кліки

Приклад 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

Кроки налаштування відстеження в 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>

Сподіваюся, що моя стаття буде корисною для вас, і ви застосуєте мої методи на своїх проектах. Дякую за увагу і удачі!