Тег Менеджер

Обзор Тег Менеджера

Андата Тег Менеджер — это no-code решение для управления пользовательскими тегами и разметки frontend и backend событий.

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

Что можно делать с помощью Андата Тег:

1) Разметить backend и frontend события и отправить их в системы аналитики вместе с любыми пользовательскими параметрами (Andata Analytics, Google Analytics, Яндекс Метрика)

2) Стандартизировать и классифицировать данные в момент их сбора благодаря настраиваемым полям для сбора данных

3) Обогащать ссылки по своей схеме обогащения через удобный редактор

4) Строить собственные маркетинговые workflow, триггерные сценарии

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

Начало работы: Размещение контейнера и трекинг кода

Как разместить код Андата Тег Менеджера на сайте

Для установки кода нужно зайти в личный кабинет Андата, в раздел Tag manager (https://lk.andata.ru/tagmanager) и выбрать необходимый контейнер.

Далее перейдите по ссылке "Код для вставки на сайт", затем скопируйте и вставьте код на все страницы сайта перед закрывающим тегом </body>.

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

В первом автоматически созданном контейнере трекинг код Андата установлен по умолчанию, добавлять его во второй раз не нужно. Если вы создаете новые контейнеры, то трекинг код необходимо будет добавить. Для этого перейдите в раздел Теги, нажмите Создать и задайте название тега, например “Трекинг код Андата” или "andataTracking". Далее перейдите к выбору типа тега. Нужно выбрать тег типа Andata Tracking :

Далее добавьте триггер, по которому будет срабатывать тег. В данном случае нужно добавить специально созданный для этого триггер - Загрузка АТМ.

Для этого внизу страницы настройки тега перейдите по ссылке Выбрать триггер. В правом верхнем углу нажмите +Создать триггер для добавления нового триггера.

В окне добавления триггера выберите тип триггера - “Загрузка АТМ”. Задайте понятное название триггера (напр., Загрузка АТМ) и сохраните триггер.
Отметьте созданный триггер в чекбоксе и сохраните настройку. В итоге вы будете возвращены на страницу настройки Тега, где вы увидите, что в разделе Триггеры появился созданный вами триггер.

Нажмите “Создать”, чтобы сохранить настройки тега.

Для завершения настроек опубликуйте контейнер, кликнув на кнопку "Опубликовать" в верхней части.

Размещение контейнера в популярных CMS

Инструкция по добавлению кода на сайт Wordpress

В админ панели в левом меню нужно перейти в раздел Внешний вид - Редактор тем
Далее в правом меню в Файлах темы выбрать footer.php и в этом файле перед закрытием тега </body> добавить код Андаты, после чего обновить файл:
Код контейнера Андата находится в разделе Tag Manager, далее необходимо перейти в актуальный контейнер и при клике на на кнопку "Код для вставки на сайт" появится код:

Инструкция по добавлению кода на сайт на Tilda

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

Важно: Перепубликуйте все страницы сайта, чтобы код был добавлен.

Инструкция по добавлению кода на сайты на ModX Revolution

Создайте новый чанк и скопируйте код контейнера в поле Код чанка (html). Имя и описание чанка можно выбрать произвольно.

Сохраните чанк.
Откройте шаблон (шаблоны), вставьте код чанка между тегами <body> </body> и сохраните изменения.

Компоненты: поля, переменные, триггеры и теги

Тег Менеджер Андаты использует следующие компоненты для управления конфигурацией и активации тегов:

  • Поля - необходимы для указания типа данных, которые будут отправляться в коллектор SnowPlow, например, будут ли это строковые значения или цифры.

  • Переменные - это контейнеры для хранения меняющихся значений, например, номера заказа, цены товара, даты и др.

  • Триггеры - это некие условия, при наступлении которых срабатывает тег, триггеры прослушивают события определенного типа, например клики, отправки формы или загрузки страницы.

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

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

Компоненты: поля, типы полей

Поля

Поля можно создать двумя способами: через одноименную вкладку в верхнем меню:
или в процессе создания тега - при выборе типа тега “andataEvent” (в некоторых случаях - trackingEvent) станет доступно поле Пользовательские параметры, необходимо кликнуть по кнопке "+ Значение свойства" и в левом поле кликнуть по самому полю, раскроется меню. Здесь будут отражаться все созданные Вами поля.
При создании поля необходимо указать его название, обозначение и описание поля добавляется при необходимости. Также можно указать использовать ли данное поле как аналитическое или для расчета паспорта:
При включении признака "Использовать для построения аналитики" поле будет доступно для использования в фильтрах и декомпозиции в отчетах аналитики.

Признак "Использовать поле для расчета паспорта пользователя" означает, что значения этого поля будут добавлены в модель объединения разрозненных цифровых идентификаторов для построения единого Цифрового профиля (подробнее о Цифровом паспорте можно прочитать тут).

Типы полей

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

String - используется в случаях, когда необходимо передать строковое значение, например, наименование товара, заголовок статьи в блоге.

Number - используется в случаях отправки числовых значений, например, суммы заказа.

Date - используется для передачи даты и времени в формате ISO 8601, компонент времени в UTC0 (Zero offset), например, 2023-07-13T09:23:55.910Z.

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

Object - объект, используется для хранения и передачи набора разнотипных элементов. Внутри этого поля также нужно будет обозначить, какие типы полей будут передаваться внутри массива. Необходимо указать все передаваемые типы полей.

Важно! После публикации контейнера созданные поля удалить будет уже невозможно, т.к. они определяют валидационную json-схему. Поэтому к созданию полей необходимо подходить очень внимательно. До публикации созданные поля удалить можно.

Компоненты: переменные, типы переменных

Переменные

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

При выборе типа тега “Andata Event” (в некоторых случаях - trackingEvent) станет доступно поле Пользовательские параметры, необходимо кликнуть по кнопке "+ Значение свойства". В поле Значение свойств нужно указать переменную, для этого начните вводить две фигурные скобки {{ , автоматически появится раскрывающийся список. Здесь уже отражаются предустановленные переменные, которые доступны для выбора. В данном случае, нажимаем на Добавить переменную:
В обоих случаях откроется окно создания переменной, где необходимо указать название этой переменной, добавить описание при необходимости и выбрать тип переменной:

Типы переменных

Пользовательская - используется в случаях добавления собственного кода, например, если необходимо изъять значения из какого-либо атрибута или тега.

Переменная уровня данных - для изъятия данных из уровня данных, например, из Data Layer.

Переменная из URL - для изъятия данных из URL-запроса, возможны следующие значения: Полный URL, Протокол, Имя хоста (домен), Порт, Путь, Запрос, Фрагмент.

Переменная из URL query - для изъятия GET-параметра из URL-запроса, например, значение метки utm_term.

Переменная из Cookie - для изъятия информации из cookies-файлов, например, значение из cookies _ym_uid (CliendID Яндекс.Метрики).

Переменная из RegExp - используется в случаях, когда необходимо считывать значения из какой-либо переменной с помощью регулярного выражения, например, из URL ссылки изъять значение ID заказа.

Значение из поля формы - для изъятия информации из полей формы на сайте.

Стек - используется для отслеживания последовательности изменений данных, например, для сохранения истории UTM-параметров, просмотренных товаров или смены страниц.

Объект - позволяет хранить набор переменных как один JS объект, где поля объекта - некоторые названия, а значения - константы либо переменные.

Компоненты: триггеры, типы триггеров

Триггеры

Триггеры необходимы для определения условий, при которых сработает тот или иной тег.

Создать триггеры можно двумя способами: первый - через одноименную вкладку:
Второй способ - в самом теге при выборе триггера:
Откроется окно с созданными ранее триггерами, далее в верхнем правом углу необходимо нажать на кнопку "Создать триггер":
Во всех случаях откроется окно для создания нового триггера. Необходимо дать название, описание (при необходимости) и выбрать тип триггера:

Типы триггеров

Просмотр страницы - используется в случаях, когда необходимо отследить посещение какой-то определенной страницы или страниц (например, страницы каталога). В поле “Задержка в милисекундах” можно указать, через какое время триггер должен сработать. В поле “Страница, на которой применять” указываем url конкретной страницы или общую часть url для определенного блока страниц. Также можно использовать регулярные выражения, для этого необходимо установить переключатель “Регулярное выражение” в положение Включен. Например, для отслеживания просмотра страниц блога укажем https://site.ru/blog и переключатели “Строгое совпадение” и “Регулярное выражение” оставим в выключенном положении.


Загрузка АТМ - используется для тега с типом Andata Tracking. Данный триггер позволяет запускать трекинг код при загрузке АТМ, а не при загрузке страницы. Таким образом, при переходе со страницы на страницу трекинг код уже будет отслеживать события. Особенно это актуально для SPA-сайтов.

Объединение триггеров через "И" - с помощью данного триггера можно объединить условием И ранее созданные триггеры (по умолчанию при выборе нескольких триггеров в теге используется оператор ИЛИ). Данный триггер будет срабатывать при достижении всех указанных в нем триггеров. Например, просмотр определенной страницы и клик по заданной кнопке.

Клик по заданному селектору - используется в случаях, когда необходимо отследить клики по разным элементам на сайте (клик по ссылкам или по кнопкам, например клик Добавить в корзину). Вы можете вставить селектор, скопированный из Инструментов разработчика вашего браузера. Кроме того, можно использовать стандартное для CSS обращение к определенным селекторам. Например, чтобы обратиться ко всем элементам с одинаковым именем класса myclassмы укажем селектор .myclass. Перейдите к подробной документации по CSS-селекторам, чтобы узнать больше.

Mousedown по заданному селектору - бывают случаи, когда клик по элементу на сайте не срабатывает ввиду разных причин, тогда можно использовать тип Mousedown по заданному селектору, также отслеживает клики по элементам.

Нажатие на клавишу по заданному селектору - используется в случаях, когда необходимо отследить действия в текстовом поле, которое заполняет пользователь с помощью клавиатуры, например, заполнение поля Имя или телефон в форме обратной связи
Во всех трех типах триггера DOM селектор нужно выбирать тот, что явно определит нужный нам элемент, это может быть ID или класс элемента, а также различные атрибуты, например, href.

Пользовательское событие - предназначено для событий, которым не подходят стандартные методы. Например, в момент отправки формы на сайте возникает событие FormPopupSended, это не стандартное название, поэтому можем использовать его в качестве триггера.

Отправка формы - используется для отслеживания отправки форм на сайте.

В процентах от высоты страницы - используется для отслеживания прокрутки страницы на определенный процент, например, скроллинг 50% страницы.

До попадания элемента во viewport - используется в случаях, когда нужно отследить скроллинг до определенного элемента на странице (например, скроллинг до формы запроса презентации).

Компоненты: теги, типы тегов

Теги

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

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

Создание нового тега осуществляется через одноименную вкладку:
Необходимо указать название тега (произвольное, но понятное) и его описание (необязательное поле).
Далее есть два поля, которые также заполняются при необходимости.

Поле “Наследуется от” предназначено для создания нескольких тегов с одинаковым набором передаваемых пользовательских параметров. Перед выбором родительского тега необходимо выбрать Тип тега. Таким образом, вместе с событием будут передаваться параметры из тега, выбранного в поле “Наследуется от”. Например, создаем тег Клиентские реквизиты, в котором укажем необходимые нам для передачи пользовательские параметры (имя клиента, номер телефона и почта). В других тегах нам уже не нужно будет каждый раз выбирать одни и те же пользовательские параметры, достаточно указать тег Клиентские реквизиты в поле Наследуется от.

Поле “Зависит от” предназначено для указания тега, инициализации которого необходимо дождаться. Например, нам нужно, чтобы событие клик по кнопке срабатывало только после того, как пользователь просмотрит 50% страницы. Для этого мы создаем тег Скроллинг 50%, далее создаем тег Клик по кнопке и в поле “Зависит от” добавляет созданный ранее тег Скроллинг 50%. В результате, если пользователь проскроллил только 20% страницы и кликнул по кнопке, событие не отправится.

Типы тегов

В Тег Менеджере существуют следующие типы тегов:

Пользовательский HTML код

Используется в случаях, когда ни один из встроенных типов тегов не подходит и необходимо использовать кастомный код. При добавлении JavaScript в поле HTML-код всегда размещайте его внутри тегов <script> </script>.

При необходимости в поле Селектор для вставки можно добавить css-селектор элемента, в который необходимо добавить пользовательский html-код.

Push to Stack

Запись объекта в стек. Может использоваться для реализации хранения истории изменения какого-то объекта. К примеру, есть переменная типа Object, в которой поля хранят другие переменные (данные UTM разметки или, другой пример, признаки текущей страницы (url, title, category и т.д.)) и необходимо отслеживать историю изменения значений в данном объекте. В этом случае можно использовать данный тип тега, чтобы добавлять значения в стек (реализованный в JS в виде массива). При этом значения в стек будут добавляться только в том случае, если хотя бы одно из значений в объекте отличается от последнего сохраненного в этом стеке (это свойство переменной типа Stack).

Таким образом, данный тип тега позволяет по определенному событию проверить, изменился ли наш объект, и если да - то добавить его новое состояние в стек.

Инициализация переменной

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

Установить cookie из переменной

Используется в случаях, когда необходимо какую-либо переменную сохранить в cookies.

Например, если имеется два или несколько доменных имени второго уровня под одним и тем же доменным именем первого уровня (shop.site.ru и pay.site.ru), то при установке cookie “test_id” на домен site.ru, данная cookie будет доступна и на shop.site.ru, и на pay.site.ru.

При настройке необходимо дать произвольное, но понятное имя cookie, в поле Значение в двух фигурных скобках указать переменную, значение которой будет добавлено в cookie. В поле Domain нужно указать домен сайта, а в поле Path - путь, разрешенный для доступа к cookie (указывается при необходимости). Далее можно добавить срок действия этой cookie, а также включить атрибут “Secure (только для HTTPS)”, в этом случае cookie будет возвращен только при подключении SSH.

Перенаправление на страницу

Используется в случаях, когда необходимо перенаправить пользователя на другую страницу, например, по прошествии определенного времени.

Обогащение ссылок

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

Andata Event

Используется для передачи событий в Андату. Необходимо дать название событию, старайтесь давать понятные имена. При необходимости заполните блок Пользовательские параметры. Для этого нужно создать поля и переменные, которые вы хотите отправлять вместе с событием. Подробнее об этом читайте в статье «Как создавать пользовательские параметры». Также данный тип тега подразумевает возможность отправки созданных событий в Яндекс.Метрику или Google Analytics.

Tracking Event

Данный тип тега опциональный и может не отражаться в общем списке типов тега. Он аналогичен типу andataEvent, однако не передает данные в хранилище Андата. Он используется в случаях, когда необходимо передать данные по событиям с пользовательскими параметрами в Яндекс Метрику или Google Analytics. Имеет аналогичные настройки, т.е. необходимо дать название событию, добавить пользовательские параметры (подробнее об этом читайте в статье «Как создавать пользовательские параметры») и выбрать его конверсионным. Далее станут доступны настройки для передачи во внешние счетчики.

Показ баннера

Выбирает баннер из заданной группы по заданной стратегии и показывает его внутри HTML-элемента, определяемого по заданному селектору.

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

Контекст представляет собой предустановленную переменную {{context}}, которая представляет из себя Object со следующими полями:
Селектор блока, в котором показывать баннер - указываем ID, класс или иной селектор, который явно определит место показа баннера на странице.

Группа баннеров, из которой будут показываться баннеры выбирается из групп, которые создаются в разделе Баннеры.

Стратегия, по которой определяем как выбирать баннеры из группы. На данный момент доступна одна стратегия - Случайный перебор.

HTML баннер (не обязательный) - здесь указывается обрамляющий html-код, в котором Tag Manager будет показывать баннер.

Ретранслятор событий JivoSite

Тег генерирует события, совпадающие с названиями функций, которые вызывает виджет JivoSite.
Для проведения каких-либо операций в Тег Менеджере, если произошло любое из этих событий:

1) необходимо создать тег "Ретранслятор событий JivoSite" , триггером выбрать "pageView" (Просмотр страницы), чтобы Тег Менеджер смог подписаться на все события JivoSite.

2) необходимо создать триггер с типом "Пользовательское событие" и названием события, равному тому, на которое мы хотим подписаться. К примеру, если мы хотим отследить загрузку jivoSite на сайте, мы можем подписаться на событие jivo_onLoadCallback.

3) Создать тег, который подписан на пользовательское событие jivo_onLoadCallback, который будет выполнять необходимое клиенту действие. Он будет выполнен, как только это событие произойдет.

Yandex Metrika

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

Google Analytics

Подключает счетчик Google Analytics на страницу. Требует указания ID счетчика.

Andata Tracking

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

Рабочий процесс

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

То есть, к примеру, есть бизнес-процесс (линейный в нашем случае, для простоты понимания), в котором посетитель может принимать следующие состояния: new - клиент только пришел на сайт, до этого на нем не был; optimization - клиент прочитал статью по оптимизации бюджета; click_banner - клиент кликнул по баннеру по услуге оптимизации; registration - клиент зарегистрировался.

Тогда мы можем описать бизнес-процесс следующими параметрами:

1) Название рабочего процесса: Optimization (латиницей, без пробелов, используется для создания объекта в LocalStorage для хранения состояний текущего бизнес-процесса)

2) Состояние машины по умолчанию: new

3) Таблица переходов состояний:

В данном процессе ветвлений не подразумевается, поэтому если клиент придет на сайт и сразу уйдет на регистрацию, то у него так и останется состояние new, но если он после того, как пришел на сайт, перейдет на статью по оптимизации, и к примеру, дочитает ее до 75% (то на это событие можно будет повесить andataEvent с названием optimization) и он перейдет в состояние optimization (при этом мы можем поймать пользовательское событие и показать баннер в конце страницы).И если клиент кликнет по баннеру, то произойдет переключение в состояние clickbannerevent, при этом клиент перейдет на страницу регистрации и если он завершит регистрацию, то andataEvent registration, фиксирующий это событие, переведет пользователя в состояние done.

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

После выбора типа необходимо активировать тег. Для этого установите переключатель в положение Включен. И последним шагом будет добавление необходимого триггера.

A/B тестирование

Тег принимает 2 параметра:
  1. Уникальный идентификатор компании, для которой проводится АБ тестирование (уникальность нужна для того, чтобы проводить несколько АБ тестов одновременно; посетителю будут устанавливаться параметры для каждого теста свои)
  2. Процент трафика, отправляемого на АБ тестирование. Если считать весь трафик на сайте за 100%, то тестирование можно проводить на определенной выборке, например, на половине посетителей сайта, для это необходимо указать 50%.
Тег работает следующим образом: в зависимости от того, в какую группу попал посетитель, генерируются соответствующие события и в localStorage сохраняется признак группы:
Посетители между группами А и Б всегда распределяются в пропорции 50/50. Далее можно создать триггеры с типом Пользовательское событие и указать соответствующее группе название события, например, ABTestGroupA. На этот триггер можно повесить тег, который будет выполнять нужное действие, например, показывать кнопку квиза.