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

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

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

Зміст

1. Форми на Ajax із застосуванням jQuery

2. Форми на базі HTML-елемента <form>

3. Форми, що змінюють зовнішній вигляд або виводять повідомлення

4. Форми без Ajax і які не змінюються під час відправки

1. Форми на Ajax із застосуванням jQuery

Перевіряємо чи підключена бібліотека jQuery у коді сторінки

Для зручності ось букмарклет 'Перевірка jQuery', який автоматично перевіряє чи підключено бібліотеку jQuery та видає відповідне повідомлення

Перевірка наявності jQuery через букмарклет

Бібліотека jQuery містить стандартну функцію API – .ajaxSuccess(), вона допоможе відстежувати ajax-запити. У разі успішного відправлення на сервер ajax-запиту буде викликано callback-функцію .ajaxSuccess(), яка в якості аргументів отримає всі необхідні для ідентифікації форми дані. Ось приклад коду функції:

$(document).ajaxSuccess(function(event, request, settings) {
    dataLayer.push({
        'event': 'ajaxSuccess',
        'ajaxSuccessOptions': {
            'url': settings.url || '',
            'options': settings.data || '',
            'responseText': request.responseText || ''
        }
    });
});

Розберемося трохи в теорії

Починаючи з версії jQuery 1.9, використовувати метод ajaxSuccess можна тільки з об'єктом document. Параметри event, request, settings можна перейменувати (у такому разі не забудьте перейменувати відповідні змінні в тілі функції).

Отримані дані про ajax-запит потрібно додати в масив GTM, який за замовчуванням називається dataLayer (що перекладається як 'рівень даних'). GTM братиме дані з dataLayer, що дозволить оперувати ними у візуальному інтерфейсі інструменту, а звідти передавати до Google Analytics.

dataLayer підтримує всі стандартні методи масивів JavaScript. Додаємо в dataLayer об'єкт із даними про ajax-запит за допомогою методу push(). Задаємо властивості об'єкта відповідно до синтаксису мови 'властивість': 'значення'. Властивості 'event' надаємо значення 'ajaxSuccess' (ім'я властивості 'event' читається GTM за замовчуванням). В 'ajaxSuccessOptions' вкладаємо об'єкт із властивостями url, options та responseText. Це основний набір даних, який допоможе ідентифікувати передачу ajax-запиту за конкретною формою

Перейдемо до налаштування в Google Tag Manager:

1.1. Створюємо 'Користувальницький тег' і вставляємо код:

<script>
$(document).ajaxSuccess(function(event, request, settings) {
    dataLayer.push({
        'event': 'ajaxSuccess',
        'ajaxSuccessOptions': {
            'url': settings.url || '',
            'options': settings.data || '',
            'responseText': request.responseText || ''
        }
    });
});
</script>

Налаштування користувацького тега GTM для ajaxSuccess

1.2. Задаємо в тегу тригер 'Модель DOM готова', щоб структура сторінки встигла завантажитись і не виникло помилок виконання JavaScript

1.3. У користувацьких змінних створюємо 'Змінна рівня даних'.

У полі 'Ім'я змінної рівня даних' задаємо значення за яким ідентифікуватиметься форма.

Наприклад, у мене це 'ajaxSuccessOptions.url'. Таке налаштування дозволило отримати URL, на який було надіслано ajax-запит, та ідентифікувати певну форму. Іноді може знадобитися комбінація кількох змінних

1.4. Створюємо тег 'Google Аналітика – Universal Analytics'.

Вибираємо 'Тип відстеження' - 'Подія'

Задаємо зручні значення для полів 'Категорія' та 'Дія'. Після налаштування цілі в Google Analtyics, аналітика чекатиме на ці значення, і в разі їх надходження в такому перетині категорія/дія, буде зараховано досягнення мети.

1.5. Створюємо та підключаємо тригер 'Користувацька подія'

Для 'Ім'я події' задаємо значення 'ajaxSuccess'. Щоб тригер спрацьовував при кожній появі події 'ajaxSuccess' у dataLayer.

Включаємо кнопку 'Використовувати регулярні вирази'.

В 'Умови активації тригера' вибираємо 'Деякі спеціальні події'

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

2. Форми на базі HTML-елемента <form>

Цей спосіб підійде, якщо нема до чого прив'язатися - при відправленні форми нічого не змінюється. Однак, у цьому випадку помилки відправки даних можуть оброблятися по-різному. Якщо валідацію форми налаштовано на стороні клієнта, то реєструватимуться лише успішно відправлені форми. Якщо обробка відбувається на стороні сервера, то в Google Analytics можуть передатися відомості про неуспішні відправки форми.

2.1. Створюємо тригер 'Відправка форми'

2.2. Прив'язуємось до зручної змінної. Наприклад, Form Classes - відстеження форми відбуватиметься за її класом. Клас елемента можна отримати в коді сторінки – це значення атрибуту 'class'

3. Форми, що змінюють зовнішній вигляд або виводять повідомлення

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

3.1. Створюємо тригер 'Доступність елемента'.

У 'Метод вибору' вказуємо 'Селектор CSS'. Задаємо селектор елемента, який з'являється після успішної відправки форми.

Отримати CSS-селектор можна, вибравши елемент вікна з повідомленням про успішну відправку форми. 'Подивитися код' > правою кнопкою миші на елемент у коді > 'Copy' > 'Copy Selector'

Для 'Правило запуску цього тригера' вибираємо 'При кожній появі елемента на екрані'. Це дозволить відстежувати кілька надісланих поспіль заявок. Тобто у випадку, якщо користувач не оновить сторінку і замовить кілька разів.

У 'Мінімальний відсоток видимості' задаємо '1%'. Оскільки часто на мобільних пристроях повідомлення про успішну відправку виходять за межі нижньої межі екрана пристрою.

Включаємо 'Реєстрація змін DOM'. Якщо цього не зробити, то наявність елемента в структурі документа сторінки буде перевірено тільки один раз - при завантаженні сторінки. Також потрібно враховувати, що постійне опитування DOM на наявність елемента в структурі створює додаткове навантаження на пристрій користувача, тому слід вказувати 'вузький' селектор css, який повертає в результаті пошуку не більше 1 елемента.

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

4. Форми без Ajax і які не змінюються під час відправлення

Цей спосіб найлегший у налаштуванні, але й відправки форми реєструватимуться всі - як успішні, так і ні.

2.3.1. Створюємо тригер 'Всі елементи'.

В 'Умови активації тригера' вибираємо 'Деякі кліки'. У такому разі тег на відправку форми спрацьовуватиме щоразу при натисканні на кнопку відправки.

Прив'язуємося до відповідної вбудованої змінної Click. Наприклад, 'Click Element'.

Вибираємо 'відповідає селектору CSS'. У значенні вказуємо CSS-селектор кнопки відправки форми

Після вибору оптимального способу відстеження відправки форми потрібно провести всі необхідні налаштування в Google Tag Manager. Потім опублікувати нову версію контейнера GTM і налаштувати цілі в Google Analytics на задані в тегах подій категорію / дію / ярлик / значення.