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

Маруся

Администратор
Команда форума
Регистрация
21 Окт 2020
Сообщения
255
Симо Ахава (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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если наверху выбрана вкладка Tags (Теги), то мы можем увидеть какие теги были активированы по данному события, а какие нет.
  • Tags Fired – теги, которые были активированы (цифра 3);
  • Tags Not Fired – теги, которые не были активированы (цифра 4);
1610959948965.png
Конфигурация тега

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

1610959984239.png
Вкладка Variables

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

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

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

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

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

1610960013336.png
Global Site Tag

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

1610960027092.png
Hit Details

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

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

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

- referrer https://tagassistant.google.com

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

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

- основной файл cookie ( __TAG_ASSISTANT) устанавливается в просматриваемом домене
1610960080942.png
Собственный файл cookie __TAG_ASSISTANT

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

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

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

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

1610960111801.png
Активные домены и нет

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

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

Источник
 
Последнее редактирование:
Сверху