Відстежуємо взаємодію користувачів із формами за допомогою Google Tag Manager

Відстежуємо взаємодію користувачів із формами за допомогою Google Tag Manager

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

Більшість інтернет-маркетологів намагаються знати з яких саме джерел приходять на майданчик відвідувачі, які відправили форми, і це не може не тішити. Але крім успішного відправлення, є й інші способи взаємодії з формами, і саме їхнє відстеження допомагає зрозуміти, чому частина зацікавлених користувачів так і не звернулася. Ми розберемо, як відстежувати такі способи взаємодії користувача з формами (перелік від простого до складного):

Цікаво? Тоді давайте як найшвидше приступимо.

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

Почнемо з простого: клік по кнопці відправки форми, і нам знадобиться:

  • Увімкнути вбудовані змінні типу Clicks. Для цього перейдіть до розділу Змінні Вбудовані змінні> та натисніть кнопку Налаштувати:

Включаємо вбудовані змінні GTM типу Clicks

  • Дізнатись ідентифікатор, клас або CSS-селектор необхідної нам кнопки. Найчастіше у необхідного елемента немає класу або ID, тому ми підемо шляхом селектора CSS. У браузері Chrome натисніть правою кнопкою миші на потрібний елемент і виберіть пункт Переглянути код . У відкритому новому вікні на виділеному коді натисність ще раз правою кнопкою миші та вибиріть Copy > Copy selector:

Як дізнатися ідентифікатор, клас або CSS-селектор необхідної кнопки

  • Створити тригер із необхідною умовою. Вибираємо тип тригера – Всі елементи . Умови активації – Деякі кліки . І задаємо таку умову:

Створення триггера на кліку на певну кнопку форми

де замість YOUR_SELECTOR вказуємо скопійоване значення CSS-селектора.

  • Створити тег для надсилання даних у Google Analytics. Тип необхідного тега Google Analytics – Universal Analytics . Тип відстеження – Подія . Категорію, Дію та Ярлик події можна задати на свій розсуд:

Тег відправки події на кліку на кнопку форми

На цьому налаштування відстеження кліка по кнопці успішно завершено. Але на практиці, більшість форм мають валідацію, і добре б розуміти, який відсоток користувачів вводить коректні дані, а який відсоток це робить з помилками.

Передача значення введеного у поля форми

Щоб налаштувати перевірку валідації форми при натисканні на кнопку відправки, нам необхідно спочатку навчитися зберігати значення, які вводить користувач у поля форми. Для цього нам знадобиться змінна користувача користувача Власний код JavaScript з наступним кодом:

function() {

   var value = jQuery('YOUR_SELECTOR').val();

   return value;

}

Перед використанням необхідно замінити YOUR_SELECTOR на CSS-селектор потрібного поля. Отримати його можна за аналогією із CSS-селекторами кнопки. Тільки клацнути правою кнопкою тепер потрібно не на кнопку, а на відповідне поле:

Як дізнатися CSS-селектор поля введення форми

Щоб перевірити, чи дійсно ви скопіювали необхідний селектор, запустіть у консолі розробника наступний код:

jQuery('YOUR_SELECTOR').val()

Якщо все правильно, отримайте поточне значення поля:

Перевірка CSS-селектора в консолі розробника

Створена змінна виглядатиме так:

Змінна для зберігання інформації з інпутної форми

Тепер зможете використовувати цю змінну для передачі в будь-яку зовнішню систему. Раді? Я теж! Саме час перейти до налаштування валідації форми через Google Tag Manager.

Перевірка валідації форми під час кліку

Для цього рішення нам знадобиться ще одна змінна користувача, назвемо її {{JS – valid form}}, типу Власний код JavaScript :

Змінна Google Tag Manager для валідації форми під час кліку

Для зручності можна скопіювати код нижче:

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 Analytics для надсилання даних про успішне надсилання форми

Зміна даних у полях форми

Ми розібрали, як за допомогою Google Tag Manager відслідковувати спроби, а також успішні надсилання форми. Але є ще одна сіра зона: відвідувачі, які почали заповнювати форму, але її так і не відправили. Нині це виправимо!

Тут нам знадобиться:

  • Тег для відстеження взаємодії із полями форми. Створіть тег типу HTML користувача з наступними налаштуваннями:

Користувальницький HTML тег для відстеження взаємодії з полями форми в GTM

Код, який використовується:

<script>

(function() {

   var formSelector = 'YOUR_SELECTOR';

   document.querySelector(formSelector).addEventListener('change', function() {

      dataLayer.push ({

         'event':'change form',

      })

   });

})();

</script>

Замість YOUR_SELECTOR необхідно ввести значення CSS-селектора форми.

Тригером для даного тега вибираємо подію Window Loaded . Найкраще обмежити тригер лише тими сторінками, у яких є відповідна форма. Наприклад для головної:

Тригер Window Loaded для відстеження взаємодії з полями форми

І в момент, коли користувач змінює значення в будь-якому з полів форми, ми передаємо на рівень даних інформацію про подію change form , що дозволить у наступному пункті налаштувати на цю подію відповідний тригер.

  • Тег для надсилання даних до Google Analytics з відповідним тригером. Для відправки даних створюємо тригер типу Угода користувача і вказуємо ім’я події change form :

Тригер користувача події для відстеження форми в Google Tag Manager

При створенні тега для передачі даних в Google Analytics важливо у розділі Розширені налаштування > Налаштування активації тега вказати значення Один раз на сторінку. Ми ж не хочемо, щоб подія відправлялася щоразу при зміні значення у полях форми? Сам тег буде виглядати так:

Тег для надсилання даних у Google Analytics про взаємодію з полями форми

З отриманих даних цілком можна побудувати наступну вирву, яка дасть нам розуміння, на якому етапі взаємодії з формою ми втрачаємо залучених користувачів:

  • користувачі, які взаємодіяли із полями форми;
  • користувачі, які намагалися надіслати форму;
  • користувачі, які успішно надіслали форму.

Якщо у вас залишилися питання щодо відстеження форм за допомогою Google Tag Manager – пишіть їх у коментарях.

 

P.S. Чи потрібно розписувати в нових статтях, що саме робить певний Java Script код, чи так зрозуміло?