Google Tag Manager для googлят: Руководство по управлению тегами
TextСпециальные теги Google Tag Manager
1. Пользовательский HTML
2. Пользовательское изображение
Пользовательский HTML
У тегов, которых нет встроенных шаблонов в GTM, используется категория «Специальные теги». К ним относятся, например, коды Яндекс.Метрика, Facebook Pixel, Ретаргетинг ВК и другие.
Пользовательский тег HTML – это код стороннего сервиса, который должен быть заключен внутри тегов <script></script>. Вот так выглядит пользовательский HTML тег счетчика Яндекс.Метрика:
Рис. 400. Пользовательский HTML-тег, Яндекс.Метрика
Вы также можете включить вызовы функции document.write() в тегах, установив соответствующий флажок.
Рис. 401. Поддержка функции document.write
document.write() – метод добавления текста к документу. Он работает только пока HTML-страница находится в процессе загрузки и дописывает текст в текущее место HTML еще до того, как браузер построит из него DOM. Подробнее об этом методе читайте на learn.javascript.ru.
Также в пользовательский HTML тег можно вставлять встроенные и пользовательские переменные. Для этого используют конструкцию двойных фигурных скобок {{myVariable}}.
Рис. 402. Вставка переменных в HTML-тег
Пользовательское изображение
Помогает отслеживать поведение пользователей там, где не работают остальные теги (например, в браузерах с отключенным выполнением скриптов). В конце ссылки добавляется невидимый пиксель изображения с URL-адресом определенного формата со специальными параметрами. По ним происходит передача данных.
Universal Analytics, Пользовательский HTML и многие другие теги работают на основе JavaScript. Если они загружаются на странице, на которой отключена поддержка JavaScript, то теги не сработают.
В связи с этим разработчики Google предусмотрели возможность загрузки через тег <iframe>. А он, в свою очередь, загружается частью контейнера <noscript> и показывает свое содержимое, если браузер не поддерживает работу со скриптами или их поддержка отключена пользователем. В остальных случаях браузер игнорирует этот тег и все, что располагается внутри него.
Именно для этих целей и нужна вторая часть кода контейнера Google Tag Manager, которую Google просит разместить после открывающего тега <body>:
Рис. 403. Фрагменты кода контейнера GTM
Наиболее частое применение тега «Пользовательское изображение» в GTM – отслеживание посещений для пикселя Facebook. У этого типа тега всего две настройки:
Рис. 404. Настройки пользовательского изображения
● URL изображения – поле, где содержится адрес изображения со всеми параметрами, которые нужно передать;
● Включить блокировку кэша (параметр gtmcb по умолчанию) – при включении обращения будут регистрироваться в том числе с браузеров с кэшированным изображением.
Знаете ли вы почему сайты загружаются так быстро? Одной из причин является кэширование. Первый раз, когда вы заходите на новый сайт, все статические элементы (шрифты, изображений, стили, скрипты и т.д.) загружаются во временную папку, которая будет хранить все эти файлы и в последующих заходах каждый раз показывать на соответствующих страницах. Периодически браузер проверяет, не обновились ли эти файлы на стороне сервера, и при необходимости загружает их заново.
С точки зрения пользователя – это удобно. Нет необходимости ждать очередной полной загрузки страницы. С точки зрения интернет-маркетологов и веб-аналитиков – это не очень хорошо, поскольку на странице данные не поменялись, файлы загрузились один раз во временную папку пользователя и больше отследить к ним обращения возможности нет.
Если отключить галочку параметра «Включить блокировку кэша», то тег сработает только при первой загрузке сайта, так как изображение будет загружено во временное хранилище. А при включении опции Google Tag Manager добавит параметр gtmcb к URL изображения со случайным значением. Например, так:
site.ru/image.jpeg?gtmcb=1713862799
Поскольку значение в URL всегда разное, браузеру придется каждый раз скачивать изображение. А раз это будет происходить каждый раз, то мы сможем отслеживать это событие постоянно. Поэтому этот параметр лучше всегда держать включенным.
В категории тегов «Еще» содержатся шаблоны к сервисам, которые не так популярны у нас, но которые часто используются в мире. Это и comScore Unified Digital Measurement, и тег Adroll Smart Pixel, и Criteo One Tag, и Hotjar Tracking Code, и другие. Руководства по настройке какого-либо тега из этой категории вы найдете на сайте поставщика.
Рис. 405. Теги сторонних сервисов
Обычно теги активируются при загрузке страницы или в ответ на какое-либо действие на ней. В Google Tag Manager вы устанавливаете триггеры, определяющие, когда должны активироваться теги. Например, триггер «Все страницы» будет запускать тег на всех страницах при загрузке сайта.
Рис. 406. Триггер активации – All Pages
Для тегов можно задавать как триггеры активации, так и триггеры блокировки (исключения).
Отладчик
Режим отладки (он же режим предварительного просмотра) позволяет проверить корректность настроек тегов Google Tag Manager перед публикацией контейнера, выявить текущие проблемы на этапе тестирования и снизить риск их возникновения в будущем.
Режим предварительного просмотра в GTM еще называют режимом отладки. Проще говоря – это этап, на котором обнаруживают, локализуют и устраняют ошибки. Почему не активируется тег, не срабатывает событие, не определяется переменная? Ответить на эти и многие другие вопросы поможет именно отладка.
Предположим, что в своем контейнере вы настроили какие-то теги, добавили триггеры, переменные, и теперь хотите проверить корректность их выполнения. Чтобы включить режим предварительного просмотра, в интерфейсе Google Tag Manager нажмите на кнопку «Предварительный просмотр».
Рис. 407. Предварительный просмотр
Таким образом вы активируете режим предварительного просмотра и сверху в оранжевом прямоугольнике появится надпись:
Рис. 408. Предварительный просмотр активирован
Доступны три функции:
● Обновить – если в процессе отладки, не выходя из режима, вы внесли изменения в тегах, триггерах или переменных, то после каждого такого изменения следует обновлять предварительный просмотр, иначе Google Tag Manager не увидит правок и будет показывать предыдущую версию контейнера;
● Выйти из режима предварительного просмотра – выход из режима отладки;
Перед выходом GTM переспросит у вас:
Рис. 409. Окно выхода
● Поделиться ссылкой для просмотра – отправить доступ другим людям;
Режим предварительного просмотра доступен только в том браузере, в котором был включен этот режим. Но вы можете предоставить доступ другим пользователям. Для этого необходимо нажать на кнопку «Поделиться ссылкой для просмотра». Далее вводите целевой URL, разрешаете отладку при просмотре (gtm_debug=x), копируете ссылку и отправляете ее другому пользователю.
Рис. 410. Поделиться ссылкой для просмотра
Пользователь, в свою очередь, должен будет перейти по ссылке и кликнуть на целевой URL. После этого режим предварительного просмотра в его браузере будет активирован.
Рис. 411. Preview Container
После активации предварительного просмотра в соседней вкладке откройте ваш сайт. В нижней части окна браузера появится консоль отладки с подробной информацией о запущенных тегах, порядке их активации и собираемых данных. Эту консоль будете видеть только вы – другим посетителям сайта она недоступна.
Рис. 412. Панель отладки
Если после проделанных работ вы не увидели нижнюю консоль, то это может быть связано с тем, что:
● вы используете какие-либо блокировщики, например, AdBlock или AdGuard (хотя в некоторых случаях GTM корректно работает и с ними);
● ваш антивирус блокирует всплывающие окна;
● сам браузер настроен таким образом, что воспрепятствует появлению дополнительных окон.
Если ничего из вышеперечисленного не помогло, попробуйте зайти в режим отладки с другого браузера или компьютера.
Давайте разберем полностью всю навигацию консоли отладки.
Рис. 413. Интерфейс панели отладки
1. Сводка, шкала временных событий
В этом блоке отображаются все события в хронологическом порядке, которые зафиксировал Google Tag Manager. Как мы уже знаем, по умолчанию диспетчер тегов Google передает на уровень данных 3 события вне зависимости от того, настроили вы что-то еще или нет. Это gtm.js (Page View), gtm.dom (DOM Ready) и gtm.load (Window Loaded). Цифра рядом с каждым событием означает порядок активации. В данном случае событие «Page View» (1) было зафиксировано раньше остальных.
При клике на любое событие из списка мы можем посмотреть дополнительную информацию о нем. Например, событие gtm.click:
Рис. 414. Дополнительная информация о событии gtm.click
Если наверху выбрана вкладка «Tags (Теги)», то мы можем увидеть какие теги были активированы по данному события, а какие нет.
Tags Fired On This Page – теги, которые были активированы (цифра 3);
Tags Not Fired On This Page – теги, которые не были активированы (цифра 4);
В данном примере ни один из тегов не был активирован.
Если выбрана вкладка «Variables (Переменные)», то мы получаем подробные сведения о переменных в выбранном событии в тот момент, когда оно произошло. GTM будет передавать те значения переменных, которые были активированы в интерфейсе, даже если они не определены (undefined).
Рис. 415. Сопоставление переменных
На вкладке «Data Layer (Уровень данных)» отображается информация объекта в двух состояниях:
● в том виде, в каком она была передана в уровень данных в момент события;
● содержимое уровня данных после того, как произошло событие.
Рис. 416. Data Layer
Верхний пункт «Summary» показывает общую информацию о работе всех тегов GTM, которые сработали на данной странице за все время работы независимо от времени их загрузки.
Рис. 417. Summary
Если тег сработал несколько раз, то в Summary рядом с этим тегом будет изменено значение Fired .. time (s)
Рис. 418. Количество совершенных событий Fired X time(s)
В Summary информация по переменным недоступна, поскольку их значения меняются в зависимости от события.
Рис. 419. Please select a Data Layer message to view variable values
Ее необходимо просматривать только тогда, когда вы выбираете конкретное событие.
В Summary на вкладке «Data Layer» выводится вся информацию по уровню данных в хронологическом порядке – события с номерами, та информация, которая была передана по событию и общая информация об уровне данных на текущий момент, Current values of the Data Layer (блок выделен зеленым):
Рис. 420. Summary – Data Layer
Если событий было зафиксировано большое количество, то с помощью кнопки «Show more» можно просмотреть предыдущий список событий.
Возвращаемся назад к временной шкале событий и на вкладку «Tags» (цифра 2).
Рис. 421. Вкладка Tags
Нажав на тег, можно просмотреть его свойства и значения, а также триггеры активации (Firing Triggers) и блокировки (Blocking Triggers).
Рис. 422. Свойства и значения
Триггер активации сработал и нет (отличия):
Рис. 423. Триггер активации и триггер блокировки (отличия)
Активация триггера может состоять из нескольких условий. В этом случае какие-то отдельные условия могут сработать, а какие-то нет:
Рис. 424. Несколько условий активации триггера
При несоблюдении хотя бы одного условия триггер не сработает. В верхней части блока отладки на вкладке «Tags» есть настройка, которая называется Display Variables as.
Рис. 425. Настройка Display Variables as
Она позволяет выбрать режим представления переменных: в виде имени (Names) или в виде значения (Values) переменной в момент активации.
Рис. 426. Различия в отображении
На примере выше условия активации триггера изменились с Click Element, Page URL и _event (названия переменных) на значения переменных в момент активации.
Как мы уже знаем, для отслеживания различных действий пользователя в GTM предусмотрена специальная переменная event. Она можно использоваться внутри обработчика того или иного события. Если event отсутствует или не задано, то в режиме отладки мы увидим слово «Message» и надпись:
Рис. 427. «Message»
Если мы передаем через уровень данных пользовательское событие, то имя этого события выводится на временной шкале. Например, клик по кнопке зафиксировал пользовательское событие «Яша Осипенков».
Рис. 428. Событие с собственным именем
Название может быть, как на кириллице, так и на латинице. Однако устоявшимся традиционным написанием пользовательских событий все же является латинский алфавит. А информация на уровне данных выглядит следующим образом:
Рис. 429. Data Layer
5. QUICK_PREVIEW
Рис. 430. Предварительный просмотр
Эта надпись свидетельствует о том, что в данный момент мы находимся в режиме предварительного просмотра (отладки) контейнера Google Tag Manager.
6. Код контейнера
Рис. 431. Код контейнера
Идентификатор контейнера GTM.
7. Сворачивание панели отладки
Рис. 432. Сворачивание панели отладки
Иногда панель отладки Google Tag Manager загораживает нижнюю часть экрана. В этом случае мы на некоторое время можем свернуть его для внесение каких-либо правок с помощью данной опции.
В свернутом состоянии панель отладки выглядит так:
Рис. 433. Панель отладки в свернутом состоянии
При клике на элемент вернется исходное состояние GTM. Помимо этого, управлять высотой панели можно с помощью ее перетягивания левой кнопкой мыши вверх-вниз.
Рис. 434. Изменение высоты панели
После того, как вы проверили корректность всех настроек в режиме отладки и внесли соответствующие изменения, их можно опубликовать. Для этого необходимо нажать на кнопку «Отправить» в правом верхнем углу интерфейса Google Tag Manager.
Рис. 435. Отправить на публикацию
Указав название версии или создав новую, а также выбрав среду, опубликуйте контейнер.
Рекомендации: если вы проверяете корректность срабатывания событий Google Analytics, то используйте для этого группу отчетов «В режиме реального времени».
Глава 3. Google Tag Manager на примерах
В первую версию книги «Google Tag Manager для googлят» попали самые распространенные примеры настроек GTM. Если вы нашли ошибку или хотите дополнить этот раздел собственной публикацией, присылайте материал мне на почту ya.osipenkov@icloud.com
Данная глава подготовлена командой GaSend.com.