Відстеження відправки форми за допомогою тригера Видимість елемента

Важливість відстеження відправок форм на сайті складно переоцінити, адже це один із основних способів залишити заявку. Раніше я вже писав статті про те, як відстежувати надсилання форми в Google Tag Manager за допомогою базового тригера та за допомогою валідації всередині диспетчера тегів. Сьогодні хочу показати ще один спосіб – він підходить для форм, у яких після успішного відправлення спливає вікно подяки. Наприклад, таке:

В основі цього способу є використання тригера типу Element Visibility (Видимість елемента). Тому з одного боку ця стаття про відстеження форм, з другого - про роботу з тригером типу Element Visibility (Видимість елемента).

• Основи роботи з тригером Видимість елемента
• Налаштування тригера на появу вікна подяки
• Надсилання даних у Google Analytics 4
• Замість висновку

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

Тип тригера Element Visibility (Видимість елемента) допомагає відстежити потрапляння елемента у видиму область екрана. Давайте розглянемо його параметри детальніше:

1. Selection Method (Метод вибору) - У цьому параметрі визначається метод вибору елемента. Це може бути вибір за ідентифікатором елемента або CSS селектором.

2. Element ID/Element Selector (Ідентифікатор/Селектор CSS) - Залежно від значення параметра Selection Method (Спосіб вибору) у цьому полі вказуємо ідентифікатор елемента або його селектор.

3. When to fire this trigger (Частота запуску тригера) - Дозволяє задати умову, скільки разів на сторінці може спрацьовувати тригер:

• Once per page (Один раз на сторінці) - Незалежно від кількості появ елемента у видимій області екрану, тригер спрацює один раз на сторінці. Якщо на сторінці кілька елементів, які підходять під умову, тригер спрацює тільки для першого з них.
• Once per element (Один раз для одного елемента) - Тригер спрацьовуватиме для кожного елемента на сторінці один раз. При цьому, якщо елемент вибрано за допомогою селектора CSS, і на сторінці існує кілька елементів, що підходять під умову, тригер буде спрацьовувати по одному разу для кожного з них. Якщо умова вказана за допомогою ID, тригер спрацює тільки для першого елемента на сторінці.
• Every time an element appears on screen (Щоразу, коли елемент з’являється на екрані) - Тригер спрацьовуватиме при кожній появі потрібного елемента на екрані.

4. Minimum Percent Visible (Мінімальний відсоток видимості) - У цьому параметрі можна вказати мінімальний відсоток видимості елемента, при якому спрацьовуватиме тригер. Можливе значення від 1 до 100. Можна використовувати в тих випадках, коли ми хочемо, щоб користувач побачив якийсь елемент, наприклад, банер, повністю.

5. Set minimum on-screen duration (Укажіть мінімальний час видимості на екрані) - Вказуємо мінімальний час, який елемент повинен знаходитись у видимій області екрану, щоб тригер спрацював. Значення вказується у мілісекундах.

6. Observe DOM changes (Стежити за змінами DOM) - Увімкніть цей параметр, якщо елемент, появу якого необхідно відстежити, з'являється пізніше внаслідок змін DOM. Наприклад, вікно, яке з'являється після відправлення форми.

7. This trigger fires on (Запуск тригера) - Виберіть Some Visibility Elements (Події, які в разі видимості елемента запускаються на деяких сторінках), щоб вказати додаткові умови активації. Наприклад, тільки на головній сторінці, як на скріншоті вище.

Налаштування тригера на появу вікна подяки

Теорія - це, звичайно, добре, але давайте перейдемо до практики. У моєму випадку ми будемо робити налаштування на основі селектора CSS, тому що ідентифікатора немає. Щоб отримати його, нам знадобиться заповнити форму і побачити це вікно. Після цього перейдіть до режиму перегляду коду сторінки. Для цього натисніть правою кнопкою на потрібному елементі та виберіть пункт Inspect (Переглянути код):

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

Перейдіть до Google Tag Manager і створіть новий тригер типу Element Visibility (Видимість елемента) з наступними налаштуваннями:

• Selection Method (Спосіб вибору) - Вибираємо CSS Selector (Селектор CSS).
• Element Selector (Селектор елемента) - Вставляємо селектор елемента, який ми скопіювали раніше.
• When to fire this trigger (Частота запуску тригера) - Once per page (Один раз на сторінку). Адже ми не хочемо, щоб при повторному надсиланні форми на сторінці подія відправилась ще раз.
• Minimum Percent Visible (Мінімальний відсоток видимості) - Нам не особливо важливо, скільки відсотків тексту подяки побачить користувач, тому чим менше, тим краще. Наприклад, 10.
• Set minimum on-screen duration (Укажіть мінімальний час видимості на екрані) - Параметр у цьому випадку не важливий. Можна не вмикати.
• Observe DOM changes (Стежити за змінами DOM) - Обов'язково увімкнути, оскільки вікно з'являється якраз під час змін DOM.
• This trigger fires on (Запуск тригера) - Вибравши пункт Some Visibility Elements (Події, які в разі видимості елемента запускаються на деяких сторінках), вкажіть сторінки, на яких знаходиться форма (наприклад, головна) або виберіть всі елементи, якщо хочете відстежувати подію на всіх сторінках.

Надсилання даних у Google Analytics 4

Для надсилання даних у Google Analytics 4 можна використовувати стандартний тег типу події з такими налаштуваннями:

Не забудьте в полі Event Name (Назва події) вказати назву події, яка потрібна саме вам.

Замість висновку

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

Якщо вам сподобався матеріал — підписуйтесь на мій канал в Telegram та Facebook.