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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Установка GTM

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

ставим GTM
ставим GTM

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

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

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

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

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

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

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

получили значение UTM в переменную
получили значение UTM в переменную

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

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

Также подписывайтесь на мой телеграм канал, где я пишу небольшие статьи о контекстной рекламе (фишки, чек-листы и пр.).

6060
48 комментариев

$url = 'https://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
if (strpos($url, 'утм_метка') !== false) {
echo 'подменный контент';
}
else {
echo 'обычный контент';
}

Не удобнее ли один раз прописать вот так в коде страницы, чем делать JS-костыли, при использовании которых подменяемое содержимое будет "моргать" при загрузке страницы?

22
Ответить

Так надо же еще вытащить "элемент", в котором будет подменяться контент?) Для меня удобнее на JS. Плюс решил ты запустить сегодня новую РК, где 5 креативов и под каждый хочешь потестить разные заголовки. Что удобнее, лезть в код страницы или через интерфейс GTM за 5 мин все сделать.

1
Ответить

У автора бесплатный хостинг со статическим контентом без скриптинга на сервере.

Ответить

псс. parse_str()

Ответить

php разумеется лучше, только внутри появятся elseif, на случай, если клиент зайдет просто по базовой ссылке

Ответить

В чём проблема вызывать js в <head> window.addEventListener('DOMContentLoaded', (event) => {
//code
});
И "моргать" не будет!

Ответить

А почему просто не сделать отдельные страницы на каждый продукт? 

5
Ответить