(044) 36-00-561
Обратный звонок
(044) 36-00-561
Обратный звонок

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

1835
16/07/2018
Главная   >>   Блог   >>   Интернет-маркетинг   >>   Динамическая подмена контента на сайте через 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 если одностраничник.

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

 

Категория:

Тэги:

Бесплатная стратегия продвижения вашего сайта
В Google Ads и Яндекс Директ уже через 3-4 часа
Телефон
Телефон
Почта
Viber
Telegram
Skype
Whatsapp

Приезжайте к нам в офис для детальной консультации

Контакты