Найти тему
PromoPult

Динамическая подмена контента: что это и как сделать на сайте

Один из способов повысить конверсии — персонализировать посадочную страницу. Сделать это можно с помощью динамической подмены контента под характеристики пользователей. Рассказываем, что это такое и как настроить в разных сервисах.

Что такое динамический контент

Динамический контент — это контент, который подстраивается под поисковые запросы, местоположение, интересы или поведение аудитории. Опцию часто используют в рекламных кампаниях. Персонализация посадочной страницы позволяет повысить конверсию и снизить расходы на рекламу. Такую страницу еще называют мультилендингом. Это может быть как лендинг, так и отдельная страница сайта, на которую ведет объявление. Рассмотрим на примере, как это работает. Введем в строку поиска Яндекса «услуги бухгалтера удаленно» и сразу видим рекламное объявление, заголовок которого точно отвечает на запрос:

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

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

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Теперь введем в поиске «бухгалтер для ИП». Находим в рекламной выдаче этот же сайт — предложение снова точно отвечает на запрос:

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Открываем сайт и видим ту же страницу, но уже с другим заголовком:

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

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

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

А вот так — для пользователей, которые вводили запрос «английский язык для детей»:

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

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

В каких случаях нужен динамический контент

Подмена контента подойдет в таких случаях:

  • Когда продукт ищут, по-разному формулируя запросы. Например, «рольставни» и «роллеты на окна».
  • У товара разные свойства и способы применения.
  • Разные условия покупки или есть какие-то дополнительные опции. Например, у интернет-магазина дверей есть услуга установки и возможность покупки в рассрочку.
  • Клиенты могут быть из разных районов, городов или стран.

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

Увеличить лиды и продажи с сайта поможет платформа PromoPult. Здесь собраны все популярные инструменты для привлечения клиентов — SEO, контекстная и таргетированная реклама. Автоматизация сложных технических процессов, AI инструменты, подсказки и рекомендаторы позволят быстро запустить рекламу даже новичку и сразу получать конверсии. А если вы продаете на Wildberries, пользуйтесь бесплатными инструментами для селлеров — рекламным биддером, аналитикой бустера и мониторингом позиций.

Как настроить динамическую подмену контента

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

  • поисковые запросы;
  • местоположение;
  • источники перехода;
  • способы применения продукта;
  • условия покупки и другие.

Далее решают, какой контент делать динамическим. Самые конверсионные элементы на лендинге — это заголовок и подзаголовок, отражающие суть предложения, а также CTA в лид-форме («Записаться на пробный урок», «Заказать бесплатный расчет»), поэтому их подменяют чаще всего. Иногда может потребоваться замена картинки и фона для усиления визуального воздействия.

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

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

Google Tag Manager

tagmanager.google.com Особенности:

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

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

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

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

  • В разделе «Переменные» создаем переменные, которые будут извлекать данные о содержимом подменяемых элементов. Сначала создаем входную переменную с любым названием. Она будет использоваться в качестве ключа для поиска нужного варианта контента. Затем создаем переменные для разных вариантов контента.
Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷
  • Чтобы подмена срабатывала только в конкретных случаях, в разделе «Триггеры» настраиваем активацию тегов.
Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷
  • Для этого выбираем шаблон триггера. Они разделены на 4 группы, в последнем разделе есть шаблон для создания любого пользовательского события.
Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷
  • Определяем условия, при которых каждый тег должен срабатывать.
Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷
  • Создаем новый пользовательский тег. Внутри него прописываем скрипт. Он будет динамически менять контент на странице с использованием переменных и триггеров, которые мы настроили. Содержимое скрипта будет зависеть от верстки контента.
Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

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

В блоге PromoPult есть подробный гайд по работе с Google Tag Manager.

Яндекс Метрика

metrika.yandex.ru Особенности:

  • Опция работает на базе технологии Varioqub — инструмента Яндекса для A/B тестов.
  • Гибкие настройки: можно поменять практически все, в том числе текст, дизайн, размер элементов, форматы рекламных блоков и т. д.
  • Несколько способов настройки изменений, в том числе с помощью визуального редактора.
  • Желательно базовое понимание HTML, CSS и JavaScript.

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

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Затем в Метрике открываем раздел «Вариокуб» → «Персонализации».

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Создаем новую персонализацию и прописываем для нее условия:

  • Время, в течение которого она будет работать.
  • Страницы, на которых она будет работать.
  • Get-параметры.
  • Регион.
  • Тип устройства пользователя.
  • Пользовательские параметры (только на платном тарифе).

Далее выбираем тип персонализации, то есть способ, которым будем ее настраивать. Проще всего это сделать в визуальном редакторе: переходим в эту вкладку, выделяем любой элемент страницы и редактируем в специальном окошке. Доступно три режима: Basic (чтобы изменить набор свойств элемента), CSS, HTML и JS.

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Для гибкой настройки и сложных пользовательских сценариев можно использовать тип персонализации «Флаги в коде». А если нужно изменить размеры и способы отображения рекламных блоков, выбираем тип персонализации «Рекламные блоки». На скрине ниже пример изменения высоты блока из Яндекс.Справки:

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

После всех настроек тестируем страницу в разделе «Проверка изменений» → «Проверить».

Yagla

yagla.ru Особенности:

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

Стоимость:

  • Бесплатный тариф — доступен, если запускать рекламу и пополнять бюджет через сервис Yagla.
  • Платный тариф — от 2900 ₽ в месяц. Есть скидки при оплате за 3 и более месяцев.

В Yagla можно запускать рекламные кампании и настраивать посадочные страницы под разные сегменты аудитории. Сервис интегрируется с Яндекс Директом, VK Рекламой, myTarget и другими платформами. Можно создать новый рекламный кабинет или прикрепить уже действующий, в последнем случае придется оплатить тариф.

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Данные рекламных кампаний (посадочная страница, объявления, ключевые фразы) автоматически подгружаются в сервис. На их основе настраивают персонализацию страницы. Процесс состоит из 4 шагов и отображается в верхней части экрана:

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Сначала размечаем страницу. Это можно сделать в визуальном редакторе: просто выбираем мышкой элемент, который будем подменять. Есть также режим кода и продвинутый режим для более сложных изменений. Если страниц много, их можно объединить в группу и разметить по шаблону, чтобы сэкономить время.

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

На следующем этапе система сгенерирует код, его устанавливаем на сайт.

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

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

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Чтобы активировать изменения, нажимаем «Включить проект» вверху экрана.

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

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

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Personyze

www.personyze.com Особенности:

  • Огромное количество инструментов для персонализации.
  • Более 70 критериев для создания условий подмены.
  • Визуальный редактор для разметки контента.
  • Настраиваемые виджеты, которые можно встроить на страницу.
  • Прогноз результатов.
  • Подробная статистика, A/B тесты.

Стоимость:

  • бесплатный тариф — 1 домен, 3 кампании, 5000 просмотров в месяц.
  • платный тариф — от $450 в месяц.

Personyze — англоязычный сервис с огромным функционалом для персонализации. Здесь можно настраивать мультилендинги, товарные рекомендации, электронные письма с динамическим контентом, персонализацию приложений, проводить A/B тесты и многое другое. После регистрации система попросит ввести адрес сайта.

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Далее нужно разместить код сервиса на своем сайте напрямую или с помощью GTM.

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Чтобы настроить подмену контента, выбираем опцию «Таргетинг и персонализация».

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Устанавливаем правила подмены: можно использовать более 70 критериев, включая UTM-метки, источники трафика, данные CRM и многое другое. Всё настраивается в едином окне:

  • Открываем список всех правил, кликаем на кнопку «Добавить правило таргетинга».
  • Выбираем нужное правило и настраиваем, переключив бегунок напротив.
  • Слева можно смотреть прогноз результатов. Система покажет, сколько пользователей, которые посетили сайт за последние 90 минут, соответствуют указанным правилам.
Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Далее настраиваем контент, который будет подменяться. Переходим в раздел «Контент» и нажимаем «Добавить действие».

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

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

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

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

Плагин IfSo для WordPress

ru.wordpress.org/plugins/if-so Особенности:

  • Совместим с любым конструктором страниц WordPress и с WooCommerce.
  • Несколько способов настройки подмены контента.
  • Можно подменять текст, изображения, видео, элементы меню, дизайн, задавать различные правила и настраивать условия для всплывающих окон.
  • Аналитика и A/B тесты.

Стоимость: бесплатная версия с ограниченным функционалом и платная версия — от $89 за 1 домен. Если ваш сайт базируется на WordPress, используйте плагин IfSo. После его установки и активации подмену можно будет настроить несколькими способами. Первый способ подойдет для любого конструктора, который вы используете на платформе.

  • Выбираем плагин в меню и заходим в настройки.
Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷
  • Нажимаем «Создать новый триггер». В открывшемся окне выбираем условие подмены и её вариант: текст или изображение.
  • Система создаст шорткод, который нужно разместить там, где будет отображаться контент.
Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Второй способ подойдет для пользователей конструкторов Gutenberg и Elementor. Процесс настройки будет еще проще. Просто щелкаем на нужный блок/элемент, а затем в меню указываем условие для его отображения.

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

И последний способ — это размещение на странице шорткодов с динамической вставкой ключевых слов. Этот вариант можно использовать для отображения местоположения, имени пользователя, местного времени и т. д. В IfSo есть статистика, чтобы отслеживать просмотры и конверсии. Для получения более подробных данных систему можно связать с Google Analytics.

Обзор других популярных плагинов для WordPress — в этой статье.

Конструктор сайтов Tilda

tilda.cc Особенности:

  • Удобное решение для создания мультилендингов.
  • Визуальный редактор, простые настройки.
  • Доступна подмена текста и блоков. Последний вариант позволяет работать с любым элементом на странице.
  • Подменять контент можно по параметрам в URL, геопозиции и языку браузера.

Стоимость: опция доступна в платной версии Tilda, стоимость — от 500 рублей в месяц. Настроить подмену контента в «Тильде» можно путем добавления специальных блоков. Они находятся в библиотеке блоков в разделе «Другое».

  • T803 — мультилендинг: динамический текст по параметрам в URL.
  • T804 — геолендинг: динамический текст по геопозиции.
  • T809 — мультилендинг: динамическая замена блоков по параметрам в URL.
  • T810 — геолендинг: динамическая замена блоков по геопозиции.
  • T839 — мультилендинг: динамическая замена блоков, в зависимости от языка установленного в браузере посетителя.

Например, сделаем подмену заголовка по параметрам в URL. Для этого сначала добавляем ключ в формате %%любое слово%% в заголовок — эта часть текста будет меняться.

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Переходим в конец страницы, открываем библиотеку блоков и находим блок под нашу задачу — Т803 «динамический текст по параметрам в URL».

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

В открывшейся форме заполняем условия подмены:

  • Ключ — слово, которое мы добавили в заголовок, где будет меняться текст.
  • Стандартное значение — исходный текст, который будет демонстрироваться по умолчанию, если условия для подмены не выполнены.
  • URL параметр — часть адреса страницы, которая будет сигналом для подмены текста (обычно это UTM-метка).
  • Значение замены — текст, который будет отображаться, если в ссылке обнаружен нужный параметр.
Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Тестируем изменения, переходя по ссылкам с различными URL-параметрами. Если всё работает, публикуем. Чтобы настроить подмену изображений и кнопок, используем блоки для динамической подмены блоков. В условиях указываем номера блоков, которые будут демонстрироваться или скрываться, в зависимости от значения в URL (T809), геолокации (T810) или языка браузера (T839).

Динамическая подмена контента: что это и как сделать на сайте  📷
Динамическая подмена контента: что это и как сделать на сайте 📷

Опция подмены контента есть также в конструкторах Creatium, Flexbe, PlatformaLP.

Подытожим

Динамический контент позволит точно «попасть» в потребности аудитории, поэтому поможет увеличить продажи, заявки, обращения. Настроить его несложно, для этого есть специальные сервисы. Если у вас есть базовое понимание кода и нужен бесплатный способ, то GTM — лучший вариант. Можно использовать новый инструмент Яндекс Метрики, но в бесплатной версии есть ограничения. Yagla и Personyze идеальны для новичков — можно просто и быстро всё настроить. Первый сервис доступен бесплатно, если использовать его рекламные инструменты. А в Personyze есть бесплатный тариф для небольших проектов. Подмену контента можно настроить и в некоторых конструкторах. А если ваш сайт базируется на WordPress, то подойдет плагин IfSo. Реклама. ООО «Клик.ру», ИНН:7743771327, ERID: 2VtzqwFMn7y