• Пн. - Вс. с 9:00 до 19:00
  • +7 (915) 457-11-34
  • info@metadiv.ru
  • г.Балашиха

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

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

Сразу даю скрипт с минимальными инструкциями, который с некоторыми корректировками можно разместить в GTM или прямо на сайт. Если вы не понимаете, как он работает, то читайте дальше.

<script>
// Добавьте UTM-метку utm_replace к ссылке в рекламной кампании, например
//site.ru/?utm_campaign=name&utm_replace=moscow

// moscow, это краткий код заголовка, которому соответствует длинный заголовок, например
// moscow, это  «Заказать эвакуатор в Москве!»
var content = {
    moscow: 'Заказать эвакуатор в Москве!',
    kazan: 'Заказать эвакуатор в Казани!',
    spb: 'Заказать эвакуатор в Санкт-Петербурге!',
};

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

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

 

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

 

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

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

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

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

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

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

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

Плюсы и минусы скрипта

У скрипта есть один минус: замена работает только при наличии 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="https://ppc.world/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>
Создание сайтов и интернет-магазинов на WordPress