Клики
Рис. 223. Встроенные переменные «Клики»
Переменные в этой категории используются для отслеживания кликов по элементам сайта. Разделить их можно на две составляющие:
? переменные, которые возвращают значения при клике по всем элементам (gtm.click);
? переменные, которые возвращают значения при клике только по ссылкам (gtm.linkClick).
Click Element – возвращает значение для того HTML-элемента, на который кликнул пользователь и который был объектом действия пользовательского события (Event – gtm.click или gtm.linkClick). Этот объект извлекается из ключа gtm.element в dataLayer.
Click Classes – возвращает строку, содержащуюся в ключе gtm.elementClasses значении атрибута className пользовательского события по которому был выполнен клик. Аналог {Click Element}}.className
Click ID – возвращает строку, содержащуюся в ключе gtm.elementId значении атрибута ID пользовательского события по которому был выполнен клик. Аналог свойства {{Click Element}}.id
Click Target – возвращает строку, содержащуюся в ключе gtm.elementTarget значении атрибута target пользовательского события по которому был выполнен клик. Аналог свойства {{Click Element}}.target
Click URL – возвращает строку, содержащуюся в ключе gtm.elementUrl значении атрибута href пользовательского события по которому был выполнен клик. Аналог свойства {{Click Element}}.href для ссылок, и {{Click Element}}.action для форм.
Click Text – возвращает строку, содержащуюся в ключе gtm.elementText значении атрибута textContent / innerText пользовательского события по которому был выполнен клик. Аналог свойства {{Click Element}}.innerText
Для прослушивания кликов в Google Tag Manager используются встроенные триггеры из раздела «Клики».
Рис. 224. Клики – Все элементы или Только ссылки
При активации триггера, запуске отладчика в Google Tag Manager и клике по любому элементу своего сайта, вы можете наблюдать такую картину (на вкладке Variables):
Рис. 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