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

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

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

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

Область застосування тригера «Видимість елемента»

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

Розглянемо на приклад відправки форми «Замовити дзвінок»:

При успішній відправці форми користувач отримує повідомлення:

Тобто тип тригера «Видимість елемента» спрацьовує тільки в разі, якщо певний елемент сторінки доступний користувачеві.

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

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

   Метод вибору: Селектор CSS.

   

2. Далі потрібно вказати селектор CSS для вибору одного або декількох елементів, які запускають тригер. Отримати його досить просто. Потрібно виконати 3 прості кроки:
   • Натиснути правою кнопкою миші на блоці, який з’являється в результаті виконання події.
   • Натиснути правою кнопкою миші на коді елемента і вибрати Copy – & gt; Copy selector
   • Значення буде додано в буфер обміну, далі його потрібно вставити в поле «Селектор елемента».

   

   Важливий нюанс.

   Якщо цей селектор не унікальний, а однаковий для кількох об’єктів, які повідомляють про різні цілі, то потрібно додати умову в спрацьовування тригера. Для цього достатньо вказати умову активації тригера в самому низу конфігурації, вибравши «Деякі події» типу «Доступність». І додати умову спрацьовування тригера тільки при певному значенні елемента (конкретного тексту повідомлення):

   

3. Слідом необхідно визначити правила запуску тригера:
   • Один раз на сторінку: якщо кілька елементів на даній сторінці зіставляються з допомогою селектора CSS, цей тригер спрацює тільки при першому відображенні одного з них на цій сторінці.
   • Один раз на елемент: якщо кілька елементів на даній сторінці зіставляються з допомогою селектора CSS, цей тригер спрацює при першому відображенні кожного з них на цій сторінці.
   • З кожною появою елемента на екрані: цей тригер спрацьовує кожного разу, коли відповідний елемент стає видимим.

   

4. Вказуємо додаткові значення.
   • Вказуємо мінімальний відсоток видимості. Чим нижче відсоток, тим швидше спрацює тригер. Збільшуючи відсоток, ми робимо умова активації більш суворим.
   • Вказуємо мінімальний час видимості. Це час, який ми повинні спостерігати необхідний елемент до того, як тригер спрацює. Чим менше час, тим швидше спрацює тригер.
   • Якщо необхідний елемент є динамічно що відображається (тобто він виникає при попередньому взаємодії зі сторінкою, з самого початку не відображаючись на ній), то в налаштуванні тригера так само необхідно поставити позначку «Реєстрація змін DOM» .

   Примітка. Додаткові умови не завжди обов’язково вказувати, перш ніж вносити зміни перевірте відпрацювання тригера з умовами за замовчуванням.
   

   

5. У результаті має вийти тригер з настройками:

   

6. Тепер створюємо тег, який буде відправляти дані в Google analytics. Створити його необхідно так само як і для інших подій.
   Тип тега: Google Аналітика – Universal Analytics.
   Тип відстеження: Подія.
   Категорія: довільне значення.
   Дія: довільне значення.
   Ярлик: {{Page URL}} – це щоб в ярлику можна було побачити url-адреса на якому спрацювало подія.

   І вказуємо тригер, який ми створили раніше.

   

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

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