нд, 2 вересня 2018 р.
Відстежуємо взаємодію користувачів із формами за допомогою Google Tag Manager
Оригінальна стаття була написана 2 вересня 2019 року і йшлося в ній про передачу даних до Google Analytics Universal, але при переїзді блогу на нову CMS я вирішив оновити матеріал, до актуальної версії Google Analytics 4.
Серед трьох основних способів залишити свою заявку на сайті, а саме: відправити форму, здійснити дзвінок та написати в чат, перший займає левову частку в загальній кількості та відстежується набагато частіше, ніж інші.
Більшість інтернет-маркетологів намагаються знати з яких саме джерел приходять на сайт відвідувачі, які відправили форми, і це не може не тішити. Але крім успішного відправлення, є й інші способи взаємодії з формами, і саме їхнє відстеження допомагає зрозуміти, чому частина зацікавлених користувачів так і не звернулася. Ми розберемо як відстежувати такі способи взаємодії користувача з формами (перелік від простого до складного):
- відправка події при натисканні на кнопку відправки форми;
- передача значення введеного в поля форми;
- перевірка валідації значень введених в поля форми;
- відстеження зміни даних у полях форми.
Цікаво? Тоді давайте якнайшвидше приступимо.
Почнемо з простого: клік на кнопку відправки форми. Нам знадобиться:
- Увімкнути вбудовані змінні типу Clicks. Для цього перейдіть до розділу Variables (Змінні) -> Configure (Налаштувати)
І відмітьте галочками всі змінні в категорії Click:
- Дізнатись ідентифікатор, клас або CSS-селектор необхідної нам кнопки. Найчастіше у необхідного елемента немає класу або ID, тому ми підемо шляхом селектора CSS.
Подальші декілька речень орієнтовані на користувачів браузера Chrome, якщо у вас інший браузер, виконайте відповідні дії в ньому.
Натисніть правою кнопкою миші на потрібний елемент і виберіть пункт Inspect. У відкритому новому вікні, на виділеному коді, натисність ще раз правою кнопкою миші та вибиріть Copy > Copy selector:
Іноді декілька елементів можуть відповідати одному селектору. Для того, щоб впевнитися, що ви скопіювали саме той селектор, який охоплює всі потрібні вам елементи, ви можете скористатися моїм розширенням PROANALYTICS. Цей інструмент виділяє на сторінці елементи, які відповідають заданому CSS-селектору.
- Створити тригер із необхідною умовою. Вибираємо тип тригера - All Elements (Усі елементи). Умови активації - Some clicks (Окремі кліки). І задаємо таку умову:
де замість YOUR_SELECTOR вказуємо скопійоване значення CSS-селектора.
- Створити тег для надсилання даних у Google Analytics 4.
На цьому налаштування відстеження кліка по кнопці успішно завершено. Ще більше про відстеження кліків по елементах я писав в матеріалі - Відстеження кліків на елементи сайту за допомогою GTM.
Передача значення введеного у поля форми
Щоб налаштувати перевірку валідації форми при натисканні на кнопку відправки, нам необхідно спочатку навчитися зберігати значення, які вводить користувач у поля форми. Для цього нам знадобиться змінна Custom JavaScript (Спеціальна змінна JavaScript) з наступним кодом:
function() {
var element = document.querySelector('YOUR_SELECTOR');
return element ? element.value : undefined;
}Цей код:
- Шукає елемент за CSS-селектором
YOUR_SELECTOR. - Якщо елемент знайдено — повертає його значення (
.value). - Якщо елемент не знайдено — повертає
undefined(щоб уникнути помилки в GTM).
Перед використанням необхідно замінити YOUR_SELECTOR на CSS-селектор потрібного поля. Отримати його можна за аналогією із CSS-селекторами кнопки. Тільки клікнути правою кнопкою тепер потрібно не на кнопку, а на відповідне поле:
Щоб перевірити, чи дійсно ви скопіювали необхідний селектор, запустіть у консолі розробника наступний код:
document.querySelector('YOUR_SELECTOR')?.valueЯкщо все правильно, отримайте поточне значення поля:
Створена змінна виглядатиме так:
Тепер зможете використовувати цю змінну для передачі в будь-яку зовнішню систему. Раді? Я теж! Саме час перейти до налаштування валідації форми через Google Tag Manager.
Перевірка валідації значень введених в поля форми
Для цього рішення нам знадобиться ще одна змінна типу Custom JavaScript (Спеціальна змінна JavaScript), назвемо її {{JS - valid form}}:
Для зручності можна скопіювати код нижче:
function() {
var nameEl = document.querySelector('YOUR_SELECTOR_NAME');
var emailEl = document.querySelector('YOUR_SELECTOR_EMAIL');
var telEl = document.querySelector('YOUR_SELECTOR_TEL');
var name = nameEl ? nameEl.value.trim() : '';
var email = emailEl ? emailEl.value.trim() : '';
var tel = telEl ? telEl.value.trim() : '';
var emailReg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
var telReg = /^[0-9()\-\s]{10,20}$/;
if (name.length > 0 && emailReg.test(email) && telReg.test(tel)) {
return true;
} else {
return false;
}
}де замість значень YOUR_SELECTOR_NAME, YOUR_SELECTOR_EMAIL, YOUR_SELECTOR_TEL необхідно ввести значення CSS-селекторів для відповідних полів форми. Як це зробити, ми розбирали вище.
Тепер, коли ми налаштували валідацію всередині змінної GTM, саме час створити тригер та тег для надсилання даних до Google Analytics 4. Перший створюємо за аналогією зі звичайним кліком на кнопку, єдина відмінність - створена нами змінна для перевірки валідації повинна мати значення true.
Тег виглядатиме приблизно так:
Зміна даних у полях форми
Ми розібрали, як за допомогою Google Tag Manager відслідковувати спроби, а також успішні надсилання форми. Але є ще одна сіра зона: відвідувачі, які почали заповнювати форму, але її так і не відправили. Зараз це виправимо!
Тут нам знадобиться:
- Тег з тригером для відстеження взаємодії із полями форми. Створіть тег типу Custom HTML (Користувацький тег HTML) з наступними налаштуваннями:
Код, який використовується:
<script>
(function() {
var formSelector = 'YOUR_SELECTOR';
var form = document.querySelector(formSelector);
if (form) {
form.addEventListener('change', function() {
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'form_change'
});
});
}
})();
</script>Замість YOUR_SELECTOR необхідно ввести значення CSS-селектора форми.
Тригером для даного тега вибираємо подію Window Loaded (Завантаження вікна). Найкраще обмежити тригер лише тими сторінками, у яких є відповідна форма. Наприклад, для головної сторінки сайту налаштування буде виглядати так:
У результаті цих налаштувань тепер в момент, коли користувач змінює значення в будь-якому з полів форми, ми передаємо на рівень даних (dataLayer) інформацію про подію form_change, що дозволить у наступному пункті налаштувати на цю подію відповідний тригер.
- Тег для надсилання даних до Google Analytics 4 з відповідним тригером. Для відправки даних створюємо тригер типу Custom event (Спеціальна подія) і вказуємо ім'я події
form_change:
При створенні тега для передачі даних в Google Analytics 4 важливо у розділі Advanced Settings (Додаткові налаштування) -> Tag firing options (Параметри запуску тегів) вказати значення Once per event (Один раз на сторінку). Ми ж не хочемо, щоб подія відправлялася щоразу при зміні значення у полях форми?
Сам тег буде виглядати так:
Замість висновку
З отриманих даних цілком можна побудувати наступну воронку, яка дасть нам розуміння, на якому етапі взаємодії з формою ми втрачаємо залучених користувачів:
- користувачі, які взаємодіяли із полями форми;
- користувачі, які намагалися надіслати форму;
- користувачі, які успішно надіслали форму.
Якщо у вас на сайті декілька форм рекомендую передавати в параметр події назву форми, щоб мати можливість будувати воронки як в тоталі по сайту, так і окремо для кожної форми. Детальніше про параметри подій писав тут.
Якщо у вас залишилися питання щодо відстеження форм за допомогою Google Tag Manager спробуйте скористатись наступними матеріалами, або пишіть свої питання в коментарях.
- Відстеження відправки форми за допомогою тригера Видимість елемента
- Відстеження відправки форми за допомогою базового тригера GTM
P.S. Чи потрібно розписувати в нових статтях, що саме робить певний Java Script код, чи в епоху ChatGPT це вже не актуально?
Якщо вам сподобався матеріал — підписуйтесь на мій канал в Telegram та Facebook.
Вебаналітик, Маркетолог