Как работает режим предварительного просмотра в Яндекс Тег Менеджере?

Начали использовать Яндекс Тег Менеджер? Выполнили необходимые настройки, но не знаете как проверить корректность отслеживаний? Из этого руководства вы узнаете, как работает режим предварительного просмотра на данный момент.

Читать еще:

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

Введение

Одним из самых важных функционалов в Яндекс Тег Менеджере является режим предварительного просмотра. Он располагается в правом верхнем углу (рядом с кнопкой публикации контейнера) и позволяет проверить правильность настроек тегов перед публикацией контейнера, выявить текущие проблемы на этапе тестирования и снизить риск их возникновения в будущем.

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

Нажав на кнопку, в отдельном окне откроется ваш сайт, а в адресной строке браузера в URL-ссылке будет добавлен специальный параметр _ytm_preview, свидетельствующий об активации режима предварительного просмотра.

На сегодняшний день режим предварительного просмотра Yandex Tag Manager значительно отличается от режима отладки Google Tag Manager, который открывается в отдельном окне по адресу tagassistant.google.com. Он не такой гибкий, информативный и понятный. По правде говоря, его в текущей версии вообще нет. Единственное, что можно сейчас делать с помощью режима отладки ЯТМ - это выводить сообщения в консоль разработчика, который будут отображаться на вкладке Console.

Для этого Яндекс разработал тег Мини дебагер триггеров и переменных, который доступен в каталоге шаблонов.

Нажав на него, вам откроется конфигурация данного тега. Вы можете перейти на вкладку Код, чтобы увидеть из какого JavaScript-кода он состоит:

Этот код - JavaScript-фрагмент, который использует две основные функции:

1. queryPermission — функция, которая проверяет, разрешено ли выполнение определенных действий (например, логирование).
2. logToConsole — функция, которая выводит информацию в консоль разработчика (DevTools).

Таким образом, этот тег проверяет, можно ли выводить данные в консоль разработчика (вкладка Console), и если можно - логирует значение переменной и сообщает об успехе. Если нельзя - сообщает о неудаче.

Шаблон тега Мини дебагер триггеров и переменных команда Яндекса специально создала для того, чтобы мы имели возможность получать хоть какие-то уведомления, пока основной режим отладки ЯТМ активно разрабатывается. Насколько мне известно, сейчас это самое приоритетное для них направление, поскольку без полноценного режима отладки просто невозможно провести проверку всех выполненных настроек. 99% пользователей Яндекс Метрики не обладают навыками программирования, не знают как правильно написать код для вывода нужных команд в консоль, следовательно, не смогут использовать Яндекс Тег Менеджер в своих проектах на полную мощность. Но благодаря описанным ниже приемам я помогу вам упростить процесс отладки и проверки корректности ваших настроек.

Примечание: в каталоге шаблонов Яндекс Тег Менеджера есть еще один схожий по своему функционалу и назначению тег. Это Hello World. Шаблон отправляет в консоль сообщение Hello world и подходит для проверки подключения Яндекс Тег Менеджера. Сообщение можно изменить под нужды проекта.

Шаблоны тегов в Яндекс Тег Менеджере создаются с помощью конструктора шаблонов и выполняется в изолированный/безопасной среде JavaScript (Sandboxed JavaScript). Изолированный JavaScript - это облегченная версия языка JavaScript, которая обеспечивает безопасное выполнение пользовательского кода в шаблонах тегов. Он работает в изолированной среде, блокируя доступ к глобальным объектам вроде window или document и ограничивая некоторые функции языка.

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

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

• добавить тег Мини дебагер триггеров и переменных;
• использовать в режиме предварительного просмотра _ym_debug=2;

Давайте рассмотрим каждый способ подробнее.

Шаблон тега “Мини дебагер триггеров и переменных”

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

Предположим, вы настроили отслеживание кликов по кнопкам на сайте - указали в триггере дополнительное условие активации на конкретный элемент, создали цель в интерфейсе Яндекс Метрики и добавили тег типа Яндекс Метрика. Как теперь проверить, что JS-событие отправляется в Яндекс Метрику?

Для этого нам нужен мини дебагер. Перейдите в раздел Теги и нажмите Добавить тег:

В открывшемся окне в Шаблон тега из выпадающего списка выберите Мини дебагер триггеров и переменных. Если его в списке нет, вероятно, вы впервые используете данный шаблон тега. Тогда вам необходимо сначала выбрать Шаблоны из каталога:

Этот шаблон предназначен для временной отладки отработки триггеров и переменных в контейнере Яндекс Тег Менеджера. Он позволяет безопасно выводить значения в консоль браузера, не влияя на остальной код.

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

У этого шаблона всего две настройки (помимо названия):

1. добавление триггера;
2. поле для ввода какого-то значения вручную (например, текста об успешно отправленном событии) или указания переменной, чтобы в консоли выводилось ее значение, если оно изменяется во времени динамически.

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

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

В Яндекс Тег Менеджере вы можете ссылаться на переменные в триггерах, тегах и других переменных с помощью ввода конструкции {{ и выбора соответствующей переменной из выпадающего списка.

В мини дебагере есть поле Переменная (обязательное!), куда вы можете вписать свой собственный текст, который будет отображаться в консоли после срабатывания:

А также сослаться на другую переменную, чтобы в консоли выводилось ее значение, если оно изменяется во времени динамически. Это особенно актуально, если вы настраиваете какое-нибудь специальное событие с использованием уровня данных (dataLayer), и значение в переменной уровня данных может принимать разные значения, в зависимости от выбора пользователя. И тогда в поле Переменная вы можете указать эту переменную, чтобы при совершении события получить ее значение в консоли:

Примечание: тег мини дебагера работает только в режиме отладки, а выводимое значение в консоли должно быть сериализуемым (примитив или объект/массив).

Давайте сначала протестируем обычный текст. В качестве примера в поле Переменная я просто напишу текст Событие успешно отправлено, чтобы продемонстрировать работу тега.

Сохраните тег. В результате в вашем контейнере Yandex Tag Manager должно отображаться как минимум два тега с одним и тем же триггером активации. Один тег - с реальными настройками и передачей данных в Яндекс Метрику или другой аналитический/рекламный сервис, а другой - тег отладки, мини дебагер.

После этого нажмите на кнопку Предварительный просмотр и дождитесь компиляции ссылки.

Как только это произойдет, нажмите на кнопку Открыть предварительный просмотр:

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

В отдельном окне откроется ваш сайт, а в адресной строке браузера в URL-ссылке будет добавлен специальный параметр _ytm_preview. Поскольку мы с вами создали тег мини дебагера триггеров и переменных, который выводит результат в консоли, нам необходимо открыть ее. Сделать это можно точно таким же образом, что и прежде, когда мы исследовали HTML-элементы на странице на вкладке Elements. Только теперь нам нужна вкладка Console:

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

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

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

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

Тогда в консоли разработчика вы должны увидеть соответствующее значение:

В шаблоне тега отладки вы можете комбинировать текст и отсылку к переменным, например, вот так (для встроенных переменных из категории Клики - Click Element, Click Classes, Click ID, Click Text и Click URL):

И результат отладки в консоли разработчика после клика по кнопке:

В официальной документации Яндекс Тег Менеджера приведено несколько примеров для мини дебагера триггеров и переменных.

Отладка кликов по кнопке с определенным текстом

• Зачем: проверить, правильно ли отслеживаются клики по кнопке;
• Триггер: тип триггера Клики - Все элементы;
• Условия активации триггера: Некоторые события;
• Активировать триггер при наступлении события и выполнении всех этих условий: Click text - равно - Оформить заказ;
• Переменная: {{ Click Text }};
• Сообщение в консоли: Оформить заказ.

Отладка работы формы

• Зачем: проверить, какие формы отправляются и какие идентификаторы доступны;
• Триггер: тип триггера Отправка формы;
• Условия активации триггера: Все события;
• Переменная: Идентификатор формы - {{ Form ID }}, URL формы - {{ Form URL }};
• Сообщение в консоли (пример): Идентификатор формы - 42, URL формы - https://site.ru/form/.

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

Данный способ отладки триггеров и переменных с помощью шаблона тега мини дебагера является универсальным для различных отслеживаний и тегов. Однако если вам необходимо проверить корректность передачи данных только в Яндекс Метрику (например, какого-нибудь JavaScript-события), то можно использовать и другой способ отладки.

Отладка JS-событий с помощью _ym_debug=2

В Яндекс Метрике есть свой собственный отладчик. Он помогает проверить, какие данные собирает счетчик Метрики, а так же правильно ли отслеживаются цели, события электронной коммерции и данные по контентной аналитике.

Вы можете использовать его вместе с режимом предварительного просмотра Яндекс Тег Менеджера для отслеживания любых JavaScript-событий. Для этого просто добавьте конструкцию _ym_debug=2 после параметра _ytm_preview через &, чтобы получилось так:

Примечание: перед тем, как активировать отладчик Метрики, выполните все нужные настройки и отслеживания в Тег Менеджере - создайте триггер, JS-событие в интерфейсе Метрики и тег типа Яндекс Метрика.

Вы можете сделать это даже в режиме Инкогнито, после компиляции ссылки для режима предварительного просмотра ЯТМ. Внизу страницы появится значок . Нажмите на него, чтобы открыть панель отладки. Перейдите на вкладку Events и выполните то действие, которое вы проверяете/отслеживаете. Если вы все настроили корректно, то на шкале событий вы увидите достижение JS-цели:

Конечно же, благодаря шаблону тега Мини дебагер триггеров и переменных и консоли разработчика мы можем получить больше информации о том, какие значения принимают переменные в тот или иной момент времени, почему не сработало событие и не активировался тег, и при желании внести правки. _ym_debug=2 нам таких детальных сведений не даст. Он лишь покажет или не покажет наше событие без каких-либо детальных сведений.

Но если вам требуется проверить только отправку данных в Яндекс Метрику по настроенным JavaScript-событиям, то использование отладчика Метрики - лучшее решение!

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

• Конверсии;
• Параметры событий и Параметры целей;
• выбрав любой стандартный отчет и созданную цель.