Специалист агентства контекстной рекламы 1jam.ru Павел Корякин объясняет, как самостоятельно настроить динамическую подмену практически любых элементов на сайте. Нужно только разобраться с несложным скриптом и Google Tag Manager.
В этом материале я расскажу, как пользоваться бесплатным скриптом, с помощью которого вы сможете настроить автоматическую подмену заголовка и других элементов на сайте под ключевые слова за несколько минут без навыков программирования. По сути это бесплатный аналог Yagla.
Сразу даем скрипт с минимальными инструкциями, который с некоторыми корректировками можно разместить в GTM или прямо на сайт. Если вы не понимаете, как он работает, то читайте дальше.
<script>
// Добавьте UTM-метку utm_replace к ссылке в рекламной кампании, например
//site.ru/?utm_campaign=name&utm_replace=moscow
// moscow, это краткий код заголовка, которому соответствует длинный заголовок, например
// moscow, это «Заказать эвакуатор в Москве!»
var content = {
moscow: 'Заказать эвакуатор в Москве!',
kazan: 'Заказать эвакуатор в Казани!',
spb: 'Заказать эвакуатор в Санкт-Петербурге!',
};
// Здесь нужно между одинарными кавычками вставить селектор http://joxi.ru/GrqZodptNMNlWm
var selector = '#manager > div > div.title > div';
// Далее ничего не меняйте, это исполняющий замену скрипт
function replacer(content) {
var utm = /utm_replace=([^&]*)/g.exec(document.URL)[1];
if (utm in content) {
document.querySelector(selector).innerHTML=content[utm];
} else {
console.log('Каталог контента не имеет такой utm метки');
};
};
replacer(content);
</script>
Как это работает
Соответствие UTM-метки и заголовка
В ссылки к рекламным объявлениям мы добавляем новую UTM-метку utm_replace (что такое UTM-метки) и в значении указываем краткий код заголовка, который будет подставляться utm_replace=moscow.
Разберем, как это реализуется.
var content = {
moscow: 'Заказать эвакуатор в Москве!',
kazan: 'Заказать эвакуатор в Казани!',
spb: 'Заказать эвакуатор в Санкт-Петербурге!',
};Это вроде словаря, где содержатся краткие коды (moscow, kazan, spb) и значения — заголовки, которые должны подставляться на сайте.
Например, вы указываете такую метку в ссылке объявления контекстной рекламы, по ней переходит пользователь, скрипт видит метку и в нужном месте подменяет соответствующий заголовок.
Есть некоторые условия:
- Краткое название должно быть без пробелов на английском языке, но можно использовать подчеркивания, например moscow_russia.
- Перед кратким названием должно быть четыре пробела, как в примере кода.
- После краткого названия стоит двоеточие.
- Длинный заголовок содержится между одинарными кавычками ‘ ‘.
- После длинного заголовка обязательно стоит запятая.
Пример
var content = {
primer_s_perenosom: 'Перенос заголовка на новую строку<br/> в Москве!',
primer_s_html: '<h1>Можно вставлять прямо с HTML</h1>',
primer_s_kartinkoy: '<img src=”ссылка на изображение”>',
};Где на странице подменять заголовок
Есть такая штука — селектор — он определяет путь до элемента в коде сайта. Копируем его в браузере и вставляем в строку var selector = ‘сюда’
var selector = '#block-new1066 > p > span > strong > span > span';Получить селектор очень просто. Открываем сайт в Google Ghrome, включаем инспектор (Вид > Разработчик > Веб-инспектор)
Если у вас другой браузер, то гуглите «как включить веб-инспектор в моем браузере».
Далее в инспекторе нажимаем на стрелку, наводим на заголовок, который хотим подменять
Одновременно у нас подсветится код данного элемент в окне справа
В коде нажимаем правой кнопкой мыши на выеделенный фрагмент и копируем селектор: Копировать > Копировать selector.
Вставляем в скрипт.
var selector = 'вставь сюда между одинарных скобочек';Все, дальше идет функция, которая делает свое дело.
Как установить скрипт на сайт
Есть два способа: установить код перед закрывающимся тегом </body> или через Google Tag Manager. Рассмотрим последний способ.
Сначала узнайте, как установить Google Tag Manager на сайт и зачем он нужен, алгоритм похож на установку кода Метрики или Analytics. Предположим, вы его установили и находитесь на главном экране. Переходим в раздел «Теги» и создаем новый тег.
Выбираем Custom HTML (Пользовательский HTML).
Вставляем код скрипта.
В качестве триггера выбираем All Pages (Все страницы).
И добавляем (плюсик +) еще один триггер DOM Ready (Готовность DOM). Это означает, что наш скрипт будет срабатывать только после того, как загрузится вся страница.
Все, сохраняем тег, нажав на Save.
Сохраняем и публикуем.
Пример, как это работает
Можете перейти на наш сайт по ссылке 1jam.ru/?utm_replace=headline и вместо стандартного заголовка будет следующий:
Плюсы и минусы скрипта
У скрипта есть один минус: замена работает только при наличии UTM-метки. Поэтому если пользователь потом перейдет на ту же самую страницу по ссылке без UTM-метки, то заголовок не сохранится, но этот вопрос мы решим ниже, усложнив код.
Но плюсов больше:
- быстро;
- бесплатно;
- просто разобраться;
- не нужно уметь программировать;
- идеально для лендингов.
Пофантазируем, как это можно еще использовать
- менять номер телефона, например, для AdWords использовать один, а для Яндекс.Директа другой;
- заменять картинку;
- изменять город;
- изменять заголовки под ключевые слова;
- изменять под динамические параметры.
Как заменить сразу несколько заголовков и картинку
Если нужно менять несколько элементов, например, заголовок, номер телефона и картинку, то код усложняется.
Все работает по тому же принципу, но отличие в том, что вместо одного заголовка мы указываем [{код:заголовок},{код:номер телефона},{код:картинка}], чтобы подменять сразу несколько элементов. В поле selector вставляем селектор, а в поле content вставляем заголовок. Все остальное работает так же.
<script>
var content = {
coctail: [
{
selector: '#manager > div > div.title > div',
content: 'Сашка доволен доволен тобой!'
},
{
selector: '#manager > div > div.entry',
content: '<img width="420" alt="Коктели" src="name.jpg" height="67" title="Коктели">'
}
],
moscow: [
{
selector: '#towns > div',
content: 'Московский номер'
},
{
selector: '#manager > div > div.title > div',
content: 'Московская версия сайта'
}
],
headline: [
{
selector: '#manager > div > div.title > div',
content: 'Заменяется только заголовок'
}
]
};
function replacer(content) {
var utm = /utm_replace=([^&]*)/g.exec(document.URL)[1];
if (utm in content) {
for (i in content[utm]) {
document.querySelector(content[utm][i]['selector']).innerHTML=content[utm][i]['content'];
};
} else {
console.log("Каталог контента не имеет такой utm метки");
};
};
replacer(content);
</script>
Например, при переходе по ссылке 1jam.ru/?utm_replace=moscow меняются заголовок и номер.
А по этой ссылке 1jam.ru/?utm_replace=coctail изменяются заголовок и картинка.
Как продолжать заменять контент в последующие переходы без UTM-метки
В скриптах выше проблема в том, что скрипт работает только при наличии UTM-метки в ссылке. Это можно исправить, если записывать краткий код контента в cookie (куки) браузера. Так, в течение 30 дней у пользователя будет автоматически меняться контент согласно UTM-метке, с которой он изначально перешел.
Чтобы не удлинять статью портянкой кода, мы опубликовали его на GitHub. Данный скрипт используется точно так же, как и описанные выше.
Кейсы по использованию скрипта
- На сайте rusbeltlp.ru по номенклатурным запросам вида «лента тк 200 купить» заменяли заголовок на «Купить ленту ТК 200 за 40000 рублей с доставкой за 2 дня», конверсия выросла почти в два раза — с 6 до 11%.
- Заменяли заголовки и картинки под номенклатурные запросы на сайте жби-уфа.рф. Например, вы ищете «цены фбс 24 2380 300 580», а у вас заголовок «Доставка ФБС 24-3-6 тонн 2380×300×580 в день звонка по 2300 р.», конверсия достигала фантастические 35%, но это было ~4 года назад.
- На небольших проектах, где динамический коллтрекинг не окупается, заменяем номер телефона под каналы трафика, чтобы в конце периода считать, сколько было звонков.
Спасибо за чтение, надеюсь, что от статьи будет реальная польза. Пишите предложения, могу модифицировать скрипт, но не усложнять.
Для отправки комментария необходимо войти на сайт.