Отслеживать прокрутку без привязки к элементам сложно. 50% глубины прокрутки для статьи длиной 1000 символов и 50% прокрутки для статьи 20000 символов не дадут никаких данных для анализа. Также триггер не позволяет отслеживать прокрутку до конкретных HTML-элементов. В таких случаях используют другой триггер, который называется «Видимость элемента».
Видимость
Рис. 254. Встроенные переменные «Видимость»
Переменные из этой категории помогают отслеживать данные о том, где посетитель остановился и сколько времени потратил на просмотр элементов на сайте – заголовков, текстовых абзацев, изображений и т.д. Функция появилась не так давно, но является очень полезной, так как теперь есть возможность точнее получить представление о том, как пользователи взаимодействуют с контентом сайта и какие элементы остаются без внимания.
Встроенный триггер – «Доступность элемента», пользовательское событие gtm.elementVisibility.
Рис. 255. Триггер – Доступность элемента
В Google Tag Manager в категории «Видимость» две переменных:
Percent Visible – возвращает числовое значение от до 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, протокол, имя хоста, порт, путь, запрос и фрагмент.
Рис. 262. Типы компонента «Источник ссылки HTTP»
Разберем все типы на примере:
Рис. 263. Типы компонента на примере
Полный URL-адрес – возвращает полный URL-адрес без фрагмента хеширования (#). Например, https://osipenkov.ru/index.html?page=1
Протокол – возвращает протокол URL. Например, https
Имя хоста – возвращает имя хоста URL-адреса без номера порта. Например, osipenkov.ru или с www
Порт – возвращает номер порта, используемый в URL-адресе, или «80» для HTTP / или «443» для HTTPS, если URL-адрес не имеет номера порта. На примере выше число «443» вставлено лишь с целью демонстрации
Путь – возвращает только путь в URL. Например, index.html
Запрос – возвращает всю строку параметров запроса (без указания «?») при условии, что вы не укажете ключ запроса. Если вы укажете ключ запроса, возвращается только значение этого ключа или не определено, если в URL-адресе такого ключа нет. Если помните настройку представления в Google Analytics под названием «Отслеживание поиска по сайту», то разобраться в типе компонента «запрос» не составит проблем
Фрагмент – возвращает значение фрагмента URL-адреса без ведущего «#». Например, hash
Вы можете создать триггер, который запускается, когда «Источник ссылки HTTP» не содержит ваш собственный домен. Таким образом можно отслеживать пользователей, перешедших на сайт извне, а не переходящих по страницам на сайте.
2. URL – универсальная переменная, которая может быть использована для доступа к компонентам текущей URL-страницы (по умолчанию) или любого URL-адреса, возвращаемой переменной. Аналог встроенных переменных Page URL, Page Hostname, Page Path.
Рис. 264. Пользовательская переменная URL
Доступны те же типы компонентов, что и у «Источник ссылки HTTP».
Переменные страницы
Рис. 265. Пользовательские переменные «Переменные страницы»
4 переменных:
● основной файл cookie (1st Party Cookie) – возвращает значение cookie, которое доступно для текущего сайта;
Рис. 266. Основной файл cookie
В качестве названия cookie можно задать _ga для различия пользователей. Таким образом при просмотре страницы сайта в отладчике Google Tag Manager будет доступно значение cookie пользователя:
Рис. 267. Пример пользовательской переменной «Основной файл cookie»
URI-декодирование файла cookie. Приятной особенностью файлов cookie является то, что почти каждый браузер, поддерживающий JavaScript, обеспечивает и доступ сценариев к строкам cookie. Строки cookie представляются свойством cookie объекта Document. Это свойство доступно как для чтения, так и для записи. Когда вы присваиваете строку свойству document.cookie, браузер анализирует ее как строку файла cookie и добавляет ее в список строк cookie.
document.cookie = "username=yakov; expires=Friday, 01-Dec-2017 08:00:00 GMT; path=/home";
Довольно часто значения полей cookie шифруются, что может оказаться проблемой при вставке их в строку cookie. Данная функция выполняет URL-кодирование и декодирование строк, которые передаются им в качестве аргументов, возвращая соответствующий результат.
Если cookie возвращает значение undefined, то она не определена. Подробнее о куки, document.cookie читайте в этой статье.
● Переменная уровня данных
Один из наиболее часто используемых типов в GTM. Когда вы используете уровень данных (Data Layer), вы передаете пару key:value с помощью конструкции:
dataLayer.push({'var': 'value'});
Рис. 268. Переменная уровня данных
Чтобы данные стали доступны в Google Tag Manager создается пользовательская переменная типа «Переменная уровня данных», и в поле «Имя переменной уровня данных» указывается key.
Примечание: переменные уровня данных назначаются для страниц, а не для