Режим отладки в Google Tag Manager

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

Проще говоря — это этап, на котором обнаруживают, локализуют и устраняют ошибки. Почему не активируется тег, не срабатывает событие, не определяется переменная? Ответить на эти и многие другие вопросы поможет именно отладка.

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

Режим отладки Google Tag Manager
Предварительный просмотр

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

Режим отладки Google Tag Manager
Предварительный просмотр активирован

Доступны три функции:

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

Перед выходом GTM переспросит у вас:

Режим отладки Google Tag Manager
Выйти из режима предварительного просмотра?
  • Поделиться ссылкой для просмотра – отправить доступ другим людям;

Режим предварительного просмотра доступен только в том браузере, в котором был включен этот режим. Но вы можете предоставить доступ другим пользователям. Для этого необходимо нажать на кнопку «Поделиться ссылкой для просмотра». Далее вводите целевой URL, разрешаете отладку при просмотре (gtm_debug=x), копируете ссылку и отправляете ее другому пользователю.

Режим отладки Google Tag Manager
Поделитесь ссылкой для просмотра

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

Режим отладки Google Tag Manager
Preview Container

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

Режим отладки Google Tag Manager
Панель отладки

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

  • вы используете какие-либо блокировщики, например, AdBlock или AdGuard (хотя в некоторых случаях GTM корректно работает и с ними);
  • ваш антивирус блокирует всплывающие окна;
  • сам браузер настроен таким образом, что воспрепятствует появлению дополнительных окон.

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

Давайте разберем полностью всю навигацию консоли отладки.

Режим отладки Google Tag Manager
Навигация

1. Сводка, шкала временных событий

В этом блоке отображаются все события в хронологическом порядке, которые зафиксировал Google Tag Manager. Как мы уже знаем, по умолчанию диспетчер тегов Google передает на уровень данных 3 события вне зависимости от того, настроили вы что-то еще или нет. Это gtm.js (Page View), gtm.dom (DOM Ready) и gtm.load (Window Loaded). Цифра рядом с каждым событием означает порядок активации. В данном случае событие «Page View» (1) было зафиксировано раньше остальных.

При клике на любое событие из списка мы можем посмотреть дополнительную информацию о нем. Например, событие gtm.click:

Режим отладки Google Tag Manager
Событие gtm.click

Если наверху выбрана вкладка «Tags (Теги)», то мы можем увидеть какие теги были активированы по данному события, а какие нет.

Tags Fired On This Page – теги, которые были активированы (цифра 3);

Tags Not Fired On This Page – теги, которые не были активированы (цифра 4);

В данном примере ни один из тегов не был активирован.

Если выбрана вкладка «Variables (Переменные)», то мы получаем подробные сведения о переменных в выбранном событии в тот момент, когда оно произошло. GTM будет передавать те значения переменных, которые были активированы в интерфейсе, даже если они не определены (undefined).

Режим отладки Google Tag Manager
Вкладка Variables

На вкладке «Data Layer (Уровень данных)» отображается информация объекта в двух состояниях:

  1. в том виде, в каком она была передана в уровень данных в момент события;
  2. содержимое уровня данных после того, как произошло событие.
Режим отладки Google Tag Manager
Вкладка Data Layer

Верхний пункт «Summary» показывает общую информацию о работе всех тегов GTM, которые сработали на данной странице за все время работы независимо от времени их загрузки.

Режим отладки Google Tag Manager
Summary

Если тег сработал несколько раз, то в Summary рядом с этим тегом будет изменено значение Fired .. time (s)

Режим отладки Google Tag Manager
Fired .. time(s)

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

Режим отладки Google Tag Manager
Информация по переменным не доступна

Ее необходимо просматривать только тогда, когда вы выбираете конкретное событие.

В Summary на вкладке «Data Layer» выводится вся информацию по уровню данных в хронологическом порядке – события с номерами, та информация, которая была передана по событию и общая информация об уровне данных на текущий момент, Current values of the Data Layer (блок выделен зеленым):

Режим отладки Google Tag Manager
Summary — Data Layer

Если событий было зафиксировано большое количество, то с помощью кнопки «Show more» можно просмотреть предыдущий список событий.

Возвращаемся назад к временной шкале событий и на вкладку «Tags».

Режим отладки Google Tag Manager
Теги

Нажав на тег, можно просмотреть его свойства и значения, а также триггеры активации (Firing Triggers) и блокировки (Blocking Triggers).

Режим отладки Google Tag Manager
Информация по тегу

Триггер активации сработал и нет (отличия):

Режим отладки Google Tag Manager
Триггер активации сработал и нет

Активация триггера может состоять из нескольких условий. В этом случае какие-то отдельные условия могут сработать, а какие-то нет:

Режим отладки Google Tag Manager
Несколько условий активаций

При несоблюдении хотя бы одного условия триггер не сработает. В верхней части блока отладки на вкладке «Tags» есть настройка, которая называется Display Variables as.

Режим отладки Google Tag Manager
Display Variables as

Она позволяет выбрать режим представления переменных: в виде имени (Names) или в виде значения (Values) переменной в момент активации.

Режим отладки Google Tag Manager
Отличия NAMES от VALUES

На примере выше условия активации триггера изменились с Click Element, Page URL и _event (названия переменных) на значения переменных в момент активации.

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

Режим отладки Google Tag Manager
Message

Если мы передаем через уровень данных пользовательское событие, то имя этого события выводится на временной шкале. Например, клик по кнопке зафиксировал пользовательское событие «Яша Осипенков».

Режим отладки Google Tag Manager
Пример пользовательского события

Название может быть, как на кириллице, так и на латинице. Однако устоявшимся традиционным написанием пользовательских событий все же является латинский алфавит. А информация на уровне данных выглядит следующим образом:

Режим отладки Google Tag Manager
Data Layer пользовательского события

5 — QUICK_PREVIEW

Режим отладки Google Tag Manager
Режим предварительного просмотра

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

6 – Код контейнера

Режим отладки Google Tag Manager
Код контейнера GTM

Идентификатор контейнера GTM.

7 – Сворачивание панели отладки

Режим отладки Google Tag Manager
Сворачивание панели отладки

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

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

Режим отладки Google Tag Manager
Debug

При клике на элемент вернется исходное состояние GTM. Помимо этого, управлять высотой панели можно с помощью ее перетягивания левой кнопкой мыши вверх-вниз.

Режим отладки Google Tag Manager
Перетягивание панели по границе консоли

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

Режим отладки Google Tag Manager
Отправка контейнера после отладки

Указав название версии или создав новую, а также выбрав среду, опубликуйте контейнер.

Рекомендации: если вы проверяете корректность срабатывания событий Google Analytics, то используйте для этого группу отчетов «В режиме реального времени».

Понравилась статья? Подписывайтесь на социальные сети:

Я также оказываю помощь в настройке контекстной рекламы и веб-аналитики. Подробнее здесь.

Yakov Osipenkov | 08.07.2018

КонтактыКонтакты

Связаться

Контактная информация

Выпускник МГТУ им. Баумана (2008-2014), ведущий специалист по контекстной рекламе компании ConvertMonster (2016-2017), сертифицированный специалист по Google AdWords и Google Analytics, автор курса Google Adwords 3.0 (2017) и публикаций учебных материалов по продуктам Google на seonews.ru, searchengines.ru, webpromoexperts.com.ua, менеджер по мобильному трафику в компании Kokoc (2017-март 2018)

По вопросам консультаций, сотрудничества и предложений:

Skype

yasha.cmteam

E-mail

ya.osipenkov@icloud.com

Обратная связь

Имя:

E-mail:

Тема письма:

Ваше сообщение:


УслугиУслуги

Чем полезен
E-Commerce

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Responsive Design

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Web Security

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Behold appear first, kind all i saying fowl man itself moved which every open shall moved subdue appear.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  •  Contabile computer 100% responsive design
  •  Contabile laptop 100% responsive design
  •  Contabile tablet 100% responsive design
  •  Contabile smartfon 100% responsive design

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

E-COMMERCE

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Обо мнеОбо мне

Интернет-маркетолог
  • Ведущий специалист по контекстной рекламе агентства Convert Monster
  • Сертифицированный специалист Google AdWords
  • Спикер и куратор на курсах “Специалист по трафику, трафик-менеджер”, “Интернет-маркетолог за 80 дней”
  • Опыт работы в интернет-маркетинге: 2 года
  • Специализация: интернет-магазины и посадочные страницы (Landing Page)

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

Amy Johnson
Amy Johnson
Java Developer, Htmlstream

Lorem Ipsum is simply dummy text of the printing and typesetting industry dummy text of the printing and typesetting.

John Doe
John Doe
Developer

REVIEWS

  • 0%
    HTML5
  • 0%
    CSS3
  • 0%
    BOOTSTRAP
  • 0%
    WORDPRESS

MY SKILLS

Happy Clients
0
working hours
0
coffee consumed
0
solved tickets
0
01/8/00 - 18/6/102012 - 2015
FRONT-END DEVELOPER

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

01/8/00 - 18/6/102010 - 2012
COMPUTER UNIVERSITY

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra grape. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

01/8/00 - 18/6/102000 - 2010
COMPUTER SCHOLL

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

КонтактыКонтакты

Связаться

Контактная информация

Выпускник МГТУ им. Баумана (2008-2014), ведущий специалист по контекстной рекламе компании ConvertMonster (2016-2017), сертифицированный специалист по Google AdWords и Google Analytics, автор курса Google Adwords 3.0 (2017) и публикаций учебных материалов по продуктам Google на seonews.ru, searchengines.ru, webpromoexperts.com.ua, менеджер по мобильному трафику в компании Kokoc (2017-март 2018)

По вопросам консультаций, сотрудничества и предложений:

Skype

yasha.cmteam

E-mail

ya.osipenkov@icloud.com

Обратная связь

Имя:

E-mail:

Тема письма:

Ваше сообщение:


УслугиУслуги

Чем полезен
E-Commerce

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Responsive Design

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Web Security

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Behold appear first, kind all i saying fowl man itself moved which every open shall moved subdue appear.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  •  Contabile computer 100% responsive design
  •  Contabile laptop 100% responsive design
  •  Contabile tablet 100% responsive design
  •  Contabile smartfon 100% responsive design

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

E-COMMERCE

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Обо мнеОбо мне

Интернет-маркетолог
  • Ведущий специалист по контекстной рекламе агентства Convert Monster
  • Сертифицированный специалист Google AdWords
  • Спикер и куратор на курсах “Специалист по трафику, трафик-менеджер”, “Интернет-маркетолог за 80 дней”
  • Опыт работы в интернет-маркетинге: 2 года
  • Специализация: интернет-магазины и посадочные страницы (Landing Page)

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

Amy Johnson
Amy Johnson
Java Developer, Htmlstream

Lorem Ipsum is simply dummy text of the printing and typesetting industry dummy text of the printing and typesetting.

John Doe
John Doe
Developer

REVIEWS

  • 0%
    HTML5
  • 0%
    CSS3
  • 0%
    BOOTSTRAP
  • 0%
    WORDPRESS

MY SKILLS

Happy Clients
0
working hours
0
coffee consumed
0
solved tickets
0
01/8/00 - 18/6/102012 - 2015
FRONT-END DEVELOPER

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

01/8/00 - 18/6/102010 - 2012
COMPUTER UNIVERSITY

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra grape. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

01/8/00 - 18/6/102000 - 2010
COMPUTER SCHOLL

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

Бесплатные уроки по контекстной

рекламе и веб-аналитике!

Решаем задачи

Общаемся

Делимся

Спасибо за подписку!