Яндекс Тег Менеджер — обзор от экспертов + инструкция по установке пикселя

Яндекс в июне выкатил свой Тег Менеджер — бесплатное решение, с которым можно оптимизировать работу со скриптами на сайте и ускорить настройку событий и целей. И всё — без разработчика.

Сергей Захарченко руководитель агентства сквозной аналитики Dopamine Analytics

Это событие, которого российские digital-специалисты ждали уже несколько лет.

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

1. Яков Осипенков подготовил серию уроков.

2. Полина Бондарева запустила курс.

3. Яндекс Реклама готовит вебинар по инструменту, он пройдет 1 июля.

4. Никита Кравченко запланировал вебинар на середину июля.

Мы же решили разобрать базу: что вообще такое менеджеры тегов, кому точно нужно учиться работе с ними и как освоить решение Яндекса.

В общем, ответить на вопрос digital-специалистов: нужно ли мне осваивать Яндекс Тег Менеджер?

• Зачем вообще нужны менеджеры тегов

• Главная причина освоить Яндекс Тег Менеджер

• Что из себя представляет инструмент

• Как установить Яндекс Тег Менеджер

• Интерфейс Яндекс Тег Менеджера — устанавливаем пиксель ВКонтакте

• Что еще нужно знать новичкам и специалистам Google Tag Manager

Зачем вообще нужны менеджеры тегов

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

• систему аналитики;

• пиксель соцсети;

• код рекламной системы;

• код коллтрекинга.

Это можно сделать и без менеджера тегов — но тогда понадобится помощь разработчика. А с инструментом можно сделать всё самостоятельно и, что важно, куда быстрее.

Сергей Захарченко руководитель агентства сквозной аналитики Dopamine Analytics

Представьте ситуацию: вам нужно установить на сайт новый пиксель VK Рекламы для ретаргетинга. В обычных условиях это означает поход к разработчикам, объяснение задачи, ожидание релиза, тестирование. На всё уйдет минимум неделя, а то и больше.

Тег-менеджеры решают эту проблему кардинально. Google Tag Manager, Matomo Tag Manager, Tealium и теперь Яндекс Тег Менеджер — все эти сервисы позволяют digital-специалистам самостоятельно управлять скриптами на сайте без привлечения IT-команды.

То есть Яндекс Тег Менеджер — еще один менеджер тегов. Тогда почему это настолько долгожданное решение?

Главная причина освоить Яндекс Тег Менеджер

Потому что использование зарубежных решений усложняется. Например, теперь об использовании Google Tag Manager нужно предупреждать Роскомнадзор (в рамках правил о трансграничной передаче персданных на территорию иностранного государства). Иначе — штраф.

Сергей Филатов ведущий аналитик Dopamine Analytics

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

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

Что ж, значит, давайте осваивать инструмент.

Что из себя представляет Яндекс Тег Менеджер

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

Сергей Захарченко руководитель агентства сквозной аналитики Dopamine Analytics

Архитектура любого тег-менеджера:

1. Тег — это код, который должен выполниться на сайте. Например, пиксель VK Рекламы или событие для Яндекс Метрики — это теги.

2. Триггер — условие срабатывания тега. Например:

   1. клик по кнопке «Купить»;

   2. загрузка определенной страницы;

   3. достижение пользователем определенного элемента на странице и пр.

3. Переменная — значение, которое может передаваться в теги. Это может быть:

   1. ID товара;

   2. сумма покупки;

   3. категория страницы или любые другие динамические данные.

Разберем на примере. Представьте, что вы хотите подключить к сайту Вариокуб (чтобы провести А/Б-тест рекламных блоков на сайте). Вам нужно в менеджере тегов:

1. Добавить тег — код сервиса (в случае с Вариокубом можно использовать готовый шаблон тега).

2. Задать триггер — событие, которое будет запускать работу тега. К примеру, триггер «Просмотры страницы», чтобы тег срабатывал после просмотра каждой страницы сайта. Кстати, можно задать несколько триггеров.

3. Добавить переменные — условия, при которых будет срабатывать триггер. Например, Page URL — чтобы тег активировался только на конкретных страницах.

Установка скрипта займет несколько минут.

Как установить Яндекс Тег Менеджер

Яндекс Тег Менеджер — инструмент в интерфейсе Метрики. Поэтому процесс зависит от того, установлена ли у вас Метрика на сайте или нет.

Сергей Филатов ведущий аналитик Dopamine Analytics

Если у вас уже установлена Яндекс Метрика, достаточно активировать функционал менеджера тегов в настройках существующего счетчика Метрики.

Источник: скриншот интерфейса Метрики

Источник: скриншот интерфейса Метрики

Важный момент. Активируйте опцию «Пользовательский HTML». Это позволит установить на сайте любой скрипт — даже тот, которого нет в каталоге шаблонов Яндекс Тег Менеджера.

Если Метрики нет или используется устаревшая версия, то потребуется помощь разработчиков — им нужно будет разместить новый код счетчика на всех страницах сайта.

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

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

Интерфейс Яндекс Тег Менеджера — на примере установки пикселя ВКонтакте

Команда Dopamine Analytics предложила ознакомиться с интерфейсом инструмента на практике — на примере установки пикселя VK Рекламы на сайт. Эксперты разобрали процесс пошагово со скриншотами. Приводим инструкцию ниже.

Шаг 1. Заходим в раздел «Тег Менеджер» в Яндекс Метрике — попадаем на главную страницу с обзором активности.

Основная работа происходит в трех разделах:

• теги;

• триггеры;

• переменные.

Шаг 2. Создаем тег. Переходим в раздел «Теги» и создаем новый.

В настройках указываем название и выбираем тип «Пользовательский HTML».

Вставляем код пикселя VK Рекламы и сохраняем.

Примечание редакции. Некоторые скрипты не обязательно добавлять через тег «Пользовательский HTML». В Яндекс Тег Менеджере есть готовые шаблоны — чтобы быстро запускать теги, не создавая их с нуля. Сейчас доступны следующие:

• Яндекс Метрики;

• Яндекс Взгляда;

• Вариокуба;

• Calltouch;

• Flocktory;

• Admon.

На этом этапе тег создан, но он еще не активен — нужно настроить триггер.

Шаг 3. Создаем триггер. В Яндекс Тег Менеджере пока нельзя создать новый триггер в момент редактирования тега. Поэтому переходим в раздел «Триггеры» и создаем здесь.

Создаем триггер «Все страницы сайта» с типом «Просмотр страницы».

С учетом того, что пиксель VK Рекламы должен срабатывать на каждой странице сайта, оставляем условие активации «Все события» и нажимаем «Сохранить».

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

Шаг 4. Связываем тег и триггер. Возвращаемся к настройкам тега и добавляем созданный триггер.

Теперь тег готов к работе.

Сергей Захарченко руководитель агентства сквозной аналитики Dopamine Analytics

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

Шаг 5. Публикуем изменения. Нажимаем «Опубликовать».

Добавляем комментарий к версии и снова нажимаем «Опубликовать».

Ждем подтверждения.

Готово! Пиксель VK Рекламы работает на вашем сайте.

Что еще нужно знать: новичкам и специалистам Google Tag Manager

Узнали у популяризатора веб-аналитики Якова Осипенкова.

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

Яков Осипенков популяризатор веб-аналитики, автор блога

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

1. Привыкнуть к интерфейсу.

2. Разобраться в работе переменных, триггеров и тегов.

3. Уделить особое внимание CSS-селекторам, так как без них сложно будет задавать дополнительные правила срабатывания для триггеров.

4. Погрузиться в тему HTML, CSS и JavaScript. И чтобы аббревиатуры DOM и BOM не были для вас чем-то страшным.

Если вы ранее работали в Google Tag Manager, то невольно захотите сравнить его с решением Яндекса. Яков Осипенков выделил ключевые моменты.

Яков Осипенков популяризатор веб-аналитики, автор блога

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

Перенос настроек из Google Tag Manager в Яндекс Тег Менеджер довольно прост. Однако из-за ограничений решения мы не можем повторить полностью все настройки, которые уже были в Google Tag Manager.

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

Тем не менее главная причина, по которой стоит осваивать инструмент, остается актуальна.

Яков Осипенков популяризатор веб-аналитики, автор блога

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

В общем, теперь у нас есть не просто еще одна система управления тегами, а реальная альтернатива:

• либо продолжать работать с Google Tag Manager и всей экосистемой Google (несмотря на текущую нестабильность и неопределенность, ограничения, штраф РКН и т. д.);

• либо сделать выбор в пользу стека технологий от Яндекса (Яндекс Метрика, Яндекс Директ, Яндекс Тег Менеджер, Yandex DataLens и другие сервисы).