Рис. 228. Вкладка Data Layer в режиме отладки GTM
Аналогичным образом можно посмотреть значения передаваемых переменных по пользовательскому событию gtm.click.
Схожа с категорией «Клики», только в качестве отслеживаемых объектов используются формы.
Рис. 229. Встроенные переменные «Формы»
Те же самые переменные, только вместо Click -> Form, а в качестве триггера прослушивания используется «Отправка формы», а пользовательское событие называется gtm.formSubmit.
Рис. 230. Тип триггера – Отправка формы
Form Element – возвращает JS-объект для формы, которая была отправлена пользователем. Например, атрибуты class, ID, данные о родительских и дочерних элементах. Этот объект также извлекается из ключа gtm.element в dataLayer.
Form Classes – возвращает набор атрибутов class для отправленной формы. Содержится в ключе gtm.elementClasses.
Form ID – возвращает значение атрибута id для отправленной формы. Содержится в ключе gtm.elementId.
Form Target – возвращает значение атрибута target. Содержится в ключе gtm.elementTarget
Form URL – возвращает значение атрибута action для отправленной формы. Содержится в ключе gtm.elementUrl.
Данная переменная полезна, когда формам не присвоены атрибуты id и class, и они отсылаются разным обработчикам на сервере. Например, форма обратной связи может отсылать данные на /contacts.php, а форма новостной подписки на /subscribe.php.
Form Text – переменная возвращает текст, содержащийся в отправленной форме и ее потомках. Содержится в ключе gtm.elementText.
В качестве примера отправим форму на тестовом сайте graphanalytics.ru
Рис. 231. Пример отправки формы
После отправки формы отладчик Google Tag Manager зафиксировал событие gtm.formSubmit, при переходе в которое (вкладка Variables) нам станут доступны значения переменных из этой категории:
Рис. 232. Пример встроенных переменных «Формы»
● Form Element – [object HTMLFormElement],
Форму представляет объект HTMLFormElement, созданный на основе HTMLElement и наследующий его свойства, методы и события.
● Form Classes – mailchimp-subscribe
● Form ID – пустое значение, нет данных по атрибуту id у этого элемента
● Form Target – пустое значение, нет данных по атрибуту target у этого элемента
● Form Text – Принять пользовательское соглашение ОТПРАВИТЬ ЗАЯВКУ (весь собранный текст из данной формы)
● Form URL – https://graphanalytics.ru/contact/contact-first.php (обработчик, на который отправляются данные из формы)
На вкладке Data Layer можно увидеть, как переменные получают доступ к уровню данных и считывает ключи, которые задаются триггерами «Отправка формы».
Рис. 233. gtm.formSubmit в Data Layer
История
Рис. 234. Встроенные переменные «История»
История – это место, где хранится информация о том, по каким ссылкам в открытой вкладке браузера переходил посетитель. Они фиксируются, начиная с первой и заканчивая текущей. С помощью JavaScript мы можем перемещаться по данной истории и возвращаться к определенному элементу, добавлять новый элемент и изменять содержимое текущего.
Подробную информацию о добавлении и изменении записей истории можно получить в документации разработчика на сайте developer.mozilla.org.
Данная категория позволяет организовать навигацию или смоделировать поведение на сайтах, на которых контент подгружается динамически, без перезагрузки страниц (как правило, с помощью AJAX). При этом в адресной строке может меняться хэш (/#contacts, /#price, /#otzivi и т.д.).
Встроенный триггер в Google Tag Manager, который используется для прослушивания изменений в истории, называется «Изменение в истории» (событие gtm.HistoryChange).
Рис. 235. Триггер – Изменение в истории
Категория «История» в GTM состоит из 5 встроенных переменных:
New History Fragment – возвращает переменную, которая содержит новое значение хэша (#) URL-сайта после совершения пользовательского события «Изменение в истории». Содержится в ключе gtm.newUrlFragment.
Old History Fragment – обратное действие, возвращает переменную, которая содержит предыдущее значение хэша URL-сайта до совершения пользовательского события. Содержится в ключе gtm.oldUrlFragment.