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

Відправлення форми - один із основних способів отримання лідів на сайті. Найпростіший спосіб отримати більше інформації про це - передавати дані про заповнену форму в Google Analytics 4.

Існує безліч способів розробки форм, саме тому існує також безліч способів відстежити відправлення форми. Я вже писав статтю про те, як Відстежувати взаємодію користувачів з формами за допомогою Google Tag Manager. Але вона не описувала роботу з базовим тригером відправлення форми, про який я хочу розповісти зараз.

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

• Знайомство з тригером типу Form Submission
• Вбудовані змінні категорії Форми
• Практичне налаштування тригера та тега для передачі даних у Google Analytics 4
  • За наявності ідентифікатора форми
  • За допомогою CSS селектора
• Замість висновку

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

• Не відбувається подія submit. Тут все просто, тригер відправки форми очікує подію submit у браузері. Якщо вона не відправляється – ваше відстеження працювати не буде. Часто така ситуація спостерігається при використанні користувацьких запитів для відправлення даних форм, наприклад ajax.
• Подія submit відбувається, але щось заважає їй піднятися на рівень document. Пов'язано це з тим, що диспетчер тегів не прикріплює обробник події до кожного елемента на сторінці, а очікує інформацію про нього на верхньому рівні - вузлі document. Основною причиною помилки є ситуація, коли розповсюдження події зупиняє обробник jQuery, який повертає значення false.

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

Знайомство з тригером типу Form Submission

Налаштування тригера типу Form Submissiom (Надсилання форми) дуже сильно нагадує роботу з тригером Just Links (Тільки посилання). Тут також є параметри Wait for Tags (Зачекати на теги) і Check Validation (Перевіряти дійсність), які виконують майже такі ж функції.

• Wait for Tags (Зачекати на теги) - параметр дозволяє призупинити відправлення форми до тих пір, поки всі теги, що використовують тригер, спрацюють або поки не закінчиться час очікування (за замовчуванням 2000 мілісекунд).
• Check Validation (Перевіряти дійсність) – встановлення прапорця дозволяє не запускати тригер, якщо дія форми за замовчуванням (надсилання та перенаправлення) заборонена.
• Enable this trigger when all of these conditions are true (Увімкнути цей тригер, якщо виконуються всі відповідні умови) - з'являється лише коли один із параметрів Check Validation (Перевіряти дійсність) або Check Validation (Перевіряти дійсність) активовано. Дозволяє задати умови, за яких тригер відправлення форми запускатиметься. Не плутайте з параметром Умови активації тригера, який відповідає за активацію тега.

На практиці, якщо немає особливої потреби, пов'язаної з появою помилок на сайті, більшість цих параметрів не використовується. Основні умови задаються у параметрі This trigger fires on (Запуск тригера).

Вбудовані змінні категорії Форми

Мені завжди було незрозуміло, навіщо в Google Tag Manager існує категорія вбудованих змінних Forms (Форми). Дані цих змінних ідентичні даним у змінних категорії Clicks (Кліки). Але щоб матеріал вже був повний, давайте їх таки розберемо.

• Form Element - Повертає HTML елемент, з яким пов'язана дія. Так, вам не здалося, саме "дія". І тут мається на увазі не тільки відправка форми, дія може бути будь-якою: відправлення форми, клік на елемент, видимість елемента. (Іншими словами повертає значення ключа gtm.element з dataLayer)
• Form Classes — повертає значення класу елемента (значення ключа gtm.elementClasses).
• Form ID — повертає рядок зі значенням атрибута ID елемента автоподії (значення ключа gtm.elementId).
• Form Target – повертає значення атрибуту target (значення ключа gtm.elementTarget)
• Form URL - повертає значення атрибуту href або action (значення ключа gtm.elementUrl).
• Form Text — повертає значення атрибута textContent / innerText

На практиці використовувати вбудовані змінні категорії Forms (Форми) немає потреби. Достатньо ідентичних змінних категорії Clicks (Кліки).

Практичне налаштування тригера та тега для передачі даних у Google Analytics 4

Тепер, коли ви знаєте всю теоретичну частину - настав час перейти до практики.

Налаштування тригера за наявності ідентифікатора форми

Для налаштування тригера нам знадобиться дізнатися унікальну рису нашої форми, наприклад ID або CSS селектор. Для цього відкрийте код форми і знайдіть тег, що відкриває form (у коді він починається з <form):

Далі скопіюйте значення id. У моєму випадку це searchform. Тепер перейдіть до диспетчера тегів і створіть новий тригер типу Form Submission (Надсилання форми). У параметрі This trigger fires on (Запуск тригера) оберіть змінну Click ID і вставте скопійоване значення в потрібне поле.

Якщо все зроблено правильно, то в попередньому перегляді при відправці події ви побачите, що тригер спрацював:

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

Налаштування тригера за допомогою CSS селектора

У випадках, коли немає ідентифікатора форми, вам на допомогу прийдуть CSS селектори. Щоб отримати селектор потрібного елемента, клацніть на його код правою кнопкою миші та виберіть Copy > Copy selector:

Тепер при створенні тригера у параметрі This trigger fires on (Запуск тригера) необхідно вибрати змінну Click Element, а умова перевірки Відповідає селектору CSS. В останнє поле вставте скопійоване значення CSS селектора:

Налаштування тега для надсилання даних аналогічне пункту вище.

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

Відстеження відправки форми за допомогою базового тригера є простим, але дієвим методом. Якщо вам пощастило, ваш алгоритм буде наступним:

1. Визначити унікальний ідентифікатор чи CSS селектор форми;
2. Налаштувати тригер типу Form Submission (Надсилання форми) з відповідною умовою;
3. Налаштувати тег для передачі даних у Google Analytics 4;
4. Налаштувати ключову подію (раніше - конверсію) в Google Analytics 4 (опціонально).

Також не забудьте прочитати інші статті з відстеження дій користувачів на сайті:

• Відстеження відправки форми за допомогою тригера Element Visibility (Видимість елемента)
• Відстеження взаємодії користувачів з формами за допомогою Google Tag Manager. Рішення описані у цій складніші технічно, але працюють із усіма формами.

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