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

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

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

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

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

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

1. 1. 1. Selection Method (Метод вибору) – У цьому параметрі визначається метод вибору елемента. Це може бути вибір за ідентифікатором елемента або CSS селектором.
      2. Element ID/Element Selector (ID/Селектор 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 (Вкажіть мінімальний час видимості) – Вказуємо мінімальний час, який елемент повинен знаходитись у видимій області екрану, щоб тригер спрацював. Значення вказується у мілісекундах. ВАЖЛИВО! Загальний час, який елемент провів на екрані підсумовується. Якщо в умові вказано 5000 мілісекунд (5 сек) і користувач спершу бачив елемент 3 секунди, а потім ще 2 – тригер спрацює.
      6. Observe DOM changes (Реєстрація змін DOM) – Увімкніть цей параметр, якщо елемент, поява якого необхідно відстежити, з’являється пізніше внаслідок змін DOM. Наприклад, спливаюче вікно після відправлення форми.
      7. This trigger fires on (Умова активації тригера) – Виберіть Деякі елементи, щоб вказати додаткові умови активації. Наприклад, тільки на головній сторінці, як на скріншоті вище.

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

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

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

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

1. 1. • Selection Method (Метод вибору) – Вибираємо CSS Selector.
      • Element Selector (Селектор CSS) – Вставляємо селектор елемента, який ми скопіювали раніше.
      • 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 (Умова активації тригера) – Вибравши пункт Деякі елементи, вкажіть сторінки, на яких знаходиться форма (наприклад, головна) або виберіть всі елементи, якщо хочете відстежувати подію на всіх сторінках.

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

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

У полі Label (Ярлик) не забудьте вказати назву форми.

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

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