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

l:href="#_255.png"/>

Рис. 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, протокол, имя хоста, порт, путь, запрос и фрагмент.

Рис. 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.

Примечание: переменные уровня данных назначаются для страниц, а не для сеансов.

Для простых значений (строки, числа, булевы, функции) переменная будет возвращать все, что было недавно передано в ключ. Для объектов и массивов переменная возвращает результат рекурсивного слияния, где заменяются только общие ключи.

Вы можете использовать точечную нотацию для доступа к переменным ключам Data Layer, которые имеют точку в имени (например, gtm.element) или для доступа к свойствам объектов DOM (например, gtm.element.dataset.name).

Рис. 269. Пример точечной нотации

Если вы не указали значение по умолчанию, переменная Data Layer вернет undefined. При задании настроек переменной существует выбор версии:

● Версия 1 – разрешает использовать точки в названии. Например, dataLayer.push(‘k.e.y’: ‘value’) ключ будет интерпретироваться как k.e.y (т.