17.08.2018 
7 494 
Всем привет!
Использование подмены заголовков на сайте для контекстной рекламы, способно значительно увеличить показатель конверсии. Это связано с тем, что, переходя на сайт по рекламному объявлению, пользователь увидит заголовок максимально релевантный его запросу.
Например, есть некий автосервис «Ромашка», который использует контекст для продвижения услуг по сервисному обслуживанию автомобилей. Весь трафик идёт на лэндинг со стандартным заголовком: «Автосервис Ромашка – делаем на совесть!». Если настроить подмену заголовков, то при переходе на сайт по запросу «замена масла акпп audi q7», то вместо стандартного заголовка, пользователь увидит: «Замена масла АКПП Audi Q7 – всего 5 000 руб.!».
Сегодня я расскажу Вам о скрипте, при помощи которого можно быстро реализовать подмену заголовков на сайте при переходе на Ваш сайт по рекламе в Яндекс.Директе. Скрипт реализован при помощи jQuery (библиотека Java Script).
Проверяем подключен ли
Чтобы это проверить, необходимо открыть сайт, нажать комбинацию клавиш Ctrl + U. Откроется страница с исходным кодом сайта. Далее нажать Ctrl + F, откроется окно для поиска по исходному коду. В этом окне набрать «jquery» и нажать Enter или «Найти». Если jQuery подключен, то вы увидите подобные строки в исходном коде
Если ничего не нашлось, то Вам необходимо подключить jQuery. Это может сделать любой верстальщик или web-программист.
Подготовка массива ключей и заголовков
Скрипт будет проверять по какой фразе был осуществлён переход на сайт, и подставлять соответствующий заголовок. Для максимально корректной работы скрипта, идентификация ключа будет осуществляться по его ID.
Выгружаем кампанию, для которой будет настраиваться подмена заголовков, в excel. Удаляем все столбцы, кроме «ID фразы», «Фраза с минус-словами», «Заголовок1»
В столбце «Заголовок1» у нас будут тексты для подмены заголовков. При необходимости переписываем их для корректного отображения на сайте. В данном примере я сократил список фраз для удобства. В вашем случае, количество фраз может быть любым.
Удаляем столбец «Фраза с минус-словами», он был необходим для проверки релевантности заголовков.
В столбце, следующем, за «Заголовок 1» пишем формулу =” ”&A3&”:”&” ‘”&B3&”’,”
Протягиваем формулу до конца таблицы.
Пишем скрипт
Чтобы скрипт понял, где нужно подменять текст, необходимо добавить к тэгу заголовка класс utmHeader, и стиль style=»opacity: 0;»(сделает текст заголовка полностью прозрачным).
Для создания скрипта можно использовать любой текстовый редактор, например стандартный «Блокнот». Создаём новый файл, пишем следующий код:
var replace = {
Копируем столбец, сформированный по формуле, и вставляем после добавленной строки кода.
Ниже дописываем оставшийся фрагмент кода:
};
$(document).ready(function () {
var UtmURL = document.location.search;
UtmURL = UtmURL.match(/utm_key=\d*/);
if (UtmURL != null) {
UtmURL = UtmURL.toString();
var repURL = UtmURL.replace(/.[^\d]/g, «»);
if (typeof replace[repURL] != «undefined») {
$(«.utmHeader»).html(replace[repURL]);
}
}
$(«.utmHeader»).animate({‘opacity’:’1′},500);
});
Сохраняем файл как replace.js, загружаем на сервер и подключаем к сайту.
Готово. Подмена заголовков подключена на сайт. Осталось подключить передачу меток в ссылки объявлений. Для этого используем Директ.Коммандер, функцию «Дописать в конец»
Проверяем ссылку объявления, в utm_key передаём id одного из настроенных ключей.
Всё работает!
Подпишись и следи за выходом новых статей в нашем монстрограмме
Остались вопросы?
Не нашли ответ на интересующий Вас вопрос? Или не нашли интересующую Вас статью? Задавайте вопросы и темы статей которые Вас интересуют в комментариях.
5 мин.
Комментарии
А что клоакинг разрешили и теперь его можно использовать?
Бесплатная ягла? )
Скажите, пожалуйста, Как это делать на конструкторах? тильда, ЛП, Битрикс24(сайты24?)
С помощью GTM.
Не знаю ответит кто или нет, у меня не заработало Ссылка вот такого вида получилась maxmebelspb.ru/&utm_key=%7Bphrase_id%7D&utm_key=%7Bphrase_id?yclid=16215698675
Это правильная ссылка? И как проверить? Я тыкнула за заголовок объявления с админки директа, может поэтому ссылка неправильная, или как проверить подругому правильно ли работает скрипт, может проблема в сайте?
Спасибо за инструкцию! Все понятно и работает!)) Пусть и не с первого раза до меня дошло.. главное — внимательно прочитать!
Есть косяк, при переходе без УТМ метки не будет вообще нкиакого заголовка так, как он полностью прозрачный.
Работает, кто проверял?
Немного код глючит — ковычки надо правильно поставить. Да, и надо убрать alert(‘Ok’); после проверки.
};
$(document).ready(function () {
var UtmURL = document.location.search;
UtmURL = UtmURL.match(/utm_key=\d*/);
if (UtmURL != null) {
UtmURL = UtmURL.toString();
var repURL = UtmURL.replace(/.[^\d]/g, «»);
if (typeof replace[repURL] != «undefined») {
$(«.utmHeader»).html(replace[repURL]);
}
}
$(«.utmHeader»).animate({‘opacity’:’1′},500);
});
Как раз искал эту инфу. у меня почему то формула не работает. сделал как описано. но формула в экселе так и висит, не происходит как на вашем скрине