Как пользоваться отладкой в Google Tag Manager

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

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

Также, на мой взгляд, после выхода этой версии отладчика, нет необходимости использовать другие инструменты для отладки Google Tag Manager.

Итак, приступим к знакомству с отладчиком.

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

Просмотр версии контейнера

Просмотр версии контейнера

После этого произойдет обновление страницы Google Tag Manager и появится следующее сообщение:

Сообщение о режиме отладки

Сообщение о режиме отладки

Теперь вам необходимо на сайте, где установлен контейнер Google Tag Manager обновить нужную страницу нажатием клавиши F5 и отобразиться окно отладчика:

Окно отладчика

Окно отладчика

Давайте разберемся с основными элементами.

  • блок в верхней части: Tags, Variables, Data Layer – содержит информацию о том, какие теги, переменные и значения из dataLayer доступны;
  • левый блок содержит сведения о произошедших событиях;
  • основная часть экрана отображает информацию, которая используется непосредственно для поиска ошибок и настройки Google Tag Manager.

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

При выборе пункта из верхнего меню вы можете узнать какие теги были активированы по выбранному событию (из левого блока), какие значения принимают переменные, а также что находится в dataLayer.

Основная рабочая часть экрана отображает информацию в зависимости от выбранного события и пункта в верхнем меню.

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

Отладка активации тегов Google Tag Manager

Отладка активации тегов Google Tag Manager

  • Tags Fired On This Page – теги, активированные по событию;
  • Tags Not Fired On This Page – теги, выполнение которых не произошло.

Нажав на блок с названием тега вы получите подробную информацию о нем. Доступно четыре блока информации.

Первый – содержимое тега. Очень удобная возможность, т.к. на пример, при настройке Google Analytics выводит всю информацию о том, что передается на сервер:

Тег Google Analytics

Тег Google Analytics

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

Второй блок – информация о событиях при которых активировался тег.

Когда активировался тег

Когда активировался тег

Обратите внимание на серые цифры. Это номера событий присвоенным им в порядке их фиксации.

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

Правило активации тега

Правило активации тега

Четвертый блок аналогичен третьему, только выводит триггеры блокирующие выполнение тега.

Блокирующие правила

Блокирующие правила

Советую обратить внимание на небольшую строку в верхней части блока отладки:

Отображение макросов

Отображение макросов

Она служит для выбора варианта отображения переменных:

  • Names – в тегах будут отображаться названия переменных;
  • Values – в тегах будут отображаться значения переменных, на момент их активации.

Приведу пример с указанием идентификатора UA в теге Google Analytics. Я для его хранения использую отдельную переменную, которую затем указываю в настройках тегов типа Google Analytics или Universal Analytics. Слева на изображении переключатель в положении Names, справа Values:

Пример работы переключателя

Пример работы переключателя

Мы разобрали работу с тегами. Рассмотрим отладочную информацию о переменных.

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

Обратите внимание, сведения не доступны для Summary и могут быть получены только для конкретного события.

После выбора события отобразиться список всех имеющихся в вашем контейнере тегов с их именами, типами и текущими значениями:

Информация о макросах Google Tag Manager

Информация о макросах Google Tag Manager

Следующий блок, это информация о Data Layer. Выбираем вверху соответствующий пункт и получаем информацию о том, что у нас находится в dataLayer.

Доступны два варианта получения информации для конкретного события и типа сводки за все время сессии.

Если слева выбран пункт Summary, то будут отображены блоки с названиями событий и их номерами, в которых выводится информация о том, какие сведения содержатся в dataLayer после их фиксации:

Информация о dataLayer Google Tag Manger

Информация о dataLayer Google Tag Manger

В самом низу страницы есть блок, в котором отображается информация о том, что содержится в dataLayer в текущий момент:

Текущий dataLayer

Текущий dataLayer

Если вы просматриваете информацию об dataLayer только для выбранного события отобразятся сведения о том, какие данные были переданы в dataLyer при выполнении события и что содержится в нем после этого.

dataLayer до и после выполнения события

dataLayer до и после выполнения события

Слева то, что было передано в dataLayer, справа то, что в нем содержится после выполнения события.

Как видите текущая версия отладчика Google Tag Manager достаточно удобна и позволяет выполнять настройку Google Tag Manager и Google Analytics в удобном и информативном окружении.

P.S. Не забудьте, при необходимости, после отладки опубликовать версию контейнера.

Кейсы и инструкции по настройке в вашем ящике. Подпишитесь сейчас!

8 комментария(ев) к “Как пользоваться отладкой в Google Tag Manager

  1. Подскажите, а как теперь прочитать все записи блога? После редизайна не могу найти списка всех постов.

    • @Стас, в нижней части страницы есть блок с рубриками публикаций, выбрав нужную Вы получите список всех материалов по ней. Спасибо за интерес к блогу!

  2. Иван, спасибо за статью.
    Возник небольшой вопрос.
    Вы писали: “Первый – содержимое тега. Очень удобная возможность, т.к. на пример, при настройке Google Analytics выводит всю информацию о том, что передается на сервер”

    А если мы настраиваем e-commerce, должны ли в содержимом тега отображаться сведения о транзакции.

    С TagManager работаю недавно, пытаюсь разобраться.

  3. Иван, добрый день! благодаря вашему ресурсу уже настроила много полезного на 1 сайте и все работает. Но тут столкнулась с проблемой на другом сайте. Изначально он переводился с Google Analytics на Universal. В админке сделали перевод. Затем удалили старый код, установили код Tag Manager (я заранее создала контейнер) и сразу через него установила universal + конверсии через adwords.
    Перехожу в режим отладки – консоль не загружается :( При этом проверила – tag manager в коде есть. Захожу в аналитикс – сбор данных прекратился, в режиме реального времени 0 посетителей. Сайт razsvet.ru. Иван, сталкивались ли с таким? что могло бы вылечить?

    • @natakka, на указанном сайте не загружается GTM, проверьте корректность установки кода контейнера

  4. Иван, чего-то не могу найти ссылку на отладчик, который вы используете. Похоже это какое-то расширение, а вот какое – не пойму. Подскажите, пожалуйста.

    • Ренат, необходимо перейти в режим предварительного просмотра, затем обновить страницу на сайте, где установлен Google Tag Manager

Добавить комментарий

Current month ye@r day *