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

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

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

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

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

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

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

      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, тому що ідентифікатора немає. Щоб отримати його, нам знадобиться заповнити форму і побачити це вікно. Після цього перейдіть до режиму перегляду коду сторінки. Для цього натисніть правою кнопкою на потрібному елементі та виберіть пункт Переглянути код:Перехід до режиму перегляду коду сторінки

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

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

      • 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 можна використовувати стандартний тег типу події з такими налаштуваннями:Тег для надсилання даних у Google Analytics

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

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

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