Як налаштувати тригер «‎Доступність елементу» в Google Tag Manager: покроковий мануал

Під час налаштування відстеження мікро і макро конверсій через Google Tag Manager часто виникають ситуації, коли без програміста не обійтися. В першу чергу, через відсутність можливості налаштувати тригер через class або ID елемента сторінки, або іншим відомим методом.

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

У деяких випадках дуже допомагає налаштування відстеження виконання події через доступність елемента.

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

Область застосування тригера “Доступність елементу”

Доступність елементу дуже добре вирішує завдання настройки подій, коли під час посилання форми або виконання інших цільових дій з’являється pop-up вікно або повідомлення, яке повідомляє про успішність виконання дії.

Наприклад, підписка на розсилку або посилання заявки на зворотний дзвінок.

Приклад на сайті allo.ua, після посилання форми на сторінці “Контакти”.

Як налаштувати тригер «‎Доступність елементу» в Google Tag Manager: покроковий мануал
Тобто тип тригера “Доступність елементу” спрацьовує тільки в разі, якщо певний елемент сторінки доступний користувачеві.

Як налаштувати відстеження через доступність елемента

    1. В першу чергунеобхідно створити новий тригер з наступними параметрами:
      Тип тригера: Доступність елементу.
      Метод вибору: Селектор CSS.

Як налаштувати тригер «‎Доступність елементу» в Google Tag Manager: покроковий мануал

    1. Далі потрібно вказати селектор CSS для вибору одного або декількох елементів, які запускають тригер.Отримати його досить просто. Потрібно виконати 3 прості кроки:
      • Натиснути правою кнопкою миші на блоці, який з’являється в результаті виконання події.
      • Натиснути правою кнопкою миші на коді елемента і вибрати Copy -> Copy selector
      • Значення буде додано в буфер обміну, далі його потрібно вставити в поле “Селектор елементу”.

      Як налаштувати тригер «‎Доступність елементу» в Google Tag Manager: покроковий мануал

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

      Для цього потрібно створити змінну такого вигляду і надалі додати її в умови спрацьовування тригера тільки за умови певного значення елемента (конкретного тексту повідомлення).

Як налаштувати тригер «‎Доступність елементу» в Google Tag Manager: покроковий мануал

  1. Слідом необхідно визначити правила запуску тригера:
    • Один раз на сторінку: якщо кілька елементів на сторінці з’являються за допомогою селектора CSS, цей тригер спрацює тільки при першому зображенні одного з них на цій сторінці.
    • Один раз на елемент: якщо кілька елементів на сторінці з’являються з допомогою селектора CSS, цей тригер спрацює при першому зображенні кожного з них на цій сторінці.
    • З кожною появою елемента на екрані: цей тригер спрацьовуватиме кожного разу, коли відповідний елемент стає видимим.
  2. Вказуємо додаткові значення.
    • Вказуємо мінімальний відсоток видимості. Чим нижче відсоток, тим швидше спрацює тригер. Збільшуючи відсоток, ми робимо умови активації більш суворими.
    • Вказуємо мінімальний час видимості. Це час, який ми повинні спостерігати необхідний елемент до того, як тригер спрацює. Менше часу – швидше спрацює тригер.
    • Якщо необхідний елемент динамічно зображатися (тобто він виникає при попередній взаємодії зі сторінкою, на початку не зображаючись на ній), то в налаштуванні тригера так само необхідно поставити позначку “Реєстрація змін DOM”.
  3. В результаті має вийти тригер з налаштуваннями:
  4. Як налаштувати тригер «‎Доступність елементу» в Google Tag Manager: покроковий мануал
  5. Тепер створюємо тег, який буде відправляти дані в Google analytics. Створити його необхідно також як і для інших подій.
    Тип тегу: Google Аналітика – Universal Analytics.
    Тип відстеження: Подія.
    Категорія: довільне значення.
    Дія: довільне значення.
    Ярлик: {{Page URL}} – це, щоб в ярлику можна було побачити url-адресу на яку спрацювала подія.
  6. Як налаштувати тригер «‎Доступність елементу» в Google Tag Manager: покроковий мануал
    І вказуємо тригер, який ми створили раніше.

    Як перевірити реалізацію?

    Після виконання всіх зазначених налаштувань необхідно обов’язково перевірити коректність спрацьовування події за допомогою відладчика Google Tag Manager.

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

    Аліна Глазиріна

    головний редактор блогу Inweb

    Підпишіться і будьте в курсі!

    Аліна пише про головні новини інтернет-маркетингу
    Користувальницької угоди