Рис. 225. Пример встроенных переменных «Клики»
Данный клик был осуществлен по кнопке «СКАЧАТЬ», которая имеет ссылку для скачивания электронной книги на сайте graphanalytics.ru.
Рис. 226. Клик по кнопке «Скачать»
Открыв консоль разработчика (в Google Chrome F12) и подсветив нужный фрагмент кода, мы увидим, что у данного элемента присутствуют всего два атрибута – href и class.
Рис. 227. Атрибуты href и class
Переменные в данном конкретном примере вернули значения:
● _event (пользовательское событие) – gtm.linkClick, так как клик был осуществлен по ссылке;
● Click Element – https://graphanalytics.ru/Google_Analytics_dlya_googlyat_2018.pdf
● Click Classes – button hp-button-1 slide-button w-button green (класс кнопки)
● Click ID – пустое значение, нет данных по атрибуту id у этого элемента
● Click Target – пустое значение, нет данных по атрибуту target у этого элемента
● Click URL – https://graphanalytics.ru/Google_Analytics_dlya_googlyat_2018.pdf
● Click Text – СКАЧАТЬ
На вкладке Data Layer можно увидеть, как переменные получают доступ к уровню данных и считывают ключи, которые задаются триггерами «Все элементы» и «Только ссылки».
Рис. 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.
New History State – возвращает объект, содержащий новое состояние истории после того, как произошло событие и метод history.pushState() был выполнен. Содержится в ключе gtm.newHistoryState.
Old History State – возвращает объект, содержащий старое состояние истории перед тем, как произошло событие и метод history.pushState() был выполнен. Содержится в ключе gtm.oldHistoryState.
History Source – возвращает строку-событие, которое привело к изменению объекта истории. Например, pushState или popstate.
Подробнее о методе pushState читайте здесь.
Разберем на примере. Для демонстрации функциональности будем использовать меню тестового сайта.