Еще один способ организации элементов внутри контейнера 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 или в этой статье.