Павел Корякин , 5 марта 2018

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

Как самостоятельно настроить динамическую подмену практически любых элементов на сайте. Нужно только разобраться с несложным скриптом и Google Tag Manager.


Перед началом статьи сразу дадим готовый результат — последняя версия скрипты лежит на GitHub

В этом материале я расскажу, как пользоваться бесплатным скриптом, с помощью которого вы сможете настроить автоматическую подмену заголовка и других элементов на сайте под ключевые слова за несколько минут без навыков программирования. По сути это бесплатный аналог 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-метку 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. Предположим, вы его установили и находитесь на главном экране.Переходим в раздел «Теги» и создаем новый тег.

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

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

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

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

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

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

Назначение триггера

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

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

Хотите дальше узнавать новое про контекстную рекламу для интернет-магазинов?
Подписывайтесь на наш канал в телеграме.

Перейти на канал
Другие материалы по теме
Основные стратегии Яндекс.Директа 2023 для управления рекламными кампаниями
Основные стратегии Яндекс.Директа 2023 для управления рекламными кампаниями
Лучшая стратегия — та, которая решает задачи бизнеса. Если верно поставить цели и определиться с KPI, настроить рекламу будет проще.
5 типичных проблем в контексте, которые мы видим у 90% клиентов
5 типичных проблем в контексте, которые мы видим у 90% клиентов
Мы провели аудит более чем для 100 интернет-магазинов и постоянно видим одни и те же ошибки. Например, клиент хочет масштабироваться, поднимает бюджет — и реклама начинает работать в минус.
За 2 года подняли контекст с минусов до 330 тысяч ₽/месяц магазину тканей, хотя Google ушел и автостратегии не работали
За 2 года подняли контекст с минусов до 330 тысяч ₽/месяц магазину тканей, хотя Google ушел и автостратегии не работали
Какие инструменты использовали, какие гипотезы тестировали, чем компенсировали уход Google из России и почему не для всех подходят автостратегии и товарные площадки.
Пакетные стратегии в Яндекс Директ: для чего нужны и как настроить
Пакетные стратегии в Яндекс Директ: для чего нужны и как настроить
Как работают пакетные стратегии и как их настраивать — с примерами из практики
Модели атрибуции в Яндекс Директе: как использовать в аналитике и какую выбрать при настройке рекламы
Модели атрибуции в Яндекс Директе: как использовать в аналитике и какую выбрать при настройке рекламы
Объясняем на картинках, что такое модели атрибуции в Директе и как они помогают анализировать рекламу и обучать автостратегии.
Ретаргетинг в Яндекс Директ: что это такое, какой бывает и как настроить
Ретаргетинг в Яндекс Директ: что это такое, какой бывает и как настроить
Пошаговая инструкция, как собрать аудиторию и настроить ретаркетинг на поиске и в РСЯ.
читать наш блог

Оставьте заявку

После того, как вы оставите заявку: интервью ~15 минут → гостевые доступы для аудита ~15 минут → аудит в течение недели → согласование предложения → начало первой итерации. По нашему опыту реально начать что-то делать уже через неделю.

Менеджер проектов Александр
Александр

Менеджер проектов



Пишите на — или в Телеграмм