Яков Осипенков
Google Tag Manager для googлят: Руководство по управлению тегами
Папки
Еще один способ организации элементов внутри контейнера Google Tag Manager – это папки.
Со временем в Google Tag Manager накапливается большое количество тегов, триггеров и переменных. У нас есть возможность каждый объект в контейнере отнести к какой-то своей логической сущности. Иными словами, сгруппировать их таким образом, чтобы в дальнейшем было проще работать. А помогут нам в этой систематизации папки.
Группировать создаваемые внутри контейнера GTM элементы можно по-разному. Например:
● по инструментам (отдельно завести папку для Google AdWords, отдельно для Google Analytics и т.д.);
● по типу решаемой задачи (отслеживание определенного события или группы событий);
● по типу выполняемой работы (отдельно завести папку для специалиста по контекстной рекламе, отдельно для человека, который занимается SEO, отдельно для веб-аналитика и т.д.);
● по проектам (для каждого микросайта или рекламной кампании);
● по подрядчикам (отдельно для агентства такого-то, организации такой-то и т.д.);
● как-то иначе.
Чтобы создать новую папку, перейдите в раздел «Папки» и выберите «Новая папка».
Рис. 196. Создание новой папки
Укажите ее название (например, «Папка Google Analytics») и нажмите «Создать». Имена папок следует задавать таким образом, чтобы из названия сразу было понятно, что находится в ней или к какой сущности принадлежат внутренние элементы.
Рис. 197. Название папки
Папка создана и теперь может быть использована для группировки различных объектов контейнера GTM. Перенесем в нее элементы, относящиеся к Google Analytics. В нашем примере это переменная GA ID (идентификатор счетчика Google Analytics) и сам тег Universal Analytics.
Ставим галочки напротив этих объектов и вверху выбираем «Переместить – Папка Google Analytics».
Рис. 198. Перемещение элементов в папку
После загрузки GTM выбранные элементы будут добавлены в папку.
Рис. 199. Элементы в папке
Если нам необходимо исключить какой-либо объект из папки, то выбираем данный элемент и вверху таблицы выбираем «Переместить – Элементы вне папок».
Чтобы добавить элементы в папку, не обязательно было сначала создавать новую папку, а затем перемещать их в нее. Можно было сначала выбрать необходимые объекты, а далее нажать на «Папка с этими объектами». После чего Google Tag Manager предложит создать папку.
Рис. 200. Папка с этими объектами
Можно использовать оба варианта при группировке элементов в папки. Управлять папками и их содержимым можно с помощью меню.
Рис. 201. Управление папками
Доступны:
● добавить новый тег;
● добавить новый триггер;
● добавить новую переменную;
● переименовать папку;
● удалить папку.
Если вы заходите удалить папку, в которой присутствуют теги, триггеры или переменные, то вы сначала должны очистить ее содержимое, сделать ее пустой, иначе GTM выдаст вам предупреждение:
Рис. 202. Предупреждение Google Tag Manager
При создании новых объектов в GTM вы можете сразу указать конечную папку с помощью иконки:
Рис. 203. Иконка папки GTM
И последнее. После создания папок в таблицах тегов, триггеров и переменных появляется дополнительный столбец «Папка», по которому можно сортировать элементы.
Рис. 204. Дополнительный столбец «Папка»
Переменные
Переменная в Google Tag Manager – это объект, которому дано имя и который может принимать различные значения (вида пара «ключ-значение»). Имя переменной постоянно, а ее значение меняется в зависимости от того, какие действия происходят на сайте. Устаревшее название переменной в предыдущей версии диспетчера тегов Google – макрос.
Переменные в GTM практически ничем не отличаются от переменных в JavaScript. У каждого события на сайте есть свои переменные, в которых находится информация об этом событии. Например, когда в интернете-магазине мы нажимаем на кнопку «Добавить в корзину», в переменных этого события будут лежать значения CSS-класса этого элемента или сам текст элемента (кнопки). При клике на ссылку в переменной будет передаваться еще и URL-адрес.
Переменные могут применяться как в триггерах, так и в тегах. В триггерах они используются в качестве фильтра активации, то есть когда следует запускать тот или иной тег.
Рис. 205. Переменные в триггерах
Например, запускать триггер «Просмотр страницы» только тогда, когда переменная «Page URL» равна значению osipenkov.ru/google-tag-manager. Или выбрав тип триггера «Клик – Все элементы», вы можете с помощью условий (переменная + фильтр + значение) активировать триггер по нажатию на определенные элементы, и т.д.
Переменные в тегах используются для получения динамических значений. Например, в Google Analytics о сумме транзакции, ID заказа, идентификаторе продукта и т.д.
Рис. 206. Поле шаблона «Переменная»
В примере выше с помощью иконки (поле шаблона) «Переменная» для типа тега «Отслеживание конверсий AdWords» задаются значения для различных полей – идентификатор отслеживания, ярлык конверсии, ценность конверсии и т.д.
Также с переменными можно работать и в пользовательских HTML-тегах. Для этого нам необходимо использовать специальную конструкцию, заключенную в теги <script></script>. Тег <script> предназначен для описания скриптов и является контейнером для сценария, выполняющегося на стороне клиента, то есть в браузере пользователя. Как правило, тегом <script> подключают JavaScript.
Рис. 207. Пользовательский HTML с переменной
Данный код работать не будет, поскольку он является лишь демонстрацией того, как в пользовательских HTML-тегах можно обращаться к переменным.
В GTM вызов функции переменной выполняется с помощью специального синтаксиса:
{{имя переменной}}
Переменные шаблона в Google Tag Manager, как и выражения, заключаются в двойные фигурные скобки {{ }} с обеих сторон. Данные в шаблон передаются в виде обычного объекта, переменным шаблона соответствуют свойства этого объекта.
С такой конструкцией мы с вами знакомились несколько ранее, когда устанавливали счетчики Google Analytics и Яндекс.Метрика через GTM. Там в качестве переменной выступал идентификатор отслеживания Google Analytics. Чтобы не вводить ID вручную при создании каждого тега, переменная для Universal Analytics создавалась как пользовательская. В дальнейшем, если идентификатор отслеживания GA изменится, достаточно в одном месте указать новый ID счетчика.
Рис. 208. Пользовательская переменная с ID счетчиком Google Analytics
Примечание: как только вы начнете использовать шаблон переменной и напишите {{, Google Tag Manager предложит вам выбрать вариант из доступных переменных.
Рис. 209. Подсказка при написании
Любопытный момент: при изменении имени переменной все ссылки на переменную автоматически обновляются. Даже те, которые вы ввели вручную в пользовательских HTML-тегах и пользовательских переменных JavaScript. Это сильно экономит время, поскольку не нужно проходить каждую ссылку и переписывать код в соответствии с новым именем переменной.
Источником информации могут быть:
● слои данных;
● переменные JavaScript;
● cookies сайта;
● Document Object Model.
В Google Tag Manager переменные делятся на две категории:
1. встроенные переменные – набор готовых, предустановленных в системе переменных;
2. пользовательские переменные – самостоятельное создание с использованием существующих типов переменных.
Встроенные переменные
Встроенные переменные создаются автоматически и их нельзя изменить. Часть из них в GTM не активна по умолчанию.
Рис. 210. Встроенные переменные GTM
Они включаются и отключаются путем простановки галочек (чекбоксов) напротив каждой из них.
Рис. 211. Включение/Отключение встроенных переменных
Использование встроенных переменных не требует глубоких знаний в программировании и иногда позволяет заменить большое количество строк кода всего парой кликов мыши.
В Google Tag Manager на данный момент существует 9 категорий встроенных переменных:
● Страницы
● Утилиты
● Ошибки
● Клики
● Формы
● История
● Видео
● Прокрутка
● Видимость
Страницы
Рис. 212. Встроенные переменные «Страницы»
Наиболее часто используемые переменные. Они позволяют определить где пользователь находится в данный момент относительно URL-структуры сайта. Страница может быть как текущая, на которой в данный момент находится посетитель сайта, так и та страница, с которой он перешел на текущую страницу (Referrer).
Page URL – переменная возвращает полный URL текущей страницы, но без хэша # (все, что после решетки). Например, если пользователь загрузил страницу https://osipenkov.ru/analytics?parameter=true#vars, то переменная вернет значение https://osipenkov.ru/analytics?parameter=true
Page Hostname – переменная возвращает имя хоста (доменное имя) в URL текущей страницы. Например, для страницы https://osipenkov.ru/analytics?parameter=true#vars данная переменная вернет значение osipenkov.ru.
Page Path – переменная возвращает путь к странице в текущем URL без учета GET-параметров, то есть всего того, что идет в URL после знака вопроса «?» и «&» между параметрами.
Например, на странице https://osipenkov.ru/analytics?parameter=true#vars в GTM данная переменная возвращает значение /analytics, а в Google Analytics Page Path вернет значение /analytics?parameter=true
Referrer – полный URL перехода к текущей странице, то есть путь (ссылка) откуда пришел пользователь на текущую страницу.
Например, если пользователь со страницы https://osipenkov.ru/google-analytics-book/перешел на страницу https://osipenkov.ru/google-tag-manager/, то значение данной переменной будет https://osipenkov.ru/google-analytics-book/
Первые три переменные предназначены для текущей страницы, а последняя Referrer необходима для работы с той URL-страницы, с которой пользователь перешел на наш сайт. По умолчанию в Google Tag Manager все 4 встроенные переменные из категории «Страницы» активированы.
В качестве примера разберем простой переход из поисковой системы Google на сайт graphanalytics.ru. В режиме отладки GTM это будет выглядеть так:
Рис. 213. Пример встроенных переменных «Страницы»
Переменная Page Hostname вернула имя домена «graphanalytics.ru», Page Path содержит путь к странице в текущем URL, что соответствует «/» (главная директория), Page URL – полный URL текущей страницы «https://graphanalytics.ru/», а переход на сайт был выполнен из поиска Google, поэтому переменная Referrer вернула значение «https://www.google.ru/».
Утилиты
Рис. 214. Встроенные переменные «Утилиты»
Набор из 6 встроенных переменных в GTM, которые в большей степени носят служебные функции.
Event – возвращает подстроку, которая содержит тип события, произошедшее на сайте. Например, при нажатии на любой элемент возвращает gtm.click, на ссылку – возвращает gtm.linkClick, при заполнении формы – gtm.formSubmit, при возникновении ошибки – gtm.pageError.
Environment Name – возвращает название текущей среды («Реальная», «Последняя» или «Редактирование»), если запрос контейнера выполнен из функции «Поделиться ссылкой для просмотра» или из фрагмента кода среды.
Container ID – возвращает номер контейнера GTM. Например, GTM-NC2LK3M.
Рис. 215. Container ID
Container Version – возвращает номер версии контейнера в виде строкового значения. Например, 5.
Рис. 216. Container Version
Random Number – возвращает случайное число от 0 до 2147483647. Например, 666.
HTML ID – возвращает идентификатор пользовательского HTML-тега. Используется с секвенированием (порядком активации) тегов.
Если мы с вами перейдем в отладчик GTM, то увидим такие значения переменных из категории «Утилиты»:
Рис. 217. Пример встроенных переменных «Утилиты»
В качестве события был выбран Page View (Просмотр страницы):
● Container ID – GTM-W9PC2C8 (идентификатор контейнера);
● Container Version – QUICK_PREVIEW (режим предварительного просмотра);
● Environment Name – Draft Environment 6 2018–04–30 09:47:15 (название среды);
● Event – gtm.js (событие просмотра страницы);
● HTML ID – значение не присвоено. Значение ID переменной HTML отображается только в том случае, если мы работаем с тегами типа пользовательский HTML;
● Random Number – 294510670 (генератор случайных чисел). При обновлении страницы и фиксации нового события данное число изменится.
Ошибки
Рис. 218. Встроенные переменные «Ошибки»
Переменные из этой категории позволяют разработчикам анализировать ошибки, происходящие на сайте (анализ страниц, типы устройств, версий браузеров, разрешений экранов и т.д.). Для использования этих переменных необходимо их активировать и создать хотя бы один триггер типа «Ошибка JavaScript».
Рис. 219. Тип триггера – Ошибка JavaScript
Error Message – возвращает строку, содержащую сообщение об ошибке, отправленное с помощью триггера «Ошибка JavaScript».
Error URL – возвращает строку, содержащую URL-адрес скрипта, в котором была обнаружена ошибка.
Error Line – строка файла, в которой произошла ошибка.
Debug Mode – возвращает значение «true», если активирован режим отладки в Google Tag Manager.
В качестве наглядного примера создадим вынужденную ошибку в коде JS. Но перед тем, как запускать отладчик Google Tag Manager, не забываем создать новый триггер «Ошибка JavaScript» и обновить режим предварительного просмотра. Только после этого изменения вступят в силу.
Рис. 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 или в этой статье.