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

Октябрь 17, 2020

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

Симо Ахава (Simo Ahava), эксперт Google Developers по Google Analytics и Tag Manager, выпустил подробную статью о переработанным режиме отладки. Также он записал 20-минутное видео, в котором демонстрирует работу Preview Mode:

Мой материал частично основан на переводе его публикации и собственных комментариев по текущему обновлению.

Итак, новый режим предварительного просмотра теперь интегрирован в Google Tag Assistant (Tag Manager + Tag Assistant = 💕). Google Tag Assistant - отдельное расширение для браузера Google Chrome, которое позволяет записывать последовательность действий (Google Tag Assistant Recording), выполняемых пользователями, поддерживает анализ тегов во многих продуктах Google (Ads, DoubleClick, Tag Manager и т.д.), а также помогает отслеживать правильность установки кода, находить и исправлять проблемы, которые могут привести к искажению данных в ресурсах и представлениях Google Analytics.

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

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

Старый предварительный просмотр

Теперь нет нижней панели в окне браузера на каждой странице сайта:

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

Панель отладки внизу страницы

За режим отладки все также отвечает кнопка Предварительный просмотр в правом верхнем углу интерфейса Google Tag Manager:

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

Активация предварительного просмотра

После того, как вы нажмете ссылку предварительного просмотра, откроется новая вкладка браузера с новым интерфейсом Tag Assistant (BETA). Появится всплывающее окно, в котором вам нужно ввести URL-адрес, для которого Tag Assistant откроет режим отладки.

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

Start Tag Assistant

Если у вашего сайта нет проблем с параметрами URL, оставьте галочку Include debug signal in the URL. Она добавляет параметр gtm_debug=x в URL страницы, которая сигнализирует о том, что будет запущен режим предварительного просмотра. Такая настройка делает канал более надежным в большинстве современных браузеров.

Чтобы увидеть список доменов, которые вы запускали, перейдите по ссылке tagassistant.google.com

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

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

После того, как вы нажмете Start, Tag Assistant сначала попытается найти вкладку/окно, которое вы могли раньше открывать из Tag Assistant, и восстановит это подключение. Если такая вкладка/окно не найдено, открывается новое окно отладки с настроенным URL-адресом.

Открытие режима предварительного просмотра без расширения Google Tag Assistant

В нижнем углу страницы будет отображен новый значок предварительного просмотра и надпись Debugger connected в случае успешной активации режима отладки:

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

Отладчик подключен

Если канал не найден, на значке предварительного просмотра будет отображаться ошибка No debugger found. Вы можете активировать новый предварительный просмотр Tag Assistant с помощью кнопки Open debugger:

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

No debugger found

Вкладка браузера Tag Assistant связана с одним окном отладки (страницей/сайтом). Изменять URL в таком окне нельзя.

Открытие режима предварительного просмотра с расширением Google Tag Assistant

Если у вас установлено расширение Tag Assistant, вы можете открыть несколько вкладок предварительного просмотра в браузере (а не в отдельных окнах, как это происходит без расширения!). Это позволяет пользователю манипулировать адресной строкой браузера и может облегчить отладку действий на основе реферера. Причем характерным отличием запуска режима отладки без расширения Google Tag Assistant и с ним будет заключаться в подсветке этих вкладок:

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

Несколько режимов отладки одновременно

В качестве эксперимента я запустил одновременно три режима отладки для трех разных сайтов. Как видно из скриншота выше, у каждого из них свой опознавательный значок (символ). Такими значками будут сопровождаться и страницы на шкале событий:

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

Уникальный значок для каждого окна/вкладки

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

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

Эмулятор мобильных устройств

Вместо старой панели режима отладки у нас есть новый интерфейс предварительного просмотра Tag Assistant:

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

Интерфейс нового режима предварительного просмотра

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

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

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

Главное отличие заключается в том, что теперь на шкале фиксируются события не только по одной странице, а по всем. Раньше шкала временных событий "обнулялась" после перезагрузки страницы или перехода с одного URL на другой. И для отслеживания необходимых событий приходилось использовать различные способы и расширения для браузера.

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

События по всем страницам

Теперь, даже если вы перезагрузите окно отладки или перейдете с одной страницы на другую, Tag Assistant покажет все взаимодействия, собранные со всех этих страниц. Это делает анализ истории уровня данных (dataLayer) намного проще, чем раньше.

2. Меню Tags, Variables, Data Layer, Errors

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

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

  • Tags Fired – теги, которые были активированы (цифра 3);
  • Tags Not Fired – теги, которые не были активированы (цифра 4);
Новый режим предварительного просмотра в Google Tag Manager

Конфигурация тега

Если выбрана вкладка Variables (Переменные), то мы получим подробные сведения о переменных в выбранном событии в тот момент, когда оно произошло.

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

Вкладка Variables

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

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

Если ваш сайт работает с разными версиями Google Analytics (например, gtag.js и Web + App) вы можете выбрать различные контейнеры из раскрывающегося меню в заголовке.

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

Выбор контейнера из списка

В зависимости от API-интерфейсов, используемых библиотекой, вы можете увидеть разные конфигурации в самом интерфейсе предварительного просмотра. Например, для Global Site Tag, установленного напрямую, интерфейс Tag Assistant будет выглядеть иначе:

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

Global Site Tag

В Hit Details будут отображаться все вызовы серверов Google, которые были инициированы API Call. Вы можете увидеть список параметров и значений (в удобочитаемом формате), щелкнув одно из отправленных обращений (Hits Sent):

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

Hit Details

Tag Assistant использует несколько сигналов, чтобы определить когда включать окно отладки для предварительного просмотра:

- gtm_debug=x. Параметр в URL страницы (та самая галочка Include debug signal in the URL)

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

Параметр gtm_debug=x в URL страницы

- referrer https://tagassistant.google.com

Примечание: Симо рекомендует добавить tagassistant.google.com в список исключаемых источников перехода Google Analytics, чтобы режим предварительного просмотра не запускал новый сеанс.

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

Источник перехода tagassistant.google.com

- основной файл cookie ( __TAG_ASSISTANT) устанавливается в просматриваемом домене

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

Собственный файл cookie __TAG_ASSISTANT

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

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

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

Выход из режима отладки

Откроется всплывающее окно Stop Debugging, в котором вы можете выбрать, оставить ли домен включенным для отладки или нет. Если вы решите не оставлять, Tag Assistant сообщит сайту об удалении основного файла cookie __TAG_ASSISTANT и разорвет соединение до тех пор, пока через Tag Assistant не будет установлено новое. Если вы оставите домен включенным для отладки, то основной файл cookie не удалится. Пока вы не закроете окно отладки, вы всегда сможете восстановить режим предварительного просмотра.

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

Активные домены и нет

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

Из преимуществ обновления я выделил для себя следующие:

  • отдельное окно/вкладка браузера. Панель отладки внизу экрана браузера занимала много места, что затрудняло работу, особенно на небольших ноутбуках;
  • на шкале фиксируются события не только по одной странице, а по всем. Теперь нет необходимости использовать различные расширения браузера или специальные коды для того, чтобы увидеть, что происходило в Google Tag Manager ранее;
  • удобнее проводить отладку в браузере для мобильных устройств, используя эмулятор.

Получайте бесплатные уроки и фишки

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