Google Tag Manager для googлят: Руководство по управлению тегами

При активации триггера, запуске отладчика в 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

История

Рис. 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 читайте здесь.

Разберем на примере. Для демонстрации функциональности будем использовать меню тестового сайта.

Рис. 236. Пример встроенных переменных «История»

Предположим, мой начальный путь был с ссылки раздела «Стоимость». Ссылка имеет вид site.ru/#4, где #4 – хэш, так называемый «якорь», разметка блоков на веб-страницах.

Рис. 237. Ссылка с якорем (хэшем)

Далее я перехожу на раздел «Оставить заявку», ссылка которого имеет вид site.ru/#1. Как видим, произошла подмена значения в ссылке (адресной строке браузера) без перезагрузки страницы.

Рис. 238. Подмена значения в ссылке без перезагрузки страницы

Google Tag Manager зафиксировал событие, связанное с изменением истории.

Рис. 239. Пример встроенных переменных «История»

Переменные принимают соответствующие значения:

● History Source – popstate, поскольку всякий раз, когда пользователь переходит к новому состоянию, происходит событие popstate, и свойство события state содержит копию объекта записи истории.

Данное значение будет и тогда, когда мы используем переходы по кнопкам «Вперед» – «Назад» в браузере.

Рис. 240. Кнопки «Вперед-Назад» в браузере

К тому же, браузеры работают с событием popstate по-разному. Chrome и Safari всегда вызывают popstate по окончании загрузки страницы, а Firefox не делает этого.

● New History Fragment – 1, так как мы осуществили переход site.ru/#4 на site.ru/#1

● Old History Fragment – 4

● New History State и Old History State – null, пустое значение.

На вкладке Data Layer можно увидеть, как переменные получают доступ к уровню данных и считывает ключи, которые задаются триггерами «Изменение в истории».

Рис. 241. gtm.historyCHang в Data Layer

Видео

Рис. 242. Встроенные переменные «Видео»

Категория переменных, появившаяся в GTM в сентябре 2017 года. Они необходимы для отслеживания встроенных на сайт видео. Триггер в Google Tag Manager, который используется для прослушивания, называется «Видео YouTube» (событие gtm.video).

Рис. 243. Триггер – Видео YouTube

Google Tag Manager добавил 8 переменных в эту категорию:

Video Provider – возвращает значение поставщика видео. Сейчас доступен только YouTube. Содержится в ключе gtm.videoProvider.

Video Status – возвращает состояние видео в момент регистрации пользовательского события. Например, «Start» или «Pause» видео. Содержится в ключе gtm.videoStatus.

Video URL – URL-адрес, ссылка видео на YouTube. Содержится в ключе gtm.videoUrl.

Video Title – название видео. Содержится в ключе gtm.videoTitle.

Video Duration – общая продолжительность видео в секундах, выраженная целом числом. Содержится в ключе gtm.videoDuration.

Video Current Time – возвращает текущее время видео в секундах, в которое произошло пользовательское событие. Содержится в ключе gtm.videoCurrentTime.

Video Percent – возвращает значение воспроизведенного видео, выраженное в процентах целым числом (от 0 до 100), на момент, когда состоялось пользовательское событие. Содержится в ключе gtm.VideoPercent.

Video Visible – возвращает значение видимости видео в окне браузера. Если видео отображается в области просмотра, результатом будет значение true, если же в другой области (например, в нижней части страницы, на фоновой вкладке) – false. Содержится в ключе gtm.videoVisible.

Создадим триггер «Видео YouTube» и зададим ему соответствующие настройки:

Рис. 244. Настройки триггера Видео YouTube

● Начало (Start) – пользователь начинает просмотр видео;

● Завершение (Complete) – пользователь достигает конца видео;

● Приостановка (пауза), перемотка, буферизация (Pause, Seeking, Buffering) – пользователь останавливает, перематывает видео или когда происходит буферизация;

● Ход просмотра (Progress) – пользователь проходит процентный или временный порог (время измеряется в секундах). Целые положительные числа указываются через запятую.

● «Включить поддержку JavaScript API для всех видео YouTube»

Установив этот флажок, вы включите YouTube iFrame Player API. В результате ко всем URL видеопроигрывателя YouTube будет добавлен параметр enablejsapi = 1 для управления проигрывателем через iframe или JavaScript.

Примечание: если при загрузке Google Tag Manager воспроизведение ролика уже началось, оно начнется сначала.

Сохраняем изменения. Обновляем режим предварительного просмотра и переходим в отладчик Google Tag Manager. На сайте перемотаем видео чуть вперед и приостановим его на кадре:

Рис. 245. Пример видео с YouTube

В отладчике будет доступна информация по всем 8 переменным:

Рис. 246. Пример встроенных переменных «Видео»

● Video Current Time – 715 (в секундах), текущее время, в которое произошло пользовательское событие gtm.video;

● Video Duration – 3606 (в секундах), общая продолжительность видео;

● Video Percent – 20 (%, процент), процент воспроизведенного видео до момента совершения пользовательского события gtm.video;

● Video Provider – youtube, поставщик видео (пока единственный);

● Video Status – pause, так как оно приостановлено;

● Video Title – Спектакль Рикки, название видеоролика;

● Video URL – https://www.youtube.com/watch?t=1118&v=u-wkJTzEdns, ссылка на видео на YouTube;

● Video Visible – значение true, так как видео отображалось в видимой области экрана браузера.

На вкладке Data Layer можно увидеть, как переменные получают доступ к уровню данных и считывает ключи, которые задаются триггерами «Видео YouTube».

Рис. 247. gtm.video в Data Layer

Прокрутка

Рис. 248. Встроенные переменные «Прокрутка»

В октябре 2017 года в Google Tag Manager появился новый встроенный триггер – Scroll Depth, а с ним и три встроенных переменных. Триггер «Глубина прокрутки» включает базовые опции и позволяет отслеживать как вертикальную глубину скроллингу, так и горизонтальную.

Рис. 249. Триггер – Глубина прокрутки

Три переменных в GTM:

Scroll Depth Threshold – возвращает значение порога прокрутки, который был пересечен в результате пользовательского события gtm.scrollDepth. Содержится в ключе gtm.scrollThreshold.

Scroll Depth Units – переменная возвращает значение в пикселях (pixels) или процентах (percent), в зависимости от настроек триггера. Содержится в ключе gtm.scrollUnits.

Scroll Direction – переменная возвращает значение направления прокрутки (vertical или horizontal), в зависимости от настроек. Содержится в ключе gtm.scrollDirection.

Создадим триггер «Глубина прокрутки» и зададим ему соответствующие настройки (пример):

Рис. 250. Настройки триггера «Глубина прокрутки»

● Глубина вертикальной прокрутки в процентах – 10, 25, 50, 75, 90;

● Глубина горизонтальной прокрутки в пикселях – 100;

● Условия активации триггера – Все страницы.

Сохраняем изменения. Обновляем режим предварительного просмотра и переходим в отладчик Google Tag Manager. На сайте проскроллим чуть вниз страницы и увидим пользовательское событие gtm.scrollDepth:

Рис. 251. Пример встроенных переменных «Прокрутка»

● Scroll Depth Threshold – 75% (процент прокрутки), поскольку вертикальная прокрутка у нас была задана в %;

● Scroll Depth Units – percent, здесь значение может быть «вертикальный» или «горизонтальный», в зависимости от типа прокрутки, который пересек порог;

● Scroll Direction – vertical, тип/направление прокрутки.

А вот так выглядит горизонтальный скроллинг в пикселях (в нашем примере):

Рис. 252. Пример горизонтальной прокрутки

● Scroll Depth Threshold – 100;

● Scroll Depth Units – pixels;

● Scroll Direction – horizontal.

На вкладке Data Layer можно увидеть, как переменные получают доступ к уровню данных и считывает ключи, которые задаются триггерами «Глубина прокрутки».

Рис. 253. gtm.scrollDepth в Data Layer

Отслеживать прокрутку без привязки к элементам сложно. 50% глубины прокрутки для статьи длиной 1000 символов и 50% прокрутки для статьи 20000 символов не дадут никаких данных для анализа. Также триггер не позволяет отслеживать прокрутку до конкретных HTML-элементов. В таких случаях используют другой триггер, который называется «Видимость элемента».

Видимость

Рис. 254. Встроенные переменные «Видимость»

Переменные из этой категории помогают отслеживать данные о том, где посетитель остановился и сколько времени потратил на просмотр элементов на сайте – заголовков, текстовых абзацев, изображений и т.д. Функция появилась не так давно, но является очень полезной, так как теперь есть возможность точнее получить представление о том, как пользователи взаимодействуют с контентом сайта и какие элементы остаются без внимания.

Встроенный триггер – «Доступность элемента», пользовательское событие gtm.elementVisibility.

Рис. 255. Триггер – Доступность элемента

В Google Tag Manager в категории «Видимость» две переменных:

Percent Visible – возвращает числовое значение от 0 до 100, которое показывает, какой процент выбранного элемента был виден при срабатывании триггера. Содержится в ключе gtm.visibleRatio.

On-Screen Duration – возвращает числовое значение, которое показывает, как долго выбранный элемент был виден при срабатывании триггера. Содержится в ключе gtm.visibleTime.

Создадим триггер «Доступность элемента» и зададим ему соответствующие настройки (пример):

Рис. 256. Пример настройки триггера «Доступность элемента»

Какие-либо настройки триггеров в этой статье целенаправленно опускаются, поскольку более подробно о триггерах будет говориться в далее. Стоит отметить, что в данном примере был выбран элемент (кнопка «Записаться на бесплатное занятие»), при прокрутке которого активировалось пользовательское событие gtm.elementVisibility.

Рис. 257. Кнопка «Записаться на бесплатное занятие» как условие активации события

● Метод выбора – Селектор CSS;

● Селектор элементов – body > section.block-cont.block-cont1.g-wrap > div.cont-child_like.wrap > div.child_like – text > a ;

● Правило запуска этого триггера – Один раз на страницу;

● Минимальное время видимости (в миллисекундах) – 3000 (как долго выбранный элемент должен быть виден на экране для срабатывания триггера);

● Условия активации триггера – Все события типа «Доступность».

Сохраняем изменения. Обновляем режим предварительного просмотра и переходим в отладчик Google Tag Manager. На сайте мы проскроллили до данной кнопки и через минимальное время видимости элемента произошла фиксация события gtm.elementVisibility.

Рис. 258. Пример встроенных переменных «Видимость»

● On-Screen Duration – 3000 (в миллисекундах), как долго выбранный элемент был виден при срабатывании триггера;

● Percent Visible – 100 (в процентах), видимость элемента. В нашем примере он был виден на все 100%.

На вкладке Data Layer можно увидеть, как переменные получают доступ к уровню данных и считывает ключи, которые задаются триггерами «Доступность элемента».

Рис. 259. gtm.elementVisibility в Data Layer

Все вышеупомянутые встроенные переменные используются для веб-контейнеров, однако еще есть большая часть переменных для контейнеров AMP, iOS, Android, и устаревших мобильных контейнеров, использующих контейнеры и SDK ниже версии 5. Их разбор вынужденно опускается в силу узкой тематики. Подробнее обо всех остальных встроенных переменных Google Tag Manager читайте в официальной справке Google.

Пользовательские переменные

Для создания переменной перейдем в «Переменные» и нажмем кнопку «Создать».

Рис. 260. Создание пользовательской переменной

При создании переменной необходимо указать ее имя. Далее нам доступно на выбор 5 категорий пользовательских переменных:

1. Навигация

2. Переменные страницы

3. Элементы страницы

4. Утилиты

5. Данные контейнера

Навигация

Рис. 261. Пользовательские переменные «Навигация»

С помощью переменных этой категории можно отслеживать с какой страницы к вам пришел пользователь. Или если он перемещается внутри сайта, от страницы к странице, на каждой следующей странице доступна информация о предыдущей странице пользователя.

Доступно две пользовательских переменных:

1. Источник ссылки HTTP – значение извлекается из document.referrer. Аналог встроенной переменной (Referrer);

У данной переменной есть несколько типов компонентов: полный URL, протокол, имя хоста, порт, путь, запрос и фрагмент.