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

Рис. 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 (т. е. {‘k.e.y’: ‘value’}).

● Версия 2 – интерпретирует точки, как иерархию. Например, dataLayer.push({‘k.e.y’: ‘value’}) будет интерпретировано три уровня: {k: {e: {y: ‘value’}}}.

● Переменная JavaScript

Рис. 270. Пользовательская переменная JavaScript

Принимает значение переменной JavaScript, имя которой указано в поле «Имя глобальной переменной». Если такой переменной не существует, вернется значение undefined.

Например, у вас на сайте в коде страницы объявлена глобальная переменная:

var namePeremen = 5

Рис. 271. Переменная namePeremen объявлена в коде сайта

В этом случае переменная JavaScript вернет значение глобальной переменной, что объявлена на странице, то есть 5 (и тип «number», «string» и т.д.):

Рис. 272. Пример пользовательской переменной JavaScript

● Собственный код JavaScript

Пользовательские JavaScript переменная является наиболее универсальным переменной в наборе. Вы можете использовать ее для запуска произвольного JavaScript на странице. Он создает контекст сценария, то есть вы также можете вызывать другие переменные изнутри, используя соответствующий синтаксис.

Значение этой переменной вычисляется в браузере с помощью заданной функции JavaScript. Функция вызывается при каждом использовании переменной, возвращая ее значение.

Пользовательская переменная JavaScript должна следовать нескольким правилам:

1. скрипт должен быть размещен в функциональном блоке function() { … })

2. функция должна иметь оператор return

3. функция должна возвращать только значение.

Если явного значения нет, функция возвращает неопределенное значение. Это может привести к нарушению нормальной работы контейнера.

Рис. 273. Пример собственного кода JavaScript

В отладчике Google Tag Manager:

Рис. 274. Пример пользовательской переменной «Собственный код JavaScript»

Вы можете вернуть любую переменную или значение, даже другие функции, другие переменные GTM или ничего (return без возврата -> undefined, неопределенное значение).

Рис. 275. Пример без возврата (неопределенное значение), return

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

Рис. 276. Пользовательские переменные «Элементы страницы»

Следующая категория в Google Tag Manager состоит из 3 пользовательских переменных:

● Видимость элемента – позволяет вам определить какой конкретный элемент был виден в браузере пользователя. Используется с триггером «Доступность элемента».

Значение зависит от видимости указанного элемента DOM. В качестве примера зададим селектор элемента кнопки на сайте:

Рис. 277. Селектор элемента кнопки на сайте

Тип результата «истина/ложь» (true/false) и минимальный процент видимости:

Рис. 278. Настройки в переменной «Видимость элемента»

В отладчике Google Tag Manager будет доступен следующий результат:

Рис. 279. Пример пользовательской переменной «Видимость элемента»

В случае видимости элемента в браузере при минимальном проценте видимости – true, в случае если элемент не был в поле зрения пользователя и не удовлетворяет проценту видимости – false.

● Переменная автоматического события (Auto-Event Variable)

Переменная автоматического события используется для доступа к целевому элементу действия пользовательского события (клики, ошибки, отправки формы и т.д.). Когда вы создаете новую переменную Auto-Event, вам нужно указать только тот компонент целевого элемента, к которому вы хотите получить доступ.

Рис. 280. Переменная автоматического события

Часть типов переменной совпадает со встроенными переменными (см. выше):

● Элемент = Click Element и Form Element;

● Классы элемента = Click Class и Form Class;

● Идентификатор элемента = Click ID и Form ID;

● Цель элемента = Click Target и Form Target;

● Текст элемента = Click Text и Form Text;

● URL элемента = Click URL и Form URL;

● Новый фрагмент URL истории = New History Fragment;

● Старый фрагмент URL истории = Old History Fragment;

● Новый статус истории = New History State;

● Старый статус истории = Old History State;

● Источник изменения истории = History Source.

Переменная автоматического события возвращает значение, соответствующее типу выбранного элемента. Если соответствующее автоматическое событие не было зарегистрировано, переменная возвращает значение по умолчанию (если установлено) или undefined.

● Элемент DOM

Вы можете использовать переменную для получения текстового содержимого любого элемента DOM или для извлечения значения любого атрибута элемента DOM.

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

Рис. 281. Пример извлечения текстового содержимого элемента кнопки

Полный CSS-селектор у кнопки через Copy selector в браузере – #home > div > div > div > div > div > a.button.hp-button-1.slide-button.w-button.scrollingto.blue

Рис. 282. Copy selector

Создадим пользовательскую переменную в Google Tag Manager:

Рис. 283. Пример пользовательской переменной «Элемент DOM»

Примечание: в данном примере CSS-селектор очень длинный и его можно сократить. Однако цель примера не в этом, так что оставим полный селектор, скопированный из консоли разработчика.

Если задано имя атрибута, переменной будет присвоено значение атрибута элемента DOM, в противном случае в качестве значения будет использоваться текст элемента DOM. В отладчике GTM:

Рис. 284. Отображение значения кнопки в переменной «Элемент DOM»

Если элемент DOM с указанным идентификатором или CSS-селектором не найден, переменная возвращает нулевое значение (null).

Утилиты

Рис. 285. Пользовательские переменные «Утилиты»

Константа. Постоянная переменная является наглядным примером того, как переменные могут быть использованы повторно. Константа будет постоянно принимать значение из поля «Значение»:

Рис. 286. Переменная «Константа»

Чаще всего этот тип переменной используется для указания идентификатора отслеживания Google Analytics. Сохранив константу UA один раз, вам не нужно создавать его (идентификатор) каждый раз, когда вы создаете новый тег GA.

Название среды. Аналог встроенной переменной Environment Name, которая возвращает название пользовательской среды.

Рис. 287. Переменная «Название среды»

Настройки Google Analytics. Переменная возвращает набор параметров тега Universal Analytics. Используется ТОЛЬКО в теге Universal Analytics и для одновременной настройки нескольких тегов, например, для объединения своих пользовательских параметров (custom dimension) и полей.

Рис. 288. cookieDomain “auto”

Домен cookie. По умолчанию стоит auto, также, как и при отслеживании в Google Analytics, для поля cookieDomain значение auto.

Рис. 289. Код из Google Analytics

При автоматической auto конфигурации домена cookieDomain библиотека analyltics.js самостоятельно подбирает домен для хранения файлов cookie.

Дополнительные настройки:

● Поля, которые необходимо задать – доступен раскрывающийся список с доступными полями;

Рис. 290. Поля, которые необходимо задать

● Специальные параметры;

● Специальные показатели;

● Группы контента;

● Реклама – Включить функции для контекстно-медийной сети;

● Электронная торговля – Включить расширенные функции электронной торговли;

● Междоменное отслеживание;

● Расширенная конфигурация, в которой можно задать глобальную функцию, использовать отладочную версию и улучшенную атрибуцию ссылок.

Пользовательское событие

Рис. 291. Пользовательское событие

Принимает значение, равное текущему значению переменной _event. Аналог встроенной переменной Event (Утилиты).

Рис. 292. Пример пользовательского события gtm.click

Случайное число

Рис. 293. Переменная «Случайное число»

Переменная возвращает случайное число в диапазоне от 0 до 2147483647. Аналог встроенной переменной Random Number.

Таблица поиска. Тип переменной, который позволяет избежать конструкции if..else и switch-case.

Рис. 294. Таблица поиска

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

Как работает таблица поиска?

1. Задается входная переменная. Например, {{Click Element}};

2. Далее идет проверка по таблице поиска и входным данным;

3. Если переменная {{Click Element}} принимает одно из значений из таблицы, то входная переменная {{Click Element}} примет значение из поля «Результат»;

4. Если значение переменной {{Click Element}} не найдено среди таблицы поиска, то будет использовано значение по умолчанию (если указано в настройках).

Если вы не укажете значение по умолчанию, переменная вернет неопределенное значение undefined в случае, если совпадение не будет выполнено.

Таблица регулярных выражений

Рис. 295. Таблица регулярных выражений

Тип переменной, который похож на «Таблица поиска», только более гибкий, поскольку здесь можно использовать регулярные выражения.

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

Рис. 296. Пользовательские переменные «Данные контейнера»

Три переменные из этой категории:

● Идентификатор контейнера – возвращает номер контейнера GTM. Например, GTM-NC2LK3M. Аналог встроенной переменной Container ID.

Рис. 297. Переменная «Идентификатор контейнера»

● Номер версии контейнера – возвращает версию контейнера. Например, 5. Аналог встроенной переменной Container Version.

Рис. 298. Переменная «Номер версии контейнера»

Значение «QUICK_PREVIEW» возвращается в том случае, если вы просматриваете в режиме предварительного просмотра.

Рис. 299. QUICK_PREVIEW

Режим отладки – возвращает значение true, если пользователь просматривает контейнер в режиме предварительного просмотра, и false – если нет. Аналог встроенной переменной Debug Mode.

Рис. 300. Режим отладки

С помощью этой переменной можно собрать все ваши хиты в отдельное тестовое свойство, а значение параметра «Режим отладки» в качестве пользовательского параметра, чтобы в Google Analytics создать под него отдельное представление и исключить режим отладки из статистики, отфильтровав его.

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

Рис. 301. Действия над переменными

В «Просмотреть изменения» можно узнать, что конкретно было изменено в переменной по сравнению с предыдущей версией, а в «Показать примечания» есть возможность заносить какие-то пометки, добавить описание по функциональности и т.д.

Уровень данных

Уровень данных – это объект (массив объектов) или переменная JavaScript, которая хранит и передает информацию с вашего сайта в Google Tag Manager. Затем эти данные могут передаваться и другим сервисам, например, в Google Analytics, Facebook, Criteo OneTag и др.

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

Рис. 302. Пример dataLayer

Очень часто уровень данных и dataLayer используют как синонимы. Это не так, поскольку уровень данных – это сам объект, с которым мы работаем и благодаря которому мы передаем данные в GTM, а dataLayer – всего лишь имя данного объекта. Оно в Google Tag Manager стандартное по умолчанию. Убедиться можно в этом перейдя в код контейнера:

Рис. 303. Фрагмент кода контейнера GTM

Мы можем изменить данное имя и тогда будет использоваться не dataLayer, а то, которое захотим, например, такое:

Рис. 304. Пример изменения уровня данных в коде сайта

Впоследствии все обращения к уровню данных мы должны выполнять, используя новое имя. Для того чтобы информация через уровень данных попадала в Google Tag Manager, необходимо использовать специальную конструкцию, которая задается по определенным правилам.

Все значения, которые используются в уровне данных GTM, состоят из пары ‘ключ’:’значение’. Имя ключа и значения заключаются в одинарные кавычки, между собой они разделяются двоеточием. Например:

dataLayer = [{'ключ1': 'значение1'}];

Если мы используем несколько пар ‘ключ’:’значение’, то такие пары между собой разделяются запятыми. Все пары заключаются в фигурные скобки. Например:

dataLayer = [{'ключ1': 'значение1','ключ2': 'значение2'}];

Переменная dataLayer должна быть объявлена между тегами . Существует несколько вариантов того, когда, каким образом и в каком месте должен быть описан уровень данных.

● описание ДО кода контейнера GTM. Конструкция ДО контейнера GTM выглядит так:

К тому моменту, когда зафиксируется первое стандартное событие «Просмотр страницы» (Page View), информация, которую мы передали с помощью данной конструкции, уже будет присутствовать в Google Tag Manager и мы с ней сможем работать.

В режиме предварительного просмотра это будет выглядеть так:

Рис. 305. Пример описания ДО кода контейнера GTM

Для отслеживания различных действий пользователя в GTM предусмотрена специальная переменная event. Event можно использовать внутри обработчика того или иного события. Наличие ключа event сообщает GTM, что нужно что-то сделать. Далее он действует в зависимости от содержания event, в данном случае выводит значение «ДО GTM». Если event отсутствует или не задано, то в режиме отладки мы увидим слово «Message» и надпись: