UnionCreated using FigmalectureCreated using Figma

Скрипт для подмены контента на сайте по 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) и значения — заголовки, которые должны подставляться на сайте.

Например, вы указываете такую метку в ссылке объявления контекстной рекламы, по ней переходит пользователь, скрипт видит метку и в нужном месте подменяет соответствующий заголовок.

Есть некоторые условия:

  1. Краткое название должно быть без пробелов на английском языке, но можно использовать подчеркивания, например moscow_russia.
  2. Перед кратким названием должно быть четыре пробела, как в примере кода.
  3. После краткого названия стоит двоеточие.
  4. Длинный заголовок содержится между одинарными кавычками ' '.
  5. После длинного заголовка обязательно стоит запятая.

Пример

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, включаем инспектор (Вид > Разработчик > Веб-инспектор)

Веб-инспектор в Chrome

Если у вас другой браузер, то гуглите «как включить веб-инспектор в моем браузере».

Далее в инспекторе нажимаем на стрелку, наводим на заголовок, который хотим подменять

Открыть код в Chrome

Одновременно у нас подсветится код данного элемент в окне справа

Определение кода

В коде нажимаем правой кнопкой мыши на выеделенный фрагмент и копируем селектор: Копировать > Копировать selector.

Копирование селектора

Вставляем в скрипт.

var selector = 'вставь сюда между одинарных скобочек';

Все, дальше идет функция, которая делает свое дело.

Как установить скрипт на сайт

Есть два способа: установить код перед закрывающимся тегом </body> или через Google Tag Manager. Рассмотрим последний способ.

Сначала узнайте, как установить Google Tag Manager на сайт и зачем он нужен, алгоритм похож на установку кода Метрики или Analytics. Предположим, вы его установили и находитесь на главном экране. Переходим в раздел «Теги» и создаем новый тег.

Создание нового тега в GTM

Выбираем Custom HTML (Пользовательский HTML).

Выбор типа тега

Вставляем код скрипта.

Добавление кода

В качестве триггера выбираем All Pages (Все страницы).

Выбор триггера для тега в GTM

И добавляем (плюсик +) еще один триггер DOM Ready (Готовность DOM). Это означает, что наш скрипт будет срабатывать только после того, как загрузится вся страница.

Новый триггер 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="/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 меняются заголовок и номер.

Пример лендинга с заменой 2

А по этой ссылке 1jam.ru/?utm_replace=coctail изменяются заголовок и картинка.

Как продолжать заменять контент в последующие переходы без UTM-метки

В скриптах выше проблема в том, что скрипт работает только при наличии UTM-метки в ссылке. Это можно исправить, если записывать краткий код контента в cookie (куки) браузера. Так, в течение 30 дней у пользователя будет автоматически меняться контент согласно UTM-метке, с которой он изначально перешел.

Чтобы не удлинять статью портянкой кода, мы опубликовали его на GitHub. Данный скрипт используется точно так же, как и описанные выше.

Кейсы по использованию скрипта

  1. На сайте rusbeltlp.ru по номенклатурным запросам вида «лента тк 200 купить» заменяли заголовок на «Купить ленту ТК 200 за 40000 рублей с доставкой за 2 дня», конверсия выросла почти в два раза — с 6 до 11%.

  2. Заменяли заголовки и картинки под номенклатурные запросы на сайте жби-уфа.рф. Например, вы ищете «цены фбс 24 2380 300 580», а у вас заголовок «Доставка ФБС 24-3-6 тонн 2380×300×580 в день звонка по 2300 р.», конверсия достигала фантастические 35%, но это было ~4 года назад.

  3. На небольших проектах, где динамический коллтрекинг не окупается, заменяем номер телефона под каналы трафика, чтобы в конце периода считать, сколько было звонков.

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

Читайте также
Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: