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

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

Відправлення форми – один із основних способів отримання лідів на сайті. Найпростіший спосіб отримати більше інформації про це – передавати дані про заповнену форму в Google Analytics.

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

Алгоритм наступний: спочатку пробуєте метод із цієї статті, якщо не працює – зі статті вище. У планах також написати статтю щодо відстеження відправки форми за допомогою типу тригера Видимість елемента.

  1. Знайомство з тригером типу Відправлення форми
  2. Вбудовані змінні категорії Форми
  3. Практична настройка тригера та тега для передачі даних у Google Analytics

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

  • Не відбувається подія submit . Тут все просто, тригер відправки форми очікує подію submit у браузері. Якщо вона не відправляється – ваше відстеження працювати не буде. Часто така ситуація спостерігається при використанні запитів користувача для відправлення даних форм, наприклад ajax.
  • Подія submit відбувається, але щось заважає піднятися на рівень document. Пов’язано це з тим, що диспетчер тегів не прикріплює обробник події до кожного елемента на сторінці, а очікує інформацію про нього на верхньому рівні – вузлі document. Основною причиною помилки є ситуація, коли розповсюдження події зупиняє обробник jQuery, який повертає значення false.

Якщо ваша форма підпадає під одну з цих умов, ви можете обговорити зміни з розробником або скористатися способом з першої статті.

Знайомство з тригером типу Відправлення форми

Налаштування тригера типу Надсилання форми дуже сильно нагадує роботу з тригером Тільки посилання . Тут також є параметри Очікувати на теги і Перевірка помилок, які виконують майже такі ж функції.Налаштування тригера типу Відправлення форми до GTM

  • Очікувати теги – параметр дозволяє призупинити відправлення форми до тих пір, поки всі теги, що використовують тригер, спрацюють або поки не закінчиться час очікування (за замовчуванням 2000 мілісекунд)
  • Перевірка помилок – встановлення прапорця дозволяє не запускати тригер, якщо дія форми за замовчуванням (надсилання та перенаправлення) заборонена.
  • Активувати тригер при настанні події та виконанні всіх цих умов – з’являється лише коли один із параметрів Очікувати теги або Перевірка помилок активовано. Дозволяє задати умови, за яких тригер відправлення форми запускатиметься. Не плутайте з параметром Умови активації тригера , який відповідає за активацію тега.

На практиці, якщо немає особливої потреби у зв’язку з появою помилок на сайті, більшість цих параметрів не використовується. Основні умови задаються у параметрі Умови активації тригера.

Вбудовані змінні категорії Форми

Мені завжди було незрозуміло, навіщо Google Tag Manager існує категорія вбудованих змінних Forms (Форми). Дані цих змінних ідентичні даним у змінних категорії Clicks (Кліки).Ідентичні дані зі змінних категорії Clicks та категорії Forms у GTM

  • 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):Ідентифікатор форми у тезі form у вихідному коді сторінки

Далі скопіюйте значення id. У моєму випадку це searchform. Тепер перейдіть до диспетчера тегів і створіть новий тригер типу Відправлення форми. У параметрі Умова активації тригеру оберіть зміннуClick IDі вставте скопійоване значення в потрібне поле.Налаштування тригера Відправлення форми за наявності ідентифікатора форми

Якщо все зроблено правильно, то в попередньому перегляді при відправці події ви побачите, що тригер спрацював:Перевірка коректності спрацьовування тригера Form Submission у відладчику GTM

Для передачі події в Google Analytics залишилося налаштувати тег. Приклад нижче:Налаштування тега для надсилання даних у Google Analytics

Налаштування тригера за допомогою CSS селектора

У випадках, коли немає ідентифікатора форми, вам на допомогу прийдуть CSS селектори. Щоб отримати селектор потрібного елемента, клацніть за його кодом правою кнопкою миші та виберіть Copy> Copy selector:Отримання css селектора потрібного елемента

Тепер при створенні тригера у параметрі Умови активації тригера необхідно вибрати змінну Click Element , а умова перевірки Відповідає селектору CSS. Востаннє вставте скопійоване значення:Налаштування тригера Form Submission за допомогою CSS селектора

Налаштування тега для надсилання даних аналогічне пункту вище.

Замість висновку

Відстеження відправки форми за допомогою базового тригера є простим, але не дієвим методом. Якщо вам пощастило, ваш алгоритм буде наступним:

  1. Визначити унікальний ідентифікатор чи CSS селектор форми;
  2. Налаштувати тригер типу Надсилання форми з відповідною умовою;
  3. Налаштувати тег для передачі даних у Google Analytics;
  4. Налаштувати ціль у Google Analytics (опціонально).

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