Как подменять контент на сайте без сервисов и костылей

В статье расскажу, как без сервисов и костылей делать подмену контента на сайте в зависимости от UTM-метки или любого другого параметра из URL. Зачем = для повышения конверсии.

Что такое подмена контента и зачем нужна

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

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

Вы запускаете контекстную рекламу и у вас получилось 3 отдельных рекламных кампании:

• Кузовной ремонт.
• Удаление катализатора.
• Диагностика.

Логично — чтобы конверсия была выше, для каждого сегмента ЦА нужен индивидуальный посыл. Кто ищет кузовной ремонт — нужно показать на первом экране заголовок и выгоды по кузовному ремонту, кто хочет удалить катализатор — надо показывать другой контент и т.д

Чтобы это реализовать, нужно либо писать скрипт, либо использовать сервисы (например YAGLA), либо можно использовать встроенный функционал конструкторов (например в Tilda).

Итого: подмена контента нужна для создания индивидуального предложения определенному сегменту ЦА, что в свою очередь повышает конверсию.

Как это работает

Подмена контента осуществляется по данным из UTM-метки или параметра URL.

Это может быть utm_campaign, utm_content, utm_term, можно прописать любые свои параметры — ?parametr=raz-dva-tri.

Минус сторонних сервисов и самописных скриптов — это “костыли” с ограниченным функционалом + если писать скрипты, нужно уметь кодить + сервисы стоят денег.

Как замутить самому, без сервисов и костылей

Использовать крутой, всем доступный и бесплатный инструмент — Google Tag Manager.

Это менеджер тегов, с помощью которого вы можете на лету вносить изменения в код сайта (в DOM-дерево).

Установка GTM

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

Как делать подмену контента по UTM-метке в GTM

Начинаем колдовать.

1. Получаем значение из UTM-метки или параметра URL

Заходим в раздел “Переменные” -> жмем создать.

Пишем имя переменной, жмем на конфигурацию. Выбираем тип переменной — URL.

Выбираем “тип компонента” — > Запрос.

В поле “Ключ запроса”, пишем метку, из которой будем брать данные, например это utm_term.

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

2. Создаем триггер

Переходим в раздел триггеров: жмем создать, пишем имя.

Выбираем тип триггера — просмотр страницы.

Выбираем, когда активировать триггер: берем нашу переменную из предыдущего шага — “UTM_term”. Выбираем и пишем “Содержит: keyword”.

Логика простая, когда пользователь смотрит страницу с нужной вам UTM-меткой, срабатывает триггер, который активирует ТЕГ, а тег изменяет код на сайте.

3. Создаем тег подмены

Переходим в раздел Теги.

Жмем создать, пишем имя.

Далее в конфигурации тега, выбираем “Пользовательский HTML”.

В триггерах выбираем наш созданный триггер.

В HTML пишем JS код (это лишь пример, JS код у каждого будет индивидуальный):

<script> x = document.getElementsByTagName(‘h1’); x[0].innerHTML = ‘Наш оригинальный заголовок’; </script>

Что делает этот код

В переменную X берем заголовок H1, т.е с помощью getElementsByTagName мы ищем в коде (дереве) сайта элемент H1.

Далее, обращаемся к массиву переменной X и задаем параметру innerHTML нужное значение.

Profit.

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

Суть метода в двух словах:

В переменную GTM мы помещаем “ключ”, по которому будем менять контент.

Через триггер мы ловим этот ключ, из-за триггера срабатывает тег -> выполняется JS код и меняет контент на сайте.

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

Из примера выше, получается, когда utm_term будет содержать keyword, заголовок на сайте подменится на “ваш новый заголовок”.

Еще раз

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

• монтаж
• демонтаж

Вы хотите, чтобы по монтажу на лендинге был заголовок “Монтаж”, по демонтажу “Демонтаж”.

Все просто = в триггере, который “ловит ключ”, указываем — “содержит: монтаж” и “не содержит: демонтаж”.

Profit.

GTM очень гибкий инструмент. Нужно лишь немного понимать верстку и уметь гуглить куски JS кода.

Выводы

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

Еще, например, можно запустить сплит-тест и посмотреть, какие заголовки и текст принесут больше конверсий (хотя более удобный инструмент для а/б тестов — Google Optimize).