Выбрать главу

Рис. 220. Обновление режима предварительного просмотра

В отладчике GTM будет доступна следующая информация:

Рис. 221. Пример встроенных переменных «Ошибки»

Debug Mode – true, так как у нас активирован режим отладки;

Error Line – 801 строка;

Error Message – сообщение об ошибке;

Error URL – URL-адрес скрипта, в котором обнаружена ошибка.

В случае, если мы в JavaScript используем конструкцию "try..catch", то Google Tag Manager не зафиксирует ошибку. Конструкция выглядит следующим образом:

Рис. 222. Конструкция "try..catch"

Работает она так:

1. Выполняется код внутри блока try.

2. Если в нем ошибок нет, то блок catch(err) игнорируется, то есть выполнение доходит до конца try и потом прыгает через catch.

3. Если в нем возникнет ошибка, то выполнение try на ней прерывается, и управление прыгает в начало блока catch(err).

При этом переменная err (можно выбрать и другое название) будет содержать объект ошибки с подробной информацией о произошедшем. Таким образом, при ошибке в try скрипт не «падает», и мы получаем возможность обработать ошибку внутри catch.

Подробнее про try..catch читайте в справочниках по JavaScript или в этой статье.

Клики

Рис. 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 можно увидеть, как переменные получают доступ к уровню данных и считывают ключи, которые задаются триггерами «Все элементы» и «Только ссылки».