Предположим, что в своем контейнере вы настроили какие-то теги, добавили триггеры, переменные, и теперь хотите проверить корректность их выполнения. Чтобы включить режим предварительного просмотра, в интерфейсе Google Tag Manager нажмите на кнопку «Предварительный просмотр».
Рис. 407. Предварительный просмотр
Таким образом вы активируете режим предварительного просмотра и сверху в оранжевом прямоугольнике появится надпись:
Рис. 408. Предварительный просмотр активирован
Доступны три функции:
● Обновить – если в процессе отладки, не выходя из режима, вы внесли изменения в тегах, триггерах или переменных, то после каждого такого изменения следует обновлять предварительный просмотр, иначе Google Tag Manager не увидит правок и будет показывать предыдущую версию контейнера;
● Выйти из режима предварительного просмотра – выход из режима отладки;
Перед выходом GTM переспросит у вас:
Рис. 409. Окно выхода
● Поделиться ссылкой для просмотра – отправить доступ другим людям;
Режим предварительного просмотра доступен только в том браузере, в котором был включен этот режим. Но вы можете предоставить доступ другим пользователям. Для этого необходимо нажать на кнопку «Поделиться ссылкой для просмотра». Далее вводите целевой URL, разрешаете отладку при просмотре (gtm_debug=x), копируете ссылку и отправляете ее другому пользователю.
Рис. 410. Поделиться ссылкой для просмотра
Пользователь, в свою очередь, должен будет перейти по ссылке и кликнуть на целевой URL. После этого режим предварительного просмотра в его браузере будет активирован.
Рис. 411. Preview Container
После активации предварительного просмотра в соседней вкладке откройте ваш сайт. В нижней части окна браузера появится консоль отладки с подробной информацией о запущенных тегах, порядке их активации и собираемых данных. Эту консоль будете видеть только вы – другим посетителям сайта она недоступна.
Рис. 412. Панель отладки
Если после проделанных работ вы не увидели нижнюю консоль, то это может быть связано с тем, что:
● вы используете какие-либо блокировщики, например, AdBlock или AdGuard (хотя в некоторых случаях GTM корректно работает и с ними);
● ваш антивирус блокирует всплывающие окна;
● сам браузер настроен таким образом, что воспрепятствует появлению дополнительных окон.
Если ничего из вышеперечисленного не помогло, попробуйте зайти в режим отладки с другого браузера или компьютера.
Давайте разберем полностью всю навигацию консоли отладки.
Рис. 413. Интерфейс панели отладки
В этом блоке отображаются все события в хронологическом порядке, которые зафиксировал 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. Триггер активации и триггер блокировки (отличия)
Активация триггера может состоять из нескольких условий. В этом случае какие-то отдельные условия могут сработать, а какие-то нет: