Как сделать мультилендинг с динамическим контентом

Почему лендинг на WordPress?

Ну, хотя бы потому, что 70% мировых сайтов сделаны на нём из-за открытости и бесплатности WordPress.


Ещё потому, что это одна из CMS, которую любят поисковики — а значит, при правильном обращении, есть шанс на органическое продвижение ваших страниц в топ. Ещё для Вордпресса существует 100500 плагинов – платных и бесплатных – которые позволяют работать без кода (хотя, увы, не без ж*па-часов).

Секундочку, но это все доводы в пользу Вордпресс на этапе создания сайта с нуля, а мы-то хотим лендинг пейдж!

Да, но возможно вы исполнитель, а у вашего заказчика есть всего один сайт на Вордпресс и он хочет на нем лендинг. И нет желания заводить новый домен, поддомен или просто заказчик нечего про это не понимает и отвечает вам: «Зачем мне новый сайт? Сделай мне на моем Вордпрессе».

Опустим полуклинические случаи. Итог: вам остается сделать лендинг пейдж на WordPress. Разберем, для начала, в чем отличие лендинга от других страниц?

Процесс настройки

В качестве примера возьмем сайт https://blog.areal >

В настройках GTM производим следующее:

добавляем переменную c типом «URL»;

  • в качестве типа компонента выбираем «Запрос»;
  • в поле «Ключ запроса» указывает тот параметр, который определили для подмены (в нашем случае utm_source).

название переменной — любое (changeUrl).

После этого необходимо создать еще одну пользовательскую переменную с типом «Таблица поиска» из раздела «Утилиты. Название может быть любое (у нас tablePoisk).

В качестве входной переменной выбираем раннее созданную: changeUrl. Для таблицы поиска добавляем строку, с помощью которой укажем, на что подменять контент. Для столбца «Входные данные» указываем значение параметра (в нашем случае это vc), а для столбца «Результат» — наш измененный заголовок.

Ставим чекбокс у поля «Установить значение по умолчанию». Это позволит выводить стандартный заголовок, в случае не обнаружения данных для подмены.

Третий шаг – создание триггера «Просмотр страницы», который будет активироваться по нашей метке.

В качестве условия активации триггера задаем changeUrl равно vc, либо же условие changeUrl не равно undefined (актуально, если используются подмены по разным меткам). То есть триггер активируется если:

  • у него совпадает значение параметра;
  • параметр определен (если в урле нет нужного параметра, то по умолчанию он принимает значение undefined — не определено).

После этого создаем пользовательский HTML тег, который будет отвечать за подмену заголовка на странице.

Его содержимое будет зависеть от верстки контента. В нашем случае, тег h1 сверстан с использованием класса следующим образом:

Поэтому скрипт подмены следующий:

Первым делом объявляем переменную со всеми элементами нашего класса:

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

Вот что получилось в итоге:

Чтобы сохранить стили стандартного заголовка, в переменной tablePoisk укажем следующий html код в столбце «Результат»:

2.Как настроить мультилендинг?


Для настройки мультилендинга нужно зайти в редактор страницы, в верхнем меню нажать кнопку «Страница», далее перейти в закладку «Мультилендинг».

Настройки для отображения страниц будут отражены в url’e (эта функция отдельно настраивается в рекламной кампании на Яндекс или Google).

В данном случае, как пример, мы используем параметр utm_term – он отвечает за ключевые слова.

Чтобы контент на странице менялся для ключевого слова «Дёшево» нужно:

  • Выбрать условие «Содержит»,
  • Нажать вкладку «Добавить вариант»,
  • В появившемся поле написать: «Дёшево».

Далее нужно нажать галочку для сохранения.

В нужных секциях необходимо создать свой вариант мультилендинга секций.

В качестве примера рассмотрим 2 варианта: 1 вариант: «Дёшево»; 2 вариант : «Очень дёшево».

Название вариантам можно задать любое. Когда значок мультилендинга на секции стал зеленый, значит функция мультилендинга включена исекция стала динамической.

Базовый вариант – это вариант секции по умолчанию, который будет показываться по прямой ссылке.Например, http://вашастраница.ru

Далее переходим во вкладку «Условия Мультилендинга». Здесь можно настроить вариант и условие.

где вашастраница.ru – это адрес вашего сайта, /?utm_term – метка, дешево – ключевое слово.

Если вы используете больше одного ключевого слова в варианте, то в ссылке можно указать их через пробел, “–” или “_”.

Пример: Если в одном варианте мультилендинга нужно указать два слова, то их можно добавить, например, так: «очень дешево», в ссылке это будет выглядеть следующим образом: «очень%20дешево» (если в ссылке есть пробел, он автоматически заменяется на значение %20)или можно указывать с нижним подчеркиванием между слов: «очень_дешево».С пробелом:http://вашастраница.ru/?utm_term=очень%20дешево С подчеркиванием:http://вашастраница.ru/?utm_term=очень_дешево

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

Пример ссылки, в которой несколько меток для статистики:http://вашастраница.ru/?utm_source=direct&utm_medium=cpc&utm_campaign=phone&utm_content=discount&utm_term=buy_phoneНо, мультилендинг настраивается только на одну из этих меток. Например, на последнюю utm_term=buy_phone

Примеры динамического контента

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

Онлайн-университет «Нетология»

Для начала зашла на сайт в приватном режиме, не входя в учетку. Сайт продемонстрировал мне вот такую подборку профессий — вероятно, сюда попали самые популярные:

Затем зашла в свою учетку и увидела уже другую подборку. В ней нет курса по основам Google Ads, который я недавно прошла, и появились профессии, которые недавно смотрела на сайте:

Сайт поиска работы HeadHunter

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

В приватном режиме браузера тот же блок на странице выглядит по-другому. Меня автоматически перекинуло на самый используемый домен сайта — .ru, с самым популярным местоположением — Москва.

Торговая площадка Amazon

Amazon известен своей программой рекомендаций. Прямо с главной страницы сервис предлагает залогиниться, чтобы использование было максимально полезным:


Для интереса я создала два разных аккаунта — на Ольгу и Олега. Стартовая страница в них выглядит одинаково.

У Олега немного по-другому расположены блоки.

В подвале главной страницы есть пока пустой блок — «Недавно просмотренные товары и рекомендации».

На аккаунте Ольги я посмотрела стайлер для волос, и на главной странице сразу же появился блок «Недавно просмотренные» с этим товаром.

А пустой блок внизу наполнился возможными рекомендациями — все из категории ухода за собой:

В аккаунте Олега я пролистала несколько рюкзаков, последний просмотренный из них появился в верхнем блоке:

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

AliExpress

Если вы из тех, кто ни разу не зависал в предложенных товарах на AliExpress, жму вам руку — вы волевой человек Как и на Amazon, здесь очень классная система рекомендаций, основанная на динамическом контенте.

Вот мой блок релевантных товаров на AliExpress. До этого просматривала пальто, украшения и товары для рукоделия, эти категории попали в подборку. Но все товары — из тех, что я еще не видела:

Признаки качественно лендинга

  • Персонализация. У каждого покупателя (группы покупателей) есть запрос, требующий решений. Ваша целевая страница должна предоставить решения и показать это с помощью привлекательного заголовка и дизайна лендинга.
  • Сфокусированность. Один оффер — один лендинг.
  • Выгода. Например, скидка на покупку.
  • Призыв к действию. Должна быть четкая и заметная кнопка.
  • Социальные доказательства. Посетители могут быть еще не готовы к покупке. Возможно, они захотят продолжать прокручивать страницу вниз, чтобы увидеть другие пункты меню бренда, положительные отзывы и сертификаты качества.
  • Элемент срочности. Чтобы ускорить действие, бренд может сообщить посетителям о том, что срок действия этого предложения скоро истекает.

Рассмотрим это подробнее и дадим советы

1. Один оффер — один лендинг

В рекомендациях по использованию целевой страницы электронной торговли никогда не следует предлагать посетителям слишком много вариантов.

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

Axis делает умные шторы на окнах и предлагает посетителям своей целевой страницы только один вариант конвертации, чтобы сделать немедленный заказ.

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

Эта целевая страница эффективно обучает, привлекает

Основное внимание уделяется продукту и большой ярко-красной кнопке призыва к действию, что делает эту целевую страницу очень эффективной

2. Несколько кнопок призыва к действию

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

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

3. Ориентация на покупателя

Лендинг в идеале должен быть адаптирован для одного покупателя.

Вот почему так важно сегментировать аудиторию. Чем точнее вы сегментируете, тем более целенаправленными будут ваши целевые страницы

4. Правильная навигация

Внимание покупателя легко отвлечь одной лишней ссылкой. По этой причине есть смысл сосредоточить посетителей только на ваших CTA

Эта целевая страница от Apple — переход от платной рекламы к новому iPad Pro.

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

Хотя это может позволить себе бренд, который уже давно заслужил лояльность посетителей.

5. A / B тестирование новых элементов


Несмотря на то, что есть много положительных примеров работы лендингов, не факт, что эти хаки сработают с вашей аудиторией. Каждое нововведение рекомендуем проверять и перепроверять для максимального эффекта.

A / B-тестирование позволит вам определить, какие заголовки лучше всего работают, и какой цвет СTА нужно использовать.

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

Мультилендинг своими руками

Ну вот мы и подобрались к самому интересному. В своей дипломной работе я использовал совершенно простой и понятный скрипт, который нашел здесь: http://smartlanding.biz/skript-multilendinga.html

Большое спасибо автору. В дипломе я его немного видоизменил, чтобы уж совсем не плагиатить и чтобы профиль специальности более-менее совпадал с реализованным решением. Сразу скажу, что я не программист. Но реализация действительно элементарная.

Главное условие — поддержка php. Но это умеют все современные хостинги и наверное все тарифы поддерживают этот функционал. Значит, в шапку лендинга вставляем вот этот код. Здесь мы даем инструкцию: запоминаем нужный текст в зависимости от содержания контейнера utm.

А затем подсасываем текст в нужном месте на сайте с помощью, например, такой конструкции:

Если вы дружите с php — то разберетесь самостоятельно. Если нет — просто отдайте это программисту, он сделает за 5 минут. Ваша задача останется только в том, чтобы правильно разметить рекламные источники. Причем сделать это бесплатно

Как видите, в такой реализации мы подменяем текстовый контент. Но программист разберется, как сделать это с картинками, кнопками и прочими элементами сайта.

Преимущества динамического контента

Со статическим контентом вести сайт проще. Но вариант «одно на всех» сейчас уже не работает. Чем более общий ваш контент, тем меньше вероятность, что он кого-то заинтересует.

Динамический контент повышает ваши шансы на всем протяжении воронки продаж — сначала завлечь покупателя, быстро предложить ему то, что нужно, и сформировать лояльного постоянного клиента.

Заинтересовать и удержать пользователя

В компании Netflix, которая производит и распространяет фильмы и сериалы, очень заботятся о персонализации. Эта стратегия опирается на пользовательское поведение. По статистике, всего 20% аудитории сервиса ищут нужное видео через строку поиска, остальные 80% выбирают видео из рекомендаций. При этом средний пользователь тратит до 90 секунд на выбор и успевает просмотреть описания к 10-20 фильмам или сериалам. Затем он теряет интерес и уходит.

Значит, рекомендации нужно подбирать под интересы каждого конкретного пользователя. В Netflix для этого создали целую систему алгоритмов динамического контента, которая меняет рекомендации после каждого открытого анонса. В компании заявляли, что это оказалось очень выгодно: рекомендации спасают от потери 1 миллиарда долларов каждый год. При том, что всего на производство глобального контента в Netflix тратят 5 миллиардов в год.

Увеличить конверсии кликов и продаж

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

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

Сформировать лояльность

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

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

Каким должен быть мобильный продающий лендинг

Рассмотрим этот вопрос отдельно, так как важно сделать не только мобильную версию сайта, но и оптимизировать ее, оставить самое необходимое и убрать ненужное

2. Значок корзины на странице

Если посетитель добавил товар в корзину, он должен видеть это. Оставьте корзину в шапке, чтобы можно было легко найти ее и перейти на эту страницу.

3. Правильно расположение кнопок

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

4. Прикрепление клавиатуры к формам

Удобно, когда нужно ввести цифры — автоматически прикрепить цифровую клавиатуру. Такой шаг поможет ускорить конверсию.

5. Выделение призыва к действию

На странице должен быть только один призыв к действию, как мы и говорили, чтобы внимание пользователей не рассеивалось. Чтобы привлечь внимание, используйте шрифты и контрастные цвета

На что еще обратить внимание?

  • Текст на кнопке. Используйте простой и понятный язык.
  • Расположение кнопки. Не помещайте рядом с отвлекающими элементами.
  • Размер кнопки. Apple рекомендует 44х44 пикселей, на основании юзабилити и среднего размера пальца. В 57 пикселей прекрасно вписывается указательный палец.

6. Закрепление хедера и футера

Это важно, особенно, если лендинг длинный и его нужно скроллить вниз. Исследование журнала Smashing Magazine показало, что закрепленные шапка и футер повышают скорость навигации на 22%

Как создать мультилендинг

  • Собственно подмена контента;
  • A/B тестирование оригинала посадочной страницы и версии страницы с подменяемыми элементами;
  • Статистика переходов и конверсий по кампании в целом и каждой связке в отдельности.
  • Пополнение бюджета через Yagla;
  • Решение вопросов по запуску и модерации рекламных кампаний через чат техподдержки Yagla.

С этим читают