В этом материале я расскажу, как пользоваться бесплатным скриптом, с помощью которого вы сможете настроить автоматическую подмену заголовка и других элементов на сайте под ключевые слова за несколько минут без навыков программирования. По сути это бесплатный аналог 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="https://ppc.world/upload/medialibrary/f47/f47abc04c6893dbb6044bd7921ff75ac.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 меняются заголовок и номер.
Как продолжать заменять контент в последующие переходы без 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 года назад.
-
На небольших проектах, где динамический коллтрекинг не окупается, заменяем номер телефона под каналы трафика, чтобы в конце периода считать, сколько было звонков.
Спасибо за чтение, надеюсь, что от статьи будет реальная польза. Пишите предложения, могу модифицировать скрипт, но не усложнять.