Відправлення форми – один із основних способів отримання лідів на сайті. Найпростіший спосіб отримати більше інформації про це – передавати дані про заповнену форму в Google Analytics.
Існує безліч способів розробки форм, саме тому існує також безліч способів відстежити відправлення форми. Я вже писав статтю про те, як Відстежувати взаємодію користувачів з формами за допомогою Google Tag Manager. Але вона не описувала роботу з базовим тригером відправлення форми, про який я хочу розповісти зараз.
Алгоритм наступний: спочатку пробуєте метод із цієї статті, якщо не працює – зі статті вище. В планах також написати статтю щодо відстеження відправки форми за допомогою типу тригера Видимість елемента.
- Знайомство з тригером типу Form Submission
- Вбудовані змінні категорії Форми
- Практичне налаштування тригера та тега для передачі даних у Google Analytics
Перед тим, як ми почнемо, давайте розберемося, чому описаний нижче спосіб може не працювати. Для цього існує лише дві причини:
- Не відбувається подія submit. Тут все просто, тригер відправки форми очікує подію submit у браузері. Якщо вона не відправляється – ваше відстеження працювати не буде. Часто така ситуація спостерігається при використанні користувацьких запитів для відправлення даних форм, наприклад ajax.
- Подія submit відбувається, але щось заважає піднятися на рівень document. Пов’язано це з тим, що диспетчер тегів не прикріплює обробник події до кожного елемента на сторінці, а очікує інформацію про нього на верхньому рівні – вузлі document. Основною причиною помилки є ситуація, коли розповсюдження події зупиняє обробник jQuery, який повертає значення false.
Якщо ваша форма підпадає під одну з цих умов, ви можете обговорити зміни з розробником або скористатися способом з першої статті.
Знайомство з тригером типу Form Submission
Налаштування тригера типу Form Submissiom дуже сильно нагадує роботу з тригером Тільки посилання. Тут також є параметри Очікувати на теги і Перевірка помилок, які виконують майже такі ж функції.
- Очікувати теги – параметр дозволяє призупинити відправлення форми до тих пір, поки всі теги, що використовують тригер, спрацюють або поки не закінчиться час очікування (за замовчуванням 2000 мілісекунд).
- Перевірка помилок – встановлення прапорця дозволяє не запускати тригер, якщо дія форми за замовчуванням (надсилання та перенаправлення) заборонена.
- Активувати тригер при настанні події та виконанні всіх цих умов – з’являється лише коли один із параметрів Очікувати теги або Перевірка помилок активовано. Дозволяє задати умови, за яких тригер відправлення форми запускатиметься. Не плутайте з параметром Умови активації тригера, який відповідає за активацію тега.
На практиці, якщо немає особливої потреб, пов’язаної з появою помилок на сайті, більшість цих параметрів не використовується. Основні умови задаються у параметрі Умови активації тригера.
Вбудовані змінні категорії Форми
Мені завжди було незрозуміло, навіщо в 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 (значення ключа gtm.elementText)
На практиці використовувати вбудовані змінні категорії Форми немає потреби. Достатньо змінних категорії Кліки.
Практичне налаштування тригера та тега для передачі даних у Google Analytics
Тепер, коли ви знаєте всю теоретичну частину – настав час перейти до практики.
Налаштування тригера за наявності ідентифікатора форми
Для налаштування тригера нам знадобиться дізнатися унікальну рису нашої форми, наприклад ID або CSS селектор. Для цього відкрийте код форми і знайдіть тег, що відкриває form (у коді він починається з <form):
Далі скопіюйте значення id. У моєму випадку це searchform. Тепер перейдіть до диспетчера тегів і створіть новий тригер типу Form Submission. У параметрі Умова активації тригеру оберіть змінну Click ID і вставте скопійоване значення в потрібне поле.
Якщо все зроблено правильно, то в попередньому перегляді при відправці події ви побачите, що тригер спрацював:
Для передачі події в Google Analytics залишилося налаштувати тег. Приклад нижче:
Налаштування тригера за допомогою CSS селектора
У випадках, коли немає ідентифікатора форми, вам на допомогу прийдуть CSS селектори. Щоб отримати селектор потрібного елемента, клацніть на його код правою кнопкою миші та виберіть Copy> Copy selector:
Тепер при створенні тригера у параметрі Умови активації тригера необхідно вибрати змінну Click Element, а умова перевірки Відповідає селектору CSS. В останнє вставте скопійоване значення:
Налаштування тега для надсилання даних аналогічне пункту вище.
Замість висновку
Відстеження відправки форми за допомогою базового тригера є простим, але не дієвим методом. Якщо вам пощастило, ваш алгоритм буде наступним:
- Визначити унікальний ідентифікатор чи CSS селектор форми;
- Налаштувати тригер типу Form Submission з відповідною умовою;
- Налаштувати тег для передачі даних у Google Analytics;
- Налаштувати ціль у Google Analytics (опціонально).
В іншому випадку не забудьте прочитати статтю Відстежування взаємодії користувачів з формами за допомогою Google Tag Manager. Рішення описані у ній складніші технічно, але працюють із усіма формами.
