1. вбудований тригер
2. вбудований тригер
3. Повідомлення про успіх
4. Прослуховування AJAX запиту
5. Підміна функції-обробника
6. посилання

Відстеження заявок - одна з тих завдань, завдяки яким веб-аналітика взагалі існує. Інакше ж і не зрозуміти, що реклама працює. А як відомо, без Adwords не було б Analytics.

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

Експерименту заради я додав в цей пост інтерактивності: на сторінці варто окремий контейнер GTM, всі форми обробляються описаними способами, результат видно, якщо натиснути F12 в Chrome, далі вкладка Network і фільтр по слову collect.

ось вивантаження контейнера , Яку можна поставити до себе і підключити через Injector . Коротше, все до послуг читача, розважайся, дорогий гість!

Тонкощі настройки аналітики в Telegram каналі Підписатися на @burgerdata

вбудований тригер

Перше, що варто спробувати - вбудований спосіб відстеження. З мого досвіду він спрацьовує досить рідко, але все ж таки.

Цей тригер прослуховує submit форм і при настанні оних передає в dataLayer подія gtm.formSubmit. За виконання сабмита можна, наприклад, відправити подія в Google Analytics .
Розберемо жодних певних установок тригера:

• Чекати теги - параметр буде корисний, якщо читач забажає до відправки форми підв'язати повідомлення CPA-мереж або що ще гірше, але перестаратися з ним звичайно не варто.

• Перевірка помилок перешкодить спрацьовування, якщо при відправці форми сторінка не перезавантажується, що трапляється досить часто, тому я залишив її виключеною. Детальніше

• Умови активації потрібні, щоб читач вказав, яка саме форма його цікавить.

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

вбудований тригер

ТЗ для розробників

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

"Нехай цей криворукий рукожоп сам колупається" - думає читач і направляє розробнику ТЗ з вимогою при відправці форми виконувати приблизно наступний javascript код:

1 2 3 4 5 6 7 8 9 10 11 12 13 dataLayer .push ({ 'event': 'form__tz', 'details': {// ідентифікатор форми 'formID': formID, // залишений контакт 'contact': contact }, 'eventCallback': function () {// обробник форми onFormSubmit ()}})

В даному випадку тег з відправкою в Google Analytics потрібно прив'язати на призначене для користувача подія form__tz. Розбираємо написане:

• details пропонує розробнику покласти туди деяку інформацію про форму, яку можна дістати через Зміну рівня даних другої версії. Для ідентифікатора - details.formID, а ось контакти по законам Google не можна передавати в Analytics , Але можна в Spreadsheets або в Telegram

• eventCallback аналогічний властивості Чекати теги. Він потрібен, щоб помістити туди обробник форми, який відправить заявку в CRM або на пошту, але станеться це тільки після всього іншого, що зав'язано на відправлене подія form__tz. Використання не обов'язково.

перевіряємо:

Ми обговоримо вашу кандидатуру і обов'язково передзвонимо.

Повідомлення про успіх

Ще один досить простий спосіб - зав'язатися на повідомлення про успішну відправку форми. Це може бути сторінка (устар. Варіанти - Success Page, Thank you page або взагалі TYP), на яку користувача перекидають після успішного відправлення, типу ../success.php або як у Бітрікс ../?WEB_FORM_ID=123&RESULT_ID= .. В такому випадку тригер зав'язується на відвідування цієї сторінки, або ж вона відразу вказується у назві місії в Google Analytics.

Мінус в тому, що користувач може відвідати цю сторінку не тільки після відправлення заявки, але і повернутися до неї у вкладці, додати в обране, скористатися підказкою браузера, дати посилання комусь або взагалі запостити її для всіх. Очевидно, в цьому випадку читач буде отримувати некоректні спрацьовування.

Повідомлення про успішну відправку, однак, може з'являтися і у вигляді модального вікна без будь-яких перезавантажень. В цьому випадку допоможе вбудований тригер типу Доступність елементу, який спрацює при появі повідомлення, і відправить в dataLayer подія gtm.elementVisibility.

Тригер чудовий, вирішує безліч завдань, особливо в обтяжених React'ом веб-додатках, але пробіжить по потрібним властивостями:

• Метод вибору і Ідентифікатор елемента допоможуть вказати на конкретний елемент, чия поява нас цікавить

• Правило запуску цього тригера визначається завданням читача. Якщо на сторінці кілька форм (стандартна + коллбек), за якими спливає одне і те ж повідомлення, то добре б поставити як на картинці.

• Реєстрація змін DOM допоможе, якщо спочатку елемента в структурі документа не було, і він вбудовується в процесі. Детальніше

  React та інші хіпстерскіе технології оперують з віртуальним DOM і Рендер його за запитом, тому структура може легко змінюватися в процесі без особливих зусиль з боку браузера.

• Умови активації пропонують вказати потрібну сторінку, і не навантажувати клієнтський ЕОМ непотрібними операціями. У моєму випадку контейнер коштує тільки на одній сторінці, так що мені необов'язково.

Чи не квапте мене, я ж сказала, що ми вам обов'язково зателефонуємо!

Прослуховування AJAX запиту

Трапляється, що ви сабміта-сабміта форму, а стандартний тригер не працює і в dataLayer нічого не відправляється. Цілком можливо, що розробник перервав спливання події , Додавши stopPropagation () або return false в обробнику submit. Можна поскаржитися розробнику і попросити прибрати, а можна вклинитися в процес обробки заявки і перехопити її на наступному етапі подорожі - при відправці в CRM. Для цього доведеться перевизначити метод send, який використовується для відправки запиту, але робити це потрібно з великою обережністю! Створюємо тег типу користувача HTML з кодом нижче, в тригері перегляд сторінки з формою.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script> (function (open) {XMLHttpRequest .prototype .open = function (method, url) {this .responseURL = url; // поліфілл через IE this .addEventListener ( 'load', function () {if (~ this .responseURL .indexOf ( "/ blog / priemy-raboty-v-bigquery /")) {dataLayer .push ({ 'event': 'form__ajax', 'details': {// ...}})}}) return open .apply (this, arguments)};}) (XMLHttpRequest .prototype .open); </ Script>

Дізнатися, куди йде запит з потрібної форми, можна за допомогою console.log (this.responseURL), і цей url потім зафільтрованних. У прикладі я відправляю дані форми за допомогою FormData ().

Підміна функції-обробника

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

Або через Search all files по id \ класу \ імені. Форму в цьому розділі обробляє функція process (). Робимо тег типу користувача HTML з кодом нижче, в тригері Модель DOM готова на сторінки сторінки з формою.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script> // збереження старої функції var _old_process = process; // визначення нової process = function (form) {dataLayer .push ({ 'event': 'form__rewrite', 'details': { 'contact': form .querySelector ( 'input [placeholder = Контакт]'). Value, ' formID ': form .id}}) // виклик старій з тими ж параметрами _old_process .apply (window, arguments); } </ Script>

В даному прикладі спосіб здається дуже простим, на практиці ж форма може передаватися спершу в валідатор, звідти ще в функцію, заховану всередину jQuery, куди читач ніяк не потрапить. Проте перевіряємо:

посилання

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