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

В Яндекс Тег Менеджере можно настроить многое без кода: передавать события, читать параметры страницы, работать с cookie, dataLayer и DOM-элементами. Для базовых сценариев обычно хватает встроенных шаблонов.

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

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

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

В этой статье на конкретном примере покажем, как создать свой шаблон переменной в Яндекс Тег Менеджере.

Что такое пользовательские переменные

Пользовательская переменная — это собственная логика, оформленная как переиспользуемый компонент с понятными настройками.

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

1. Выберите шаблон.
2. Заполните параметры, если они нужны.
3. Используйте переменную в тегах и триггерах.

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

Чем отличается ручная настройка от пользовательской переменной

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

Какие задачи можно решать с помощью пользовательских переменных

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

Например:

• Счётчик просмотров страниц за сессию. Считает, сколько страниц просмотрел пользователь, хранит значение между переходами и сбрасывает его после периода неактивности.
• First-touch UTM. Сохраняет UTM-метку первого визита и не перезаписывает её при следующих переходах из других каналов.
• Время с последнего визита. Помогает определить, сколько дней прошло с предыдущего захода пользователя на сайт.
• Сегмент пользователя по поведению. Например, возвращает значение «новый», «вернувшийся», «активный» или «случайный» на основе нескольких условий.
• Источник трафика. Определяет тип источника: organic, social, direct или paid — и возвращает готовое значение для тегов и триггеров.

Как создать шаблон переменной

Чтобы создать шаблон, откройте в боковом меню Яндекс Тег Менеджера раздел «Шаблоны» и нажмите «+ Шаблон переменной».

После этого откроется редактор шаблона. В нём есть несколько основных вкладок.

«Информация»
Здесь указываются название и описание шаблона. Описание особенно важно, если вы планируете опубликовать шаблон в каталоге: по нему другие пользователи будут понимать, что делает шаблон и когда его стоит использовать.

«Поля»
В этой вкладке задаются параметры, которые пользователь заполняет при создании переменной. Например, для шаблона Cookie Value можно добавить поле «Имя cookie». Для UTM-шаблона — выпадающий список с параметрами utm_source, utm_medium, utm_campaign и другими.

Если шаблон работает без дополнительных настроек, данные можно не заполнять.

«Код»
Здесь описывается логика работы шаблона. Код выполняется в песочнице Яндекс Тег Менеджера, поэтому у него есть ограничения и отдельный набор доступных API.

«Разрешения»
В этой вкладке нужно указать, к каким ресурсам браузера обращается шаблон — например, к localStorage, cookie или DOM-элементам. Если разрешение не выдано явно, доступ будет запрещён.

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

Что важно учитывать при работе с кодом

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

Например, вместо стандартного обращения к отдельным объектам могут понадобиться специальные API через require. Кроме того, важно учитывать ограничения линтера*: например, использовать let и const, а не var.

Отдельное внимание стоит уделить разрешениям. Если шаблон читает или записывает данные в localStorage, нужно заранее указать конкретные ключи. Wildcard-значения вроде * не подойдут.

Например, если счётчик просмотров хранится в ключе _ytm_page_views, именно этот ключ нужно добавить в разрешения.

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

* Линтер — это инструмент для анализа исходного кода ПО, который помогает обнаруживать проблемы, ошибки в структуре и другие недочёты.

Кейс: шаблон счётчика просмотров страниц

Агентство Dopamine Analytics успешно протестировало настройку шаблона переменной для создания счётчика просмотров страниц.

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

Для этого создали шаблон переменной «Счётчик просмотров страниц».

Он делает три вещи:

1. Считает количество просмотренных страниц за сессию.
2. Хранит значение в localStorage.
3. Сбрасывает счётчик после 30 минут неактивности.

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

После создания переменной её можно использовать в тегах и триггерах так же, как любую другую переменную.

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

Для этого сначала добавили переменную из каталога шаблонов в контейнер:

После сохранения переменная появилась в общем списке. Далее создали триггер с новой переменной:

• Тип: просмотр страницы
• Условие: переменная «Счётчик просмотров» больше 3

Чтобы отметить вовлечённого пользователя после пяти просмотров:

• Тип: просмотр страницы
• Условие: переменная «Счётчик просмотров» больше 5

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

Зачем публиковать шаблон в каталоге

Если шаблон полезен не только в одном проекте, его можно опубликовать в каталоге Яндекс Тег Менеджера.

Для этого:

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

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

Какие ещё шаблоны могут быть полезны

Кроме счётчика просмотров, в шаблоны можно вынести и другие повторяющиеся сценарии.

Например:

• Тип устройства. Возвращает mobile, tablet или desktop, чтобы использовать это значение в условиях тегов.
• Домен реферера. Извлекает чистый домен из document.referrer для фильтрации трафика по площадкам.
• Источник трафика. Определяет канал перехода: organic, social, direct или paid.
• First-touch UTM. Сохраняет UTM-метку первого визита для атрибуции.
• Время с последнего визита. Помогает показывать разные сообщения новым и вернувшимся пользователям.

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

Выводы

Встроенные переменные в Яндекс Тег Менеджере помогают получать данные из cookie, URL, dataLayer и DOM-элементов.

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

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

Проверь себя