Серед трьох основних способів залишити свою заявку на сайті, а саме: відправити форму, здійснити дзвінок та написати в чат, перший займає левову частку в загальній кількості та відстежується набагато частіше, ніж інші.
Більшість інтернет-маркетологів намагаються знати з яких саме джерел приходять на сайт відвідувачі, які відправили форми, і це не може не тішити. Але крім успішного відправлення, є й інші способи взаємодії з формами, і саме їхнє відстеження допомагає зрозуміти, чому частина зацікавлених користувачів так і не звернулася. Ми розберемо як відстежувати такі способи взаємодії користувача з формами (перелік від простого до складного):
- відправка події при натисканні на кнопці відправки форми;
- передача значення введеного поля форми;
- перевірка валідації форми під час кліку;
- відстеження зміни даних у полях форми.
Цікаво? Тоді давайте як найшвидше приступимо.
Відстеження кліка на кнопку надсилання форми
Почнемо з простого: клік на кнопку відправки форми, і нам знадобиться:
- Увімкнути вбудовані змінні типу Clicks. Для цього перейдіть до розділу Змінні > Вбудовані змінні та натисніть кнопку Налаштувати:
- Дізнатись ідентифікатор, клас або CSS-селектор необхідної нам кнопки. Найчастіше у необхідного елемента немає класу або ID, тому ми підемо шляхом селектора CSS. У браузері Chrome натисніть правою кнопкою миші на потрібний елемент і виберіть пункт Переглянути код. У відкритому новому вікні, на виділеному коді, натисність ще раз правою кнопкою миші та вибиріть Copy > Copy selector:
- Створити тригер із необхідною умовою. Вибираємо тип тригера – Всі елементи . Умови активації – Деякі кліки . І задаємо таку умову:
де замість YOUR_SELECTOR вказуємо скопійоване значення CSS-селектора.
- Створити тег для надсилання даних у Google Analytics. Тип необхідного тега Google Analytics – Universal Analytics . Тип відстеження – Подія . Категорію, Дію та Ярлик події можна задати на свій розсуд:
На цьому налаштування відстеження кліка по кнопці успішно завершено. Але на практиці, більшість форм мають валідацію, і добре б розуміти, який відсоток користувачів вводить коректні дані, а який відсоток це робить з помилками.
Передача значення введеного у поля форми
Щоб налаштувати перевірку валідації форми при натисканні на кнопку відправки, нам необхідно спочатку навчитися зберігати значення, які вводить користувач у поля форми. Для цього нам знадобиться змінна користувача користувача Власний код JavaScript з наступним кодом:
function() {
var value = jQuery('YOUR_SELECTOR').val();
return value;
}
Перед використанням необхідно замінити YOUR_SELECTOR на CSS-селектор потрібного поля. Отримати його можна за аналогією із CSS-селекторами кнопки. Тільки клацнути правою кнопкою тепер потрібно не на кнопку, а на відповідне поле:
Щоб перевірити, чи дійсно ви скопіювали необхідний селектор, запустіть у консолі розробника наступний код:
jQuery('YOUR_SELECTOR').val()
Якщо все правильно, отримайте поточне значення поля:
Створена змінна виглядатиме так:
Тепер зможете використовувати цю змінну для передачі в будь-яку зовнішню систему. Раді? Я теж! Саме час перейти до налаштування валідації форми через Google Tag Manager.
Перевірка валідації форми під час кліку
Для цього рішення нам знадобиться ще одна змінна користувача, назвемо її {{JS – valid form}}, типу Власний код JavaScript :
Для зручності можна скопіювати код нижче:
function(){
var name = jQuery('YOUR_SELECTOR_NAME').val();
var email = jQuery('YOUR_SELECTOR_EMAIL').val();
var tel = jQuery('YOUR_SELECTOR_TEL').val();
var emailReg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
var telReg = /^?[0-9()\- ]{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. Перший створюємо за аналогією зі звичайним кліком на кнопку, єдина відмінність – створена нами змінна для перевірки валідації повинна мати значення true .
Тег виглядатиме приблизно так:
Зміна даних у полях форми
Ми розібрали, як за допомогою Google Tag Manager відслідковувати спроби, а також успішні надсилання форми. Але є ще одна сіра зона: відвідувачі, які почали заповнювати форму, але її так і не відправили. Зараз це виправимо!
Тут нам знадобиться:
- Тег для відстеження взаємодії із полями форми. Створіть тег типу Custom HTML з наступними налаштуваннями:
Код, який використовується:
<script>
(function() {
var formSelector = 'YOUR_SELECTOR';
document.querySelector(formSelector).addEventListener('change', function() {
dataLayer.push ({
'event':'change form',
})
});
})();
</script>
Замість YOUR_SELECTOR необхідно ввести значення CSS-селектора форми.
Тригером для даного тега вибираємо подію Window Loaded. Найкраще обмежити тригер лише тими сторінками, у яких є відповідна форма. Наприклад для головної:
І в момент, коли користувач змінює значення в будь-якому з полів форми, ми передаємо на рівень даних (dataLayer) інформацію про подію change form , що дозволить у наступному пункті налаштувати на цю подію відповідний тригер.
- Тег для надсилання даних до Google Analytics з відповідним тригером. Для відправки даних створюємо тригер типу Custom event і вказуємо ім’я події change form :
При створенні тега для передачі даних в Google Analytics важливо у розділі Розширені налаштування > Налаштування активації тега вказати значення Один раз на сторінку. Ми ж не хочемо, щоб подія відправлялася щоразу при зміні значення у полях форми? Сам тег буде виглядати так:
З отриманих даних цілком можна побудувати наступну воронку, яка дасть нам розуміння, на якому етапі взаємодії з формою ми втрачаємо залучених користувачів:
- користувачі, які взаємодіяли із полями форми;
- користувачі, які намагалися надіслати форму;
- користувачі, які успішно надіслали форму.
Якщо у вас залишилися питання щодо відстеження форм за допомогою Google Tag Manager – пишіть їх у коментарях.
P.S. Чи потрібно розписувати в нових статтях, що саме робить певний Java Script код, чи так зрозуміло?
