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

Задачи и инструменты для настройки динамического контента.

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

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

Рассмотрим на примере, как это работает. Введем в строку поиска Яндекса «услуги бухгалтера удаленно» и сразу видим рекламное объявление, заголовок которого точно отвечает на запрос:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.ru

Особенности:

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

Стоимость:

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

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

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

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

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

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

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

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

www.personyze.com

Особенности:

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

Стоимость:

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

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

После регистрации система попросит ввести адрес сайта.

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

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

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

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

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

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

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

ru.wordpress.org/plugins/if-so

Особенности:

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

Стоимость: бесплатная версия с ограниченным функционалом и платная версия — от $89 за 1 домен.

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

• Выбираем плагин в меню и заходим в настройки.

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

• Система создаст шорткод, который нужно разместить там, где будет отображаться контент.

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

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

В IfSo есть статистика, чтобы отслеживать просмотры и конверсии. Для получения более подробных данных систему можно связать с Google Analytics.

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

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: 2VtzqwArgYp