В статье расскажу, как без сервисов и костылей делать подмену контента на сайте в зависимости от 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 код у каждого будет индивидуальный):
Что делает этот код
В переменную X берем заголовок H1, т.е с помощью getElementsByTagName мы ищем в коде (дереве) сайта элемент H1.
Далее, обращаемся к массиву переменной X и задаем параметру innerHTML нужное значение.
Profit.
Получается, вы можете крутить-вертеть как угодно, подменять контент на лету на динамические параметры и пр.
Суть метода в двух словах:
В переменную GTM мы помещаем “ключ”, по которому будем менять контент.
Через триггер мы ловим этот ключ, из-за триггера срабатывает тег -> выполняется JS код и меняет контент на сайте.
Под каждый креатив, рекламную кампанию, ключевое слово — вы можете показывать разный контент, подменяя заголовки, картинки, текст и что угодно.
Из примера выше, получается, когда utm_term будет содержать keyword, заголовок на сайте подменится на “ваш новый заголовок”.
Еще раз
Предположим, в одной рекламной кампании, в контексте, у вас есть 2 группы ключей:
- монтаж
- демонтаж
Вы хотите, чтобы по монтажу на лендинге был заголовок “Монтаж”, по демонтажу “Демонтаж”.
Все просто = в триггере, который “ловит ключ”, указываем — “содержит: монтаж” и “не содержит: демонтаж”.
Profit.
GTM очень гибкий инструмент. Нужно лишь немного понимать верстку и уметь гуглить куски JS кода.
Выводы
Рекомендую потестить всем, кто льет трафик на лендинги. Более глубокая сегментация и разный контент под каждый сегмент ЦА может сильно повысить конверсию и отдачу от рекламы.
Еще, например, можно запустить сплит-тест и посмотреть, какие заголовки и текст принесут больше конверсий (хотя более удобный инструмент для а/б тестов — Google Optimize).
Также подписывайтесь на мой телеграм канал, где я пишу небольшие статьи о контекстной рекламе (фишки, чек-листы и пр.).
$url = 'https://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
if (strpos($url, 'утм_метка') !== false) {
echo 'подменный контент';
}
else {
echo 'обычный контент';
}
Не удобнее ли один раз прописать вот так в коде страницы, чем делать JS-костыли, при использовании которых подменяемое содержимое будет "моргать" при загрузке страницы?
Так надо же еще вытащить "элемент", в котором будет подменяться контент?) Для меня удобнее на JS. Плюс решил ты запустить сегодня новую РК, где 5 креативов и под каждый хочешь потестить разные заголовки. Что удобнее, лезть в код страницы или через интерфейс GTM за 5 мин все сделать.
Индексироваться как будет?
Это для ppc каналов, для seo так нельзя делать.
Можно;)
Насколько знаю, Гугл очень не любит подмену контента, ибо это пахнет фишингом. Или ютм метка зачтется как гет часть урла?
Очевидно второе) любой гет параметр это новая страница
У автора бесплатный хостинг со статическим контентом без скриптинга на сервере.
Господи, 100 руб в месяц нет что ли
Может быть, он из принципа
псс. parse_str()
$_GET['utm_term']
php разумеется лучше, только внутри появятся elseif, на случай, если клиент зайдет просто по базовой ссылке
В чём проблема вызывать js в <head> window.addEventListener('DOMContentLoaded', (event) => {
//code
});
И "моргать" не будет!
А почему просто не сделать отдельные страницы на каждый продукт?
Подчеркнуть, как круто уметь гуглить js, который не оптимизируется, гасит скорость загрузки и не индексируется. Фича в том, чтоб был один "лендинг", а не многостраничный сайт....) я так это вижу. По мне, такое себе решение. Проще уж сделать нормальный многостраничник.
Ну если лендинг - одноэкранник, где кроме заголовка, креатива и формы захвата ничего нет, тогда может и проще. А если лендос на несколько экранов и нужно поменять контент? Все страницы редактировать?
Думаю что получается сильно хлопотно, а вы так не думаете?
Продублировать код в новую страницу и исправить три строчки это сильно хлопотно? Ну фиг знает, это явно проще чем скрипты пилить и к тому же индексируется адекватнее
Ну у каждого на этот момент своё мнение. Пусть даже оно глупое, но своё)))
Не, ну я идею понимаю, если у клиента есть только один лендос, доступа к коду нет и каким-то чудом в нем оказался гтм, тут и не на такие ухищрения пойдёшь. Но в идеальном мире это так работать не может.
Я вот хотел спросить: а где этот идеальный мир? Такое ощущение, что мы в разных сказках живем)
Минусы данного решения (кроме того, что это жесточайший костыль):
1. GTM может время от времени глючить или не всегда отрабатывать в некоторых браузерах или иметь проблемы с кэшом.
2. GTM чаще всего юзают маркетеры, которые в JS вообще не алле, в свою очередь многие разработчики в GTM не алле. В итоге непонятно, чья это зона ответственности на проекте и как это покрыть тестами.
3. Сложно писать и отлаживать код более чем в пару строк, который сможет не только менять одну картинку и заголовок, а что-то большее.
Google Optimize кстати вполне себе решение данного вопроса.
Ну это вообще фича из серии "на коленке". Для серьёзного проекта, где работает большая команда и даже есть "зоны ответственности", я бы не стал юзать, а вот для одностраничника, созданного для разведки ниши и похожих целей - вполне. Хотя во втором случае можно просто потратиться на ноукод-решение с таким функционалом и сэкономить своё время:)
Какое днище.
Может ли гугл посчитать такое поведение за клоакинг?
+ Аналогичный вопрос возник
Это не клоакинг, технически страница с GET-параметром в урле и страница без него - это две отдельные страницы, контент на которых может отличаться. Ну и клоакинг - это в первую очередь про умысел обмана поисковых роботов, а не про используемую технологию. Например, подменять контент можно по IP для поисковых роботов и для обычных пользователей, а можно по IP для пользователей разных регионов (мультирегиональность на одном домене), первое влечет наложение санкций, а второе нет.
Мы на тильде такую штуку делаем обычно.
да, в тильде есть такой функционал
Согласно правилам яндекс маркета нельзя показывать всплывающие окна на сайте, так вот все их проверяющие заходят на сайт по предоставленной ссылке в хмл фиде, в ссылку добавляем ютм-ку, и у себя пишем мол не показывать если ютмка сурс яндекс маркет. Это помогло пройти модерацию, ведь всплывающих окон при проверке нет :)
Спасибо, в закладки)
В сравнении с Яглой такое решение удобнее, как по мне )
В dycont ещё удобнее)
С точки зрения SEO, как тот же Яндекс к такому относится. Например, если на странице уже есть поисковый трафик в хорошем объеме, не хотелось бы его терять.
Поиск видит обычную страницу без подмены
т.е. они точно никак не узнают, что я подменяю контент?
В примере контент подменяется только если человек зашел по определенной utm метке. Если параметры закрыты от индексации, то должно быть всё ок.
Понятно, спасибо, нужно было убедится, что точно не повлияет. Я далек от веб разработки, просто думал яндекс метрика может определить такое поведение на странице и в дальнейшем снизить позицию в выдаче. Не хотелось бы потерять большой объем поискового трафика.
Я тоже сначала не поняла, думала что будет какой-то негативный импакт все равно
Есть пример одностраничника в топе Яндекса по высокочастотному запросу? Интересно.
А как просто отобразить на странице передаваемый параметр utm-term? У меня он передает адрес емэйла из которого происходит переход на страницу. То есть мне не надо ничего подставлять и т.п. а надо тупо написать Ваш емэйл такой то.
В gtm создать переменную, в нее положить значение utm метки.
В JS коде, там где выводится значение inner html, выводить переменную созданную в gtm.
Ну маркетолог а не программист )) Памахите )
Вот в коде где = запрос utm term, нужно в интерфейсе gtm выбрать переменную начав вводить {{ и там будет выбор переменной.
Я сам не прогер, хз как объяснить)
Объяснил доходчиво, все заработало. Если разобраться, то очень все просто оказывается, подстановка работает быстро. В общем огонь! Спасибо )
А если сайтик на конструкторе? )) Какой код писать?
Как в этом коде
x = document.getElementsByTagName('h1');
x[0].innerHTML = 'Наш оригинальный заголовок';
Выводить переменную, созданную в gtm?
Так?
x = document.getElementsByTagName('h1');
x[0].innerHTML = Запрос UTM term;
В скрипте var/const забыл
Комментарий удален модератором