Динамическая подмена контента на сайте через Google Tag Manager

Низкая конверсия посадочной страницы - частая проблема, которую пытаются решить 99% интернет-маркетологов. Сделано масса сервисов и способов, которые повышают конверсию. Одни платные, вторые нет.

Один из них - динамическая подмена контента на странице. 

Суть проста: берем запрос пользователя, с которым он пришел к нам, и меняем контент сайта в соответствии с ним.

Например:

• Пользователь спросил в поиске «Взять кредит на авто» - заголовок на сайте будет «Выдаем кредиты на авто»
• Пользователь спросил «взять кредит на самокат» - заголовок на сайте будет «Выдаем кредиты на самокаты»

Как работает скрипт динамической подмены контента.

Если вкратце - реализация через UTM-метки. Скрипт для реализации ниже. Подробное описание еще ниже:

<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_replace=msk. В данном случае msk - это аббревиатура, которой соответствует конкретный заголовок.
Такие сокращения задаются здесь:

var content = {

    msk: 'Заказать эвакуатор в Москве!',

    kazan: 'Заказать эвакуатор в Казани!',

    spb: 'Заказать эвакуатор в Санкт-Петербурге!',

};  

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

Выбираем подменный элемент.

Элемент выбирается с помощью селектора. Найти его просто: нажимаем правой кнопкой мыши по элементу, который хотим поменять и выбираем «Просмотреть код». Автоматически выделяется сидим цветом кусок кода, который отвечает за элемент. Нажимаем на него правок кнопкой мыши и выбираем «Copy - Copy Selector»

Вставляем селектор между одиночных кавычек здесь:

var selector = '#block-new1066 > p > span > strong > span > span';

Теперь наш код готов. Осталось его просто выполнить в нужный момент.

Для этого нам нужно будет заранее установить на сайт Google Tag Manager. Занимает это 5-10 минут.

Создаем новый тег в  типа «Custom HTML» или «Произвольный HTML» и копируем него наш код.

В качестве триггера выбираем DOM Ready и нужную нам страницу (если сайт многостраничный) или All Pages и Dom Ready если одностраничник.

Сохраняем, публикуем, тестируем.