Июль 12, 2017

Подмена контента или “сделай мультилендинг сам”

Каждому посетителю -

свой личный сайт!

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

Подмена контента — это просто и недорого!

В сети немало статей о том, как можно изменить заголовок или ту или иную часть страницы в зависимости от utm-меток или местонахождения пользователя. Однако большинство из того, что мне попадалось на глаза, было либо рекламой платных сервисов, либо довольно запутанной системой скриптов. Предлагаю Вам один из самых простых (и при этом бесплатных) методов подмены элементов страницы с помощью Google Tag Manager.

Буду рассказывать на примере сайта indoor.amberbridge.ru.

1. Определяем, для кого и что мы меняем

В данном случае очевидно, что пользователей можно разделить на группы по направлениям размещения рекламы:

offline;
indoor;
btl;
в ящиках;
флаеры;
стойки;
и другие.

В данном случае мы решили персонализировать заголовок, поэтому создаем в excel документ со столбцами:

Категория | Комментарий | Заголовок

Правила заполнения:

Категорию надо писать без окончаний (ящик, стойк, флаер). Так как подменять мы будем заголовки на основе содержимого метки utm_term, в которой отображается ключевое слово. А ключевые слова состоят из нескольких слов. Далее мы скриптом просто найдем вхождение категории в ключевое слово.
Если над разработкой подмены содержимого работает несколько специалистов, нужен столбец комментарии. Например, если Вы увидите категорию “одно”, то не всегда сумеете сразу догадаться, что речь идет об однокомнатной квартире. Вряд ли у Вас при этом получится написать заголовок без дополнительных подсказок.

2. Работаем над заголовком

Далее необходимо посмотреть, как в коде страницы прописан заголовок. В какие теги он обрамлен и из чего состоит.

Сделать это можно, нажав правой кнопкой мыши на заголовке и выбрав “посмотреть код элемента” (Chrome).

Видим, что заголовок находится в теге h1, а перенос строки в нем осуществлен с помощью br.

Значит, и заголовок для категории надо будет писать, поставив <br> в нужном месте.

Например, заголовок категории «offline» будет выглядеть так:

Эффективное размещение любых видов offline-рекламы <br /> для роста вашего бизнеса

3. Переходим к коду

После того, как таблица заполнена, идем в Google Tag Manger и создаем переменную с именем utm_term. Тип компонента — запрос, ключ значения — utm_term.

Эта переменная будет содержать в себе значение метки utm_term (как правило, туда прописывают ключевые фразы. Однако, если Вы ключи отправляете в utm_content, то и ключ значения должен называться utm_content).

Далее создаем переменную с именем Source_contain_in_utm_term и типом: собственный код JavaScript.

Вставляем код:

function (){

var key = {{utm_term}}.toLowerCase(); //приводим ключ в один регистр

var target = [«offline», «indoor«, «btl», «ящик», «флаер», «стойки», «стенд», «лифт», «агентств», «бц», «фитнес», «жк», «тц», «трк», «центр», «супермаркет», «почта», «поликлинн», «парковк«, «новостройк», «кинотеатр», «жилой компл», «сад», «вокзал», «сапсан», «поезд», «больниц», «бизнес центр», «промо акц», «помещени», «подъезд», «парадн», «оффлайн», «индор», «дорхенгер», «внутрен», «дверь», «буклет», «листов»];

var h1 = «»;

if (key) {

for (var i = 0; i < target.length; i++) {

var find = key.indexOf(target[i], 0);

if (find!=-1) {

h1 = target[i];

}

return h1

}

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

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

Обратите внимание, что скрипт отдаст ту часть ключа, которую нашел последней. То есть в ключе “indoor реклама на парковках” он отдаст “парковках”, это надо учитывать, если ключи пересекаются. Рекомендую высокочастотные ключи писать в начале списка.

4. Таблица поиска

Сохранили переменную, создаем следующую с типом “Таблица поиска” и называем её Table key H1

В «Входные данные» пишем категории из таблицы, которую составили ранее. Обязательно, чтобы они совпадали буква в букву с переменной target предыдущего скрипта.

В «Результат» — заголовок.

Логика простая: если скрипт Source_contain_in_utm_term нашел в ключевом слове, по которому пришел пользователь, одну из категорий, то вернуть заголовок для этой категории.

5. Финальный штрих — запускаем подмену контента

Но заголовок на странице пока не меняется. Чтобы он поменялся, необходимо выполнить простую jQuery команду. Идем в «Теги», создаем тег с типом “пользовательский HTML”:

и пишем туда:

<script>

jQuery(‘h1’).html({{Table key-H1}});

</script>

В данном случае (если на сайте есть библиотека jQuery), значение из переменной Table key-H1 подставится в виде кода html вместо атрибута h1 на посадочной странице.

В качестве триггера создаем Table key-H1 does not equal UNDEFINET (название можно и попроще):

Тип триггера — просмотр страницы. Триггер активируется, если переменная Table key-H1 что-то нашла. То есть если ключ не содержит в себе ни одной из описанных категорий — тег просто не сработает.

Как работает подмена контента

Посмотреть, как работает подмена контента, можно по ссылкам:

http://indoor.amberbridge.ru/?utm_term=indoor

http://indoor.amberbridge.ru/?utm_term=реклама%20в%20лифте

Хотите поэкспериментировать? Подставьте в значение utm_term любую категорию и посмотрите, что из этого получится.

Данный пример демонстрирует подмену заголовка по простой логике. Однако её несложно развить и сделать условия, которые позволяют менять заголовки, призывы в формах, callback-попапах, а также в тексте призыва чата JivoSite.

Например, так как это реализовано вот тут: http://sro-sp.ru/?utm_source=test&utm_medium=test&utm_campaign=stroitel&utm_content=test&utm_term=железнодорожное%20сро

(дождитесь, пока чат откроется сам)

Кроме того, этим же способом можно менять изображения. Вот примеры:

жби-россия.рф

жби-россия.рф/?utm_term=тоннели

жби-россия.рф/?utm_term=дреннаж

Остались вопросы по реализации подмены контента с помощью Google Tag Manager? Задавайте их в комментариях, и я на них обязательно отвечу.

До новых встреч!