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

Здравствуйте, дорогие друзья!

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

Мультилендинг – это динамическая страница захвата. Она умеет менять своё содержимое в зависимости от различных параметров: utm-меток, источника перехода, поискового запроса, местонахождения пользователя, времени посещения сайта и так далее.

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

Рассмотрим пример. Есть лендинг на котором продаются разные виды цветов (розы, тюльпаны, ромашки и т.д.). Пользователь вбивает в поисковой строке Яндекса «купить розы», переходит по объявлению и попадает на наш сайт.

В случае обычного сайта он увидит обобщённое УТП (уникальное торговое предложение) и большой ассортимент разных цветов, большая часть из которых ему совершенно не интересна, ведь он искал именно розы.

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

multylanding

Пример того как работает мультилендинг

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

Скрипт для создания мультилендига

Данный JavaScript код проверяет наличие параметра "utm_content" в адресе страницы и в зависимости от его значение подставляет разные заголовки. Немного расширив этот скрипт можно делать любые изменения на странице.

Посмотреть пример   Скачать

В первой строке мы подключаем jQuery библиотеку, если у вас она уже была подключена, то не надо это делать повторно.

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

Строки 10-13 отвечают за проверку значения указанного параметра на определённые значения, если какое то из значений совпадает, то скрипт меняет содержимое объекту с классом "multi-title".

Рассмотрим 10 строку подробней, т.к. именно на её основе вам нужно будет адаптировать этот скрипт под свои нужды. "eng" – это значение параметра при совпадении с которым будут применяться изменения. ".multi-title" – это класс объекта к которому будут применяться изменения. "английского" – это новое содержимое для указанного ранее объекта.

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

Этот код выполняет точно такую же функцию как и предыдущий, но делает это мгновенно даже на очень тяжёлых сайтах.

UPD от 07.2015:

С момента написания этой статьи я существенно доработал JS скрипт для создания мультилендинга. Предыдущая версия скрипта прекрасно справляется со своей задачей, но имеет несколько недостатков. Один из которых: при использовании параметра для utm меток {keyword} при переходе с контекстной рекламы, вы не могли подстраивать сайт под поисковой запрос посетителя, потому что в скрипте нужно было указывать точное значение параметра.

В новом скрипте можно создать шаблоны для подмены на основе встречаемого слова (шаблоны определяются в переменной multi).

 Скачать

О том как работать с этим скриптом подробно рассказываю в видео.

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

Нанять программиста можно на бирже фрилансеров или вы можете обратиться ко мне – мои контакты.

  • Alexandr Ushakov

    Огромное спасибо! Это действительно очень круто! Прописал подмены на 8000 ключевых запросов — все работает идеально!
    Скажите, а можно ли сделать подмену для картинок на лендинге?

    • soofft91

      8000 ого, круто!! ))

      Нужно немного дорабатывать скрипт. Готового у меня нету, но если хоть немного разбираетесь в js, то скорее всего разберётесь.

      Нужно в переменной с «фильтрами» после заголовка для подмены поставить ещё «;» и указать там сссылку на картинку. А дальше в этом куске кода:

      if(multi[0]){
      ab_title=multi[0].val;
      var target = $(‘.multi’); //элемент для подмены
      target.html(ab_title);
      }

      добавлять в нужное место картинку

  • Andrei Starchenkov

    Доброго времени суток! Спасибо вам огромное, за то , что выложили свои труды на всеобщее обозрение!) Могли бы поподробней объяснить как сделать замену изображений? Просидел весь день, но так и не понял, не силен еще в js.(

    • https://vk.com/id27745963 Александр

      Здравствуйте. Пожалуйста))
      На следующей неделе, если будет время сниму мини урок как модифицировать данный скрипт.

      Если вам срочно, то пишите мне вконтакте или телеграме, я скину исходники.

  • http://vk.com/id12643826 Андрей Синяков

    Добрый день, Александр! Отличный скрипт.
    Есть вопрос, а существует ли возможность передавать именно заголовок объявления (шаблон) на страницу со сменой tilte или вызовом в любом месте, как у вас блок со стилем.??

    • https://vk.com/id27745963 Александр

      Здравствуйте.
      Нужно самостоятельно к каждой ссылке в объявлениях добавлять его заголовок к utm меткам. У яндекса и гугла нету специального параметра для передачи заголовка.

  • https://www.facebook.com/app_scoped_user_id/1010760205640061/ Zavgorodnij Eugeny

    Добрый день, Александр!
    Скажите, а если я буду делать на php тогда получается список моих ключей (подмену буду делать по utm_keywords) будет виден любому желающему ? Есть ли какая-то возможность спрятать php код. И второй вопрос. Какой есть алгоритм автомизации процесса прописывания замен и размещения этого списка. Спасибо.

    • https://vk.com/id27745963 Александр

      Здравствуйте.
      PHP это серверный язык, посмотреть написанный вами php код сможет только тот у кого есть доступ к вашему хостингу..
      Для автоматизации можно использовать таблицы Excel.

      • https://www.facebook.com/app_scoped_user_id/1010760205640061/ Zavgorodnij Eugeny

        спасибо!
        попробовал ваш скрипт js все работает
        попробую разобраться с php

  • http://vk.com/id35858838 Александр Емельянов

    Добрый день
    Скажите, знакомы ли вы с платформой LPgenerator?
    Дело в том, что уже третий день пытаюсь интегрировать Ваш скрипт с лендингом, созданным на этой платформе. Т. к. у них нет хостинга, приходится заливать все через их собственный инструмент по работе со скриптами.
    Все что мог уже перепробовал, но так и не хочет работать.
    На другом (нормальном лендинге) все работает идеально.
    Может сможете подсказать как правильно его туда прописывать?

    • https://vk.com/id27745963 Александр

      С ЛПгенератором практически не работал, поэтому ничем помочь не могу. У них вроде бы есть свой функционал для подмены текста. Называется кажется «динамические переменные», но там можно изменять только текстовые блоки.

      Как вариант для настройки подмены контента на лпгенераторе можете использовать http://vk.cc/4b9AoJ , сервис не дешёвый, но крутой.

      • http://vk.com/id35858838 Александр Емельянов

        С яглой знаком, действительно не дешёвый сервис.
        Встроенный механизм подмены не подходит, т. к. он может менять только на ключевые запросы keyword, это плохо, т. к. далеко не все ключи подойдут для заголовка.
        Буду дальше разбираться, спасибо!

  • Александр

    Спасибо огромное Александр, самый лучший скрипт Ваш! Очень признателен за оказанную помощь чайнику в решении проблемы установки скрипта!

  • http://vk.com/id39267783 Максим Кириллов

    Скажите, а можно ли сделать подмену для картинок на лендинге?

    Тоже интересует данный вопрос, Александр проконсультируйте пожалуйста :)

  • http://vk.com/id25279892 Александр Панасевич

    Статья на 5+. Благодарю!Очень доступно и по сути

  • Даниил

    Спасибо большое за такое разжовывание.
    Только я не понимаю — в архиве нет нескольких файлов, на которые вы ссылаетесь скриптом. Типа maskedinput например.
    Их где взять?
    p.s.
    я не программист, но пытаюсь сделать сам

  • https://vk.com/id27745963 Александр

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

  • http://vk.com/id192061598 Михаил Шаповалов

    я поставил скрипт без программиста, он работает, скажтите Александр, а как можно автоматизировать подстановку нужных фраз в метку?. Много там работы ручной

  • https://vk.com/id27745963 Александр

    Тут есть шаблоны для разных рекламных площадок: http://lozyuk.ru/tools/utm/

  • http://vk.com/id192061598 Михаил Шаповалов

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

    • https://vk.com/id27745963 Александр

      Покажите скриншот кода, или залейте его куда нибудь.

  • http://vk.com/id23383114 Сергей Меркулов

    Александр,доброго времени суток.А как сделать динамическую подмену другого контента,например фонового изображения?Заранее спасибо

  • https://vk.com/id27745963 Александр

    Доброго. Я вам уже в vk ответил)

  • http://vk.com/id181879434 Юрий Борзило

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

    • https://vk.com/id27745963 Александр

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

  • nbsp

    Добрый день.
    Как использовать яндекс карты в скрипте? Принцип тот-же что и в описании в зависимости от запроса например переменная ?city=Астрахань с html текстом должна появляться карта с балуном. Лучше всего моим требованиям к картам на данный момент подходит конструктор яндекс карт.

  • http://vk.com/id38198296 Вадим Климов

    и мне тоже

  • https://vk.com/id27745963 Александр

    Если Вы хотите поспособствовать выходу нового видео или выразить благодарность автору блога, то сделать это можно тут: http://lozyuk.ru/tools/coffee/

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

  • https://vk.com/id27745963 Александр

    Здравствуйте. Вам нужно разбираться с api яндекс.карт.

    Я делал нечто похожее только без использования дополнительных параметров в url, а вместо этого получал город посетителя с помощью скрипта геотаргетинга http://lozyuk.ru/marketing/geotargeting/. Данный скрипт в качестве ответа выдаёт название города и его координаты.

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

    Если вам требуется такой функционал, пишите http://lozyuk.ru/contacts/, отдам исходник за символическую плату ))

  • вадим

    после того как увижу в работе скрипт — обещаю «кофе», даю слово.

  • Владимир

    Здравствуйте, Александр. Не работает скрипт и не могу найти ошибку.

    Три файла с библиотеками я поместил в папку js_utm . На странице подключаю библиотеки

    затем проверяю подключение jquery скриптом

    if (window.jQuery) alert(«jQuery подключен»);
    else alert(«jQuery не подключен»);

    $(document).ready(function(){
    alert(jQuery.fn.jquery);
    });

    присваиваю заголовку класс multi, проверяю и не работает. /Может Вам бросается в глаза какая-то ошибка, помогите пожалуйста, больно уж скрипт хороший у Вас

  • Владимир

    как заработает, кофе с меня обязательно

  • https://vk.com/id27745963 Александр

    Отписал Вам на почту.

  • Olgerd

    Пытался прикрутить на сайт в Muse. Пробовал прикрутить все три варианта — ни один не работает, даже на php. Ума не приложу что не так…

  • http://vk.com/id181879434 Юрий Борзило

    Купите виджет мультилендинга для мьюз есть специальный и не парьтесь

  • https://vk.com/id27745963 Александр

    Проблема в самом «Muse», к нему нужен особый подход))
    Напишите мне в vk перешлю вам решение https://vk.com/id27745963

  • https://www.facebook.com/app_scoped_user_id/808955745882481/ Alexandr Podrezov

    У меня есть скрипт PHP. Вполне рабочий и опробованный. В качестве значения параметра utm_term не задавайте жестко, а используйте {keyword}. Яшка или Гошка сами подставят в это место фразу из поискового запроса и будет вам счастье :-)

  • Gae

    Такая же проблема.

  • https://vk.com/id27745963 Александр

    Пишите мне Вконтакте https://vk.com/id27745963 сразу скидывайте ссйлку на сайт

  • http://vk.com/id211287328 Юрий Панфилов

    Александр, а если нужно подменять заголовок на ключ из кампании и их 1000 или 2000?

  • https://vk.com/id27745963 Александр

    Из кампании можно передавать ключи в UTM-метках. Дальше просто вставляете их в нужные места с помощью php или js на крайний случай.

  • http://vk.com/id264132120 Аркадий Паровозов

    Здравствуйте Александр, появилась необходимость разместить скрипт на движке WordPress, подскажите пожалуйста, в какой папке необходимо размещать скрипт и в какой файл нужно прописывать классы. Это папки темы или контента или wp-admin или создавать новую папку для скрипта а присваивать класс тогда в каком файле (основного сайта, темы или конкретной странице). Если можно по подробнее. Спасибо !

  • http://vk.com/id264132120 Аркадий Паровозов

    Подскажите пожалуйста, а где можно найти урок или узнать подробности по вопросу выше «А как сделать динамическую подмену другого контента,например фонового изображения?»

  • https://vk.com/id27745963 Александр

    Урока пока нету. Могу скинуть пример кода который делает подмену изображений — пишите мне вконтакте

  • https://vk.com/id27745963 Александр

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

  • http://vk.com/id9460063 Юра Жигалов

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

  • http://vk.com/id187729972 Турбаз Турбазов

    Александр доброго дня,помогите плиз все сделал по вашей инструкции, но не работает…

  • http://vk.com/id2297968 Роман Петров

    И мне тоже пожалуйста!

  • https://vk.com/id27745963 Александр

    Пишите мне Вконтакте или Телеграме (http://lozyuk.ru/contacts/), Сразу кидайте ссылку на сайт, чтобы как то помочь нужно смотреть сайт.

  • https://vk.com/id27745963 Александр

    Пишите мне в ВК.
    На будущее всем кому нужен пример кода, лучше сразу пишите мне Вконтакте или Телеграме http://lozyuk.ru/contacts/

  • http://vk.com/id186105409 Rustem Rustem

    Спасибо большое, все отлично работает.

  • http://vk.com/id24941233 Иван Сергеевич

    Можно сделать на чистом php

  • https://vk.com/id27745963 Александр

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

  • Константин

    Я с вордпрессом запарился пока его подключил. Подключать нужно через функции в файле function.php темы. располагать файлы можно где хочешь, главное путь указать правильно потом.

  • https://plus.google.com/115562181040536260123 Андрей Белоусов

    Александр! А можно ли реализовать UTM-метки для каждой статьи на сайте? Просто у меня сайт про мед.препараты, и поэтому в заглавии мне нужно отображать их синонимы!

  • https://vk.com/id27745963 Александр

    Ответил вам Вконтакте

  • http://vk.com/id724723 Илья Лунёв

    Я так понимаю, он подменяет только слова, будет ли версия с возможностью подмены картинок?