В этом материале я расскажу, как пользоваться бесплатным скриптом, с помощью которого вы сможете настроить автоматическую подмену заголовка и других элементов на сайте под ключевые слова за несколько минут без навыков программирования. По сути это бесплатный аналог Yagla.
Сразу даем скрипт с минимальными инструкциями, который с некоторыми корректировками можно разместить в GTM или прямо на сайт. Если вы не понимаете, как он работает, то читайте дальше.
// Добавьте 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);
В ссылки к рекламным объявлениям мы добавляем новую UTM-метку utm_replace (что такое UTM-метки) и в значении указываем краткий код заголовка, который будет подставляться utm_replace=moscow.
Разберем, как это реализуется.
var content = {
moscow: 'Заказать эвакуатор в Москве!',
kazan: 'Заказать эвакуатор в Казани!',
spb: 'Заказать эвакуатор в Санкт-Петербурге!',
};
Это вроде словаря, где содержатся краткие коды (moscow, kazan, spb) и значения;— заголовки, которые должны подставляться на сайте.
Например, вы указываете такую метку в ссылке объявления контекстной рекламы, по ней переходит пользователь, скрипт видит метку и в нужном месте подменяет соответствующий заголовок.
Есть некоторые условия:
Пример
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-метки, то заголовок не сохранится, но этот вопрос мы решим ниже, усложнив код.
Но плюсов больше:
Если нужно менять несколько элементов, например, заголовок, номер телефона и картинку, то код усложняется.
Все работает по тому же принципу, но отличие в том, что вместо одного заголовка мы указываем [{код:заголовок},{код:номер телефона},{код:картинка}], чтобы подменять сразу несколько элементов. В поле selector вставляем селектор, а в поле content вставляем заголовок. Все остальное работает так же.
<script>
var content = {
coctail: [
{
selector: '#manager > div > div.title > div',
content: 'Сашка доволен доволен тобой!'
},
{
selector: '#manager > div > div.entry',
content: '<img width="420" alt="Коктели" src="/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 меняются заголовок и номер.
А по этой ссылке 1jam.ru/?utm_replace=coctail изменяются заголовок и картинка.
В скриптах выше проблема в том, что скрипт работает только при наличии UTM-метки в ссылке. Это можно исправить, если записывать краткий код контента в cookie (куки) браузера. Так, в течение 30 дней у пользователя будет автоматически меняться контент согласно UTM-метке, с которой он изначально перешел.
Чтобы не удлинять статью портянкой кода, мы опубликовали его на GitHub и там же обновляем. Данный скрипт используется точно так же, как и описанные выше.
Спасибо за чтение, надеюсь, что от статьи будет реальная польза. Пишите предложения, могу модифицировать скрипт, но не усложнять.