Подмена контента на сайте с помощью Яндекс Тег Менеджера

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

В моем блоге за последние полгода опубликовано более 20 материалов, посвященных настройке и отслеживанию событий с помощью Яндекс Тег Менеджера. В каждом из этих руководств подробно разбираются шаги настройки и методы проверки корректности внедрения. Ранее для отладки использовались шаблон тега Мини дебагер триггеров и переменных, а также режим _ym_debug=2 от Яндекс Метрики. С 20 ноября 2025 года в Яндекс Тег Менеджере появилась полноценная панель отладки, и часть описанных ранее подходов устарела. Поэтому, пожалуйста, пользуйтесь новой панелью отладки ЯТМ для проверки ваших настроек и обращайте внимание на актуальность информации в текущих статьях.

Начало

Читать еще:

• Подмена контента на сайте с помощью Google Tag Manager
• Динамическая подмена контента на сайте с помощью Google Tag Manager
• Подмена текста динамически на странице с помощью Google Tag Manager

Фактически, подмена любого контента на сайте может быть осуществлена тремя способами:

1. на стороне сервера (Server-side) - контент формируется и меняется еще до отправки ответа клиенту;
2. на стороне клиента (Client-side) - контент подменяется уже после загрузки страницы в браузере;
3. с использованием сторонних решений (сервисы A/B-тестирования и персонализации) - гибридный вариант (подмена "на лету" на уровне сети или стороннего скрипта).

Выполняя подмену на стороне сервера, вы можете управлять контентом до отправки и показа его пользователем на вашем сайте, что практически сводит к 0 ситуации, когда посетитель видит изначально оригинальный контент, а потом через мгновенье подмененный. При подмене контенте на стороне клиента, напротив, часты случаи «мигания», когда пользователь сначала видит исходный текст/блок, а затем после загрузки скрипта и изменения структуры DOM, контент резко «перепрыгивает» и становится другим.

Такой опыт реально раздражает пользователей, особенно:

• если изменения касаются заголовков, цен, кнопок, номера телефона или подмененного электронного адреса (e-mail);
• если скорость соединения низкая и скрипт грузится с задержкой;
• если блоки «пляшут» и переносят элементы интерфейса.

Серверная подмена предпочтительнее, так как контент формируется сразу в том виде, в каком должен быть показан, нет визуального артефакта и меньше вероятность, что пользователь заметит, что что-то подменялось. Но и отслеживание на стороне сервера имеет ряд недостатков - сложнее внедрять быстрые A/B-тесты или персонализацию без участия разработчиков.

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

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

Однако в базовом (бесплатном) плане Вариокуба доступно только 2 активные персонализации одновременно. До 10 - только на платном тарифе. Этого может быть недостаточно. Поэтому я хочу вам продемонстрировать бесплатный способ подмены различного контента на стороне клиента (Client-side) с использованием Яндекс Тег Менеджера.

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

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

И мы хотим подменять этот заголовок в зависимости от определенных условий. Какие условия подмены в принципе могут быть?

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

1. По источнику трафика и меткам

• UTM-метки (utm_source, utm_medium, utm_campaign, utm_term, utm_content) - если пользователь пришел с кампании utm_source=vk, показать баннер с спецпредложением;
• Реферер - можно подменять контент, если пользователь пришел с другого сайта;
• GET-параметры - параметры, которые передаются дополнительно в ссылке, могут быть триггером для подмены.

2. По географии

• Регион пользователя (страна, город, область) - используется через определение IP-адреса и геолокации;
• Язык браузера / языка сайта - например, показывать контент на русском, если navigator.language = ru;

3. По устройству и браузеру

• Тип устройства (мобильный, планшет, десктоп);
• ОС или браузер - иногда подстраивают дизайн или функционал под Safari, Android и т.д.;
• Разрешение экрана - например, показывать меньший баннер на мобильных.

Эти и другие параметры пользователя можно определять с помощью UAParser.js.

4. По поведению пользователя

• Посещенные страницы - например, если пользователь уже заходил на страницу товара, можно показывать «напоминание» или рекомендации;
• Время на сайте / глубина просмотра - чем дольше на сайте, тем более "активный" контент показываем;
• История заказов / действий - персональные рекомендации (upsell, cross-sell);

5. По времени

• Дата и время - сезонные баннеры, акции по дням недели или времени суток;
• События и праздники - Новый год, Черная пятница, местные праздники.

6. По сегментам аудитории

• Зарегистрированные vs. Незарегистрированные пользователи - разный приветственный контент;
• Платежеспособность / VIP-статус - отображение премиальных предложений;

7. По экспериментам и A/B тестам

• Случайная подмена - для тестирования разных вариантов баннера или текста;
• Сегментация по группам - 50% пользователей видят версию A, 50% - версию B.

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

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

utm_content	Заголовок на сайте	Конечный URL
zag1	Контекстная реклама от Graph Analytics	site.ru/utm_content=zag1
zag2	Веб-аналитика от Graph Analytics	site.ru/utm_content=zag2
zag3	Таргетированная реклама от Graph Analytics	site.ru/utm_content=zag3
zag4	Сквозная аналитика от Graph Analytics	site.ru/utm_content=zag4
zag5	Консультации по рекламе и аналитике	site.ru/utm_content=zag5

Например, вы сделали пост в социальной сети или разметили рекламные кампании, разбили свой товар или услугу на категории (контекстная реклама -> один заголовок, веб-аналитика -> другой заголовок и т.д.). При переходе по одной из ссылок (столбец «Конечный URL») пользователь будет видеть подмененный заголовок (из столбца «Заголовок на сайте»).

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

Последовательность действий по подмене заголовка на сайте следующая:

• в Тег Менеджере активируем Пользовательский HTML в настройках счетчика Яндекс Метрики;
• создаем встроенную переменную "Адрес страницы";
• создаем триггер;
• создаем итоговый тег.

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

Активация функции “Пользовательский HTML”

Первым делом вам необходимо активировать опцию Пользовательский HTML в настройках счетчика Яндекс Метрики.

Для этого перейдите в раздел Настройки - Счетчик:

И включите функцию Пользовательский HTML:

Пользовательский HTML в Yandex Tag Manager (YTM) - это тип тега, который позволяет добавлять на сайт произвольный HTML-код, JavaScript или другие скрипты, которые не поддерживаются стандартными тегами и которых нет в каталоге шаблонов. Код будет выполняться при срабатывании триггера, в нем также можно использовать переменные для динамической подстановки нужных значений.

Сохраните изменения.

Создание переменной “Адрес страницы”

Перейдите в Яндекс Тег Менеджер и откройте раздел Переменные.

В шаблоне переменной выберите Адрес страницы:

Задайте следующие настройки переменной:

• Название – paramURL (или любое произвольное);
• Тип компонента – Запрос;
• Ключ запроса – utm_content (тот, который вы определили для себя, может быть другим);

Сохраните переменную.

Создание триггера

Теперь перейдите в раздел Триггеры.

Выберите тип триггера - Инициализация.

Он будет активироваться только тогда, когда значение переменной utm_content определено. В противном случае если в ссылке нет параметра запроса, и оно принимает значение undefined (не определено), то контент подменяться не будет, и тег не сработает.

Укажите следующие настройки триггера:

• Название – Подмена контента с utm_content (может быть любым);
• Условие активации триггера – Некоторые события;
• Активировать триггер при наступлении события и выполнении всех этих условий - paramURL не равно undefined.

Как только вы его найдете, нажмите по нему правой кнопкой мыши и скопируйте селектор через меню Copy - Copy selector: