Скрипт для подмены контента на сайте по UTM-меткам — подробное руководство

Специалист агентства контекстной рекламы 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 года назад.
На небольших проектах, где динамический коллтрекинг не окупается, заменяем номер телефона под каналы трафика, чтобы в конце периода считать, сколько было звонков.

Спасибо за чтение, надеюсь, что от статьи будет реальная польза. Пишите предложения, могу модифицировать скрипт, но не усложнять.