Щоб відстежувати форми в диспетчері тегів Google, найкраще створити тег Прослуховування відправки форм. За умови, що події не блокуються несумісними скриптами. він буде передавати> одно gtm.formSubmit в рівень даних для подальшої обробки.
Якщо ця тема вам не знайома, то для початку почитайте про основні поняття: відстеження автоматичних подій. макроси і правила. Джастін Катрон написав відмінну статтю про відстеження автоматичних подій, в якій також висвітлені основні поняття відстеження форм.
- Створіть новий тег типу Прослуховування відправки форм.
Тут можна імпровізувати. Не обов'язково встановлювати активацію на всіх сторінках. З метою оптимізації можна задати активацію тільки на сторінках з формами.
Ще є дві функції, які можна включити або виключити:
Початок покладено. Одинокий тег Прослуховування відправки форм. чиє жалюгідне існування зведено до очікування відправки форми, готовий виконати обов'язки, покладені на нього адміном-садистом.
2. Корисні макроси
Якість його функціонування та користь Диспетчера тегів залежить від того, як ви використовуєте макроси. Ось кілька макросів, які можуть виявитися вам корисними.
Тип макросу: Мінлива автоматичного події
Тип змінної: Елемент
Опис: Фіксує об'єкти відправлених форм
Тип макросу: Мінлива автоматичного події
Тип змінної: Ідентифікатор елемента
Опис: Фіксує значення ідентифікатора елемента DOM відправленої форми.
Тип макросу: Мінлива автоматичного події
Тип змінної: URL елемента
Опис: Фіксує значення атрибута ACTION відправленої форми
Якою б не була причина, є способи вивести значення певного поля форми.
Легкий спосіб полягає в створенні макросу>. описаного в першій частині статті. Для цього необхідно, щоб поле, з якого потрібно витягти інформацію, мало унікальний ID, наприклад, .
Потім створіть новий макрос Таблиці пошуку, в якій можна повернути ID того поля, значення якого ви хочете отримати, в залежності від того, чи знаходиться користувач на певній сторінці, чи має форма певний ID тощо. Нижче приклад, в якому ідентифікатор поля залежить від ID елемента DOM-форми:
Зверніть увагу, що [0] після функцій відноситься до першого індексу масиву. Отже, якщо вас цікавить другий елемент введення, то ви вибираєте [1]. якщо третій, то [2] і так далі.
Перший елемент введення відправленої форми:
var inputField =>. getElementsByTagName ( "input") [0];
Як уособлення NAME для першого елемента вводу візьміть "myInput" ():
var inputField = document.getElementsByName ( "myInput") [0];
Як уособлення CLASS для першого елемента вводу візьміть ():
var inputField = document.getElementsByClassName ( "myInput") [0];
4. Значення (я) випадаючих списків
Щоб отримати значення, вибране в випадаючому списку SELECT, знадобиться макрос, який пройде через всі елементи OPTION в випадаючому списку, і поверне той, що був відзначений. Використовуваний макрос був представлений вище (>).
Особливість чекбоксів в тому, що найчастіше зазначених значень багато. Це означає, що якщо ви хочете відправити інформацію про обраних боксах в подія, то доведеться вдатися до способів, описаних раніше для радіокнопок (PRO-спосіб). Для вилучення значень зазначених чекбоксів використовуйте такий (і) ж скрипт (и), що і вище, тільки для доступу до чекбокси замість
А якщо ви хочете, щоб обраний чекбокс був умовою активації тега GTM, наприклад, щоб тег активувався, якщо форма включає підписку на розсилку спаму (інформації про знижки),
В крайньому випадку можна спробувати використовувати менш надійні властивості DOM-елемента, такі як previousSibling.innerText || previousSibling.textContent, щоб подивитися, який саме текст передував чекбокси (див. приклад вище, де обраний чекбокс є умовою активації тега). Не будемо заглиблюватися в подробиці, тому що цей спосіб не "чистий". Коли зв'язуєшся з таким тендітним об'єктом, як текстовий контент, завжди ризикуєш нарватися на проблеми.
7. Один елемент форми - багато форм (ASP.NET)
Через особливості платформи працювати з HTML-сторінками одне розлад, оскільки динамічно створювані сторінки здебільшого залежать від якості шаблону майстер-сторінки.
Часто буває, що вся сторінка укладена в елементі FORM. Така обгортка форми ASPX-сторінки, використовується для створення динамічного контенту, який буде повністю переданий в браузері. Але для Диспетчера це проблема. Якщо на сторінці більше однієї форми, а найчастіше так і буває, важко визначити, яка саме форма була відправлена натисканням на кнопку. Справа в тому, що gtm.formSubmit спрацьовує при відправці вмісту елемента FORM, а відправка могла бути проведена з будь-якої з численних форм на сторінці.
Обхідні шляхи - не найкращий варіант, але поки немає іншого вибору. Хотілося б мати можливість пройтися по історії макросу>. Хочеться мати доступ до всіх версій історії всіх змінних рівня даних! Але поки цей день не настав, доводиться звертатися до способів, описаних нижче.
Визначення потрібної форми за допомогою прослуховування кліків
Даний спосіб має на увазі прослуховування кліків для визначення того, яка кнопка була натиснута, а потім ці дані використовуються як правило активації блокування тега, який реагує на відправку форми. Тут використовується інформація, зібрана під час перевірки активації прослуховування в диспетчері. Gtm.click активується завжди раніше gtm.formSubmit.
У цьому прикладі дві форми на сторінці: поле пошуку по сайту з ID кнопки відправки siteSearchButton. і форма зворотного зв'язку з ID кнопки відправки contactSubmitButton.
Для початку потрібно створити власний HTML-тег, встановлений на активацію при> одно gtm.click. Так, знадобиться активне прослуховування кліків. Додайте наступний код:
І нарешті, в тезі події для відправки пошуку по сайту знадобиться вказати наступне правило:
А в тезі події для відправки форми зворотного зв'язку необхідно таке правило:
Цей спосіб працює, але в його надійності я не впевнений. Завжди існує ймовірність, що активується тільки тег gtm.click або тільки тег відправки форми (через помилки або ще чого-небудь), але поки особливих проблем з цим способом не було. Головний його недолік - він не такий "гарний". Для управління активацією головного тега потрібно проміжний, і це отстойно. Хотілося б систематизувати все, що пов'язано з подіями за допомогою тільки головних тегів, без необхідності вдаватися до допомоги допоміжних засобів.
Визначення використання потрібної форми>
Ще один спосіб, за допомогою якого вирішується проблема вмісту елемента FORM, полягає в перевірці наявності тексту в поле форми. Якщо текст є, то це та сама форма, яка була відправлена. Ви ж не будете, почавши заповнювати одну форму, раптом переходити до іншої і відправляти її порожню? (Будь ласка, скажіть немає.)
І останні два правила.
Це правило активує тег, коли в поле пошуку по сайту є текст:
Мені не дуже подобається цей спосіб, тому що важко підтримувати його актуальність і в застосуванні його не назвеш надійним.
Як висновки можна сказати, що в ASPX сторінках все ще складно отримати достовірні результати за допомогою прослуховування відправок форм GTM. На щастя, якщо можна так сказати, в роботі з ASPX сайтом обробники форм - це найменша з проблем.
8. Висновок
У цьому пості позначено кілька просунутих способів використання функції прослуховування відправок форм Діспетечера тегів Google. Останнім часом часто звучали питання про видаляння значень, тому основний фокус був зроблений на цей аспект збору даних.
Ми не занурювалися в нетрі персоналізованих оброблювачів форм, jQuery валідаторів, проблеми поширення подій і тому подібного, тому що ці проблеми дуже обмежені до певного скрипта, реалізації або сторінки. Досить сказати, що якщо ви використовуєте персоналізовані обробники відправки, наприклад, то вам доведеться попросити розробників відредагувати ці скрипти так, щоб подія відправки форми мало шанс бути почутим Диспетчером (про проблему делегування подій).
Поділіться матеріалом з друзями і колегами
127055,
вул. Смоленська,
д. 61, стр. 2 428 018,
вул. Нижегородська,
д. 6, стор. 2