Павел Корякин, 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="//1jam.ru.opt-images.1c-bitrix-cdn.ru/upload/medialibrary/f47/f47abc04c6893dbb6044bd7921ff75ac.jpg?151746691711365" 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. На небольших проектах, где динамический коллтрекинг не окупается, заменяем номер телефона под каналы трафика, чтобы в конце периода считать, сколько было звонков.

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

Подпишитесь на Facebook или Телеграмм, чтобы не пропустить новые статьи
Другие материалы по теме
Cквозная аналитика: AmoCRM с Google Analytics за пару часов HOWTO
Cквозная аналитика: AmoCRM с Google Analytics за пару часов
Как интегрировать AmoCRM с Google Analytics бесплатно без помощи программисто за пару часов, пошаговая инструкция. Как посчитать LTV каналов.
Сквозная аналитика: вручную за 15 минут HOWTO
Сквозная аналитика: вручную за 15 минут
Как вручную свести данные о продажах по источникам трафика.
Как настроить автоматическую отчетность по РСЯ-площадкам в разрезе конверсий и CPA HOWTO
Как настроить автоматическую отчетность по РСЯ-площадкам в разрезе конверсий и CPA
Как сводить конверсии и расходы по РСЯ-площадкам в Google Analytics.
Как вручную свести конверсии и их стоимость по площадками РСЯ в Google Analytics HOWTO
Как вручную свести конверсии и их стоимость по площадками РСЯ в Google Analytics
Как вручную свести расходы и конверсии в разрезе РСЯ площадок. Для этих целей рекомендуем работать в Google Analytics.
Сквозная аналитика бесплатно за 20 минут: Google Sheets + Google Analytics + Zapier HOWTO
Сквозная аналитика бесплатно за 20 минут: Google Sheets + Google Analytics + Zapier
В своем агентстве контекстной рекламы мы научились решать вопрос со сквозной аналитики для небольших кампаний. Наверняка наш опыт будет актуален для всех интернет-маркетологов.
Успевать в два раза больше, избавившись от клиентов-нытиков с помощью корреляционного анализа HOWTO
Успевать в два раза больше, избавившись от клиентов-нытиков с помощью корреляционного анализа
В ежедневной рутине вы перестаёте видеть, что 70% времени тратите на клиентов или проекты, с которых ничего не зарабатываете — что делать?
читать наш блог

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

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

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

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



Пишите на — info@1jam.ru , звоните в скайпе — jam.agency , или по телефону — 8 (800) 551-85-03