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

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

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

Мультилендинг – это динамическая страница захвата. Она умеет менять своё содержимое в зависимости от различных параметров: 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).

 Скачать

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

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

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

comments powered by HyperComments
Alexandr Ushakov
2015-09-01 19:58:00
Огромное спасибо! Это действительно очень круто! Прописал подмены на 8000 ключевых запросов - все работает идеально! Скажите, а можно ли сделать подмену для картинок на лендинге?
soofft91
2015-09-03 00:09:00
8000 ого, круто!! )) Нужно немного дорабатывать скрипт. Готового у меня нету, но если хоть немного разбираетесь в js, то скорее всего разберётесь. Нужно в переменной с "фильтрами" после заголовка для подмены поставить ещё ";" и указать там сссылку на картинку. А дальше в этом куске кода: if(multi[0]){ ab_title=multi[0].val; var target = $('.multi'); //элемент для подмены target.html(ab_title); } добавлять в нужное место картинку
Александр Емельянов
2015-09-09 18:24:26
С яглой знаком, действительно не дешёвый сервис. Встроенный механизм подмены не подходит, т. к. он может менять только на ключевые запросы keyword, это плохо, т. к. далеко не все ключи подойдут для заголовка. Буду дальше разбираться, спасибо!
Александр
2015-09-09 18:15:54
С ЛПгенератором практически не работал, поэтому ничем помочь не могу. У них вроде бы есть свой функционал для подмены текста. Называется кажется "динамические переменные", но там можно изменять только текстовые блоки. Как вариант для настройки подмены контента на лпгенераторе можете использовать http://vk.cc/4b9AoJ , сервис не дешёвый, но крутой.
Александр Емельянов
2015-09-09 17:25:58
Добрый день Скажите, знакомы ли вы с платформой LPgenerator? Дело в том, что уже третий день пытаюсь интегрировать Ваш скрипт с лендингом, созданным на этой платформе. Т. к. у них нет хостинга, приходится заливать все через их собственный инструмент по работе со скриптами. Все что мог уже перепробовал, но так и не хочет работать. На другом (нормальном лендинге) все работает идеально. Может сможете подсказать как правильно его туда прописывать?
Zavgorodnij Eugeny
2015-09-09 15:36:04
спасибо! попробовал ваш скрипт js все работает попробую разобраться с php
Александр
2015-09-09 15:26:59
Здравствуйте. PHP это серверный язык, посмотреть написанный вами php код сможет только тот у кого есть доступ к вашему хостингу.. Для автоматизации можно использовать таблицы Excel.
Zavgorodnij Eugeny
2015-09-09 08:04:07
Добрый день, Александр! Скажите, а если я буду делать на php тогда получается список моих ключей (подмену буду делать по utm_keywords) будет виден любому желающему ? Есть ли какая-то возможность спрятать php код. И второй вопрос. Какой есть алгоритм автомизации процесса прописывания замен и размещения этого списка. Спасибо.
Александр
2015-09-07 18:12:29
Здравствуйте. Нужно самостоятельно к каждой ссылке в объявлениях добавлять его заголовок к utm меткам. У яндекса и гугла нету специального параметра для передачи заголовка.
Андрей Синяков
2015-09-07 15:17:34
Добрый день, Александр! Отличный скрипт. Есть вопрос, а существует ли возможность передавать именно заголовок объявления (шаблон) на страницу со сменой tilte или вызовом в любом месте, как у вас блок со стилем.??
Andrei Starchenkov
2015-09-03 18:57:21
Доброго времени суток! Спасибо вам огромное, за то , что выложили свои труды на всеобщее обозрение!) Могли бы поподробней объяснить как сделать замену изображений? Просидел весь день, но так и не понял, не силен еще в js.(
Александр
2015-09-06 01:27:21
Здравствуйте. Пожалуйста)) На следующей неделе, если будет время сниму мини урок как модифицировать данный скрипт. Если вам срочно, то пишите мне вконтакте или телеграме, я скину исходники.
Михаил Шаповалов
2015-10-17 22:16:12
я поставил скрипт без программиста, он работает, скажтите Александр, а как можно автоматизировать подстановку нужных фраз в метку?. Много там работы ручной
Александр
2015-10-11 21:29:46
Для работы скрипта мультилендинга необходимы только те скрипты которые присутствуют в архиве.
Александр
2015-09-23 23:48:26
Спасибо огромное Александр, самый лучший скрипт Ваш! Очень признателен за оказанную помощь чайнику в решении проблемы установки скрипта!
Тест
2015-09-30 17:32:39
Тест анонимного коментария
Тест
2015-09-30 17:32:52
выавыа авыа это не флут 100%
Александр
2015-09-30 17:33:03
да это не флуд
Максим Кириллов
2015-10-08 15:03:22
Скажите, а можно ли сделать подмену для картинок на лендинге? Тоже интересует данный вопрос, Александр проконсультируйте пожалуйста :)
Александр Панасевич
2015-10-09 10:36:04
Статья на 5+. Благодарю!Очень доступно и по сути
Даниил
2015-10-10 15:46:20
Спасибо большое за такое разжовывание. Только я не понимаю - в архиве нет нескольких файлов, на которые вы ссылаетесь скриптом. Типа maskedinput например. Их где взять? p.s. я не программист, но пытаюсь сделать сам
Александр
2015-10-18 17:40:33
Тут есть шаблоны для разных рекламных площадок: http://lozyuk.ru/tools/utm/
Михаил Шаповалов
2015-10-29 21:18:10
скажите почему не каждый ключ подходит для заголовка, и можно ли сделать 600 кейвордов в виджете? я пробовал но получалось что при вводе нового ключа выскакивал старый заголовок
Александр
2015-10-29 21:29:32
Покажите скриншот кода, или залейте его куда нибудь.
Сергей Меркулов
2015-11-02 14:44:09
Александр,доброго времени суток.А как сделать динамическую подмену другого контента,например фонового изображения?Заранее спасибо
Александр
2015-11-03 20:09:32
Доброго. Я вам уже в vk ответил)
Юрий Борзило
2015-11-03 21:17:56
Александр, напишите пожалуйста и мне ответ на этот вопрос. С подменой заголовков я справился, а как быть с другим контентом?
Александр
2015-11-03 21:31:58
Если вас тоже интересует подмена изображений, то я планирую записать на эту тему видео, но когда это будет не могу сказать, сейчас много работы не знаю когда время появиться. Можете подписаться на группу в vk там информация о выходе видео появиться в первую очередь.
nbsp
2015-11-05 10:55:26
Добрый день. Как использовать яндекс карты в скрипте? Принцип тот-же что и в описании в зависимости от запроса например переменная ?city=Астрахань с html текстом должна появляться карта с балуном. Лучше всего моим требованиям к картам на данный момент подходит конструктор яндекс карт.
Вадим Климов
2015-11-05 22:53:08
и мне тоже
Александр
2015-11-07 19:49:03
Если Вы хотите поспособствовать выходу нового видео или выразить благодарность автору блога, то сделать это можно тут: http://lozyuk.ru/tools/coffee/ В следующем видео я покажу как модифицировать скрипт мультилендинга, чтобы с его помощью делать подмену не только текста, но также любых изображений на вашем сайте.
Александр
2015-11-07 20:06:47
Здравствуйте. Вам нужно разбираться с api яндекс.карт. Я делал нечто похожее только без использования дополнительных параметров в url, а вместо этого получал город посетителя с помощью скрипта геотаргетинга http://lozyuk.ru/marketing/geotargeting/. Данный скрипт в качестве ответа выдаёт название города и его координаты. Координаты я использовал чтобы установить точку на карте на город посетителя. А в балуне писал что осуществляется доставка в указанный город. Если вам требуется такой функционал, пишите http://lozyuk.ru/contacts/, отдам исходник за символическую плату ))
вадим
2015-11-08 02:16:23
после того как увижу в работе скрипт - обещаю "кофе", даю слово.
Владимир
2015-11-11 18:13:59
Здравствуйте, Александр. Не работает скрипт и не могу найти ошибку. Три файла с библиотеками я поместил в папку js_utm . На странице подключаю библиотеки затем проверяю подключение jquery скриптом if (window.jQuery) alert("jQuery подключен"); else alert("jQuery не подключен"); $(document).ready(function(){ alert(jQuery.fn.jquery); }); присваиваю заголовку класс multi, проверяю и не работает. /Может Вам бросается в глаза какая-то ошибка, помогите пожалуйста, больно уж скрипт хороший у Вас
Владимир
2015-11-11 18:17:16
как заработает, кофе с меня обязательно
Александр
2015-11-11 22:05:22
Здравствуйте. Пришлите ссылку на сайт.
Владимир
2015-11-12 13:49:14
вот так я пытаюсь проверить http://indego.ru/design1.php?utm_term=Краснодар слово "Краснодар" у меня прописано в js файле. Вот в верхнем правом углу страницы слово "Заголовок" как раз имеет класс multi
Владимир
2015-11-12 13:52:26
http://indego.ru/design1.php?utm_term=Краснодар Слово "Краснодар" прописано в js файле . Слово "Заголовок" имеет класс multi
Владимир
2015-11-12 16:55:41
Простите, не пойму, пишу комментарии и потом их не вижу, они на модерацию уходят?
Владимир
2015-11-12 16:58:10
Еще раз попробую. http://indego.ru/design1.php?utm_term=Краснодар . Слово "Краснодар" прописано в js файле. Слово "Заголовок" на странице присвоен класс multi
Александр
2015-11-12 17:00:12
Коментарии с ссылками модерируються, скоро отвечу по вашему сайту.
Александр
2015-11-12 17:03:58
Попробуйте в скрипте utm_multi_vid.js заменить знаки "$" на "jQuery"
Владимир
2015-11-12 17:12:56
Понятно, а тут стараюсь))) простите, что письмами закидал
Владимир
2015-11-12 18:08:18
поменял, пока не помогло
Александр
2015-11-12 18:29:59
Александр
2015-11-12 18:31:41
тут jQuery обратно на $ поменяйте. Если не заработает пишите мне в vk или на почту, чтобы не засорять комментарии. http://lozyuk.ru/contacts/
Владимир
2015-11-12 18:38:41
поправил, не помогло
Александр
2015-11-12 18:49:38
Отписал Вам на почту.
Владимир
2015-11-12 18:58:40
написал в vk
Olgerd
2015-11-13 04:54:30
Пытался прикрутить на сайт в Muse. Пробовал прикрутить все три варианта - ни один не работает, даже на php. Ума не приложу что не так...
Юрий Борзило
2015-11-13 12:20:05
Купите виджет мультилендинга для мьюз есть специальный и не парьтесь
Александр
2015-11-13 19:35:46
Проблема в самом "Muse", к нему нужен особый подход)) Напишите мне в vk перешлю вам решение https://vk.com/id27745963
дмитрий
2015-11-19 22:54:51
ничего не работает
Александр
2015-11-21 13:42:59
Напишите мне в vk
Noble Home
2015-12-18 04:02:01
Получил проект мечты, идея, видение, но не могу показаться, чтобы получить достаточное финансирование для него? Хотите отпуск мечты для вас и вашей семьи, идти к мечте дома или платить за это мечта школу своих детей, но не могу себе это позволить? Вы нужны срочные средства, но была отвергнута банком, вы не можете поддерживать все бумаги произведения или гарантию и проценты? Вы деловой человек с творческим и инновационных идей, компаний и нуждаются в финансировании, чтобы начать или расширить свой бизнес? Свяжитесь с нами сегодня и получить финансирование которых они нуждаются. Мы предлагаем широкий спектр финансовых средств для удивительных и доступным ценам. Электронная почта к нам сегодня и получите адекватное финансирование вам нужно, чтобы ваши мечты сбылись. Мы предлагаем широкий спектр услуг, начиная от: 1. Активы Кредиты (дома, земля) 2. Кредиты кредиты средних и крупных 3. Образовательные кредиты (для студентов) 4. кредиты Авто 5. Ассоциация / Совместное финансирование 6. Бизнес Активизация. Для получения более подробной информации о наших услугах, Почта Сейчас: noblefinancehomes@gmail.com
Alexandr Podrezov
2016-01-27 09:33:07
У меня есть скрипт PHP. Вполне рабочий и опробованный. В качестве значения параметра utm_term не задавайте жестко, а используйте {keyword}. Яшка или Гошка сами подставят в это место фразу из поискового запроса и будет вам счастье :-)
Gae
2016-02-01 05:41:35
Такая же проблема.
Александр
2016-02-01 15:51:55
Пишите мне Вконтакте https://vk.com/id27745963 сразу скидывайте ссйлку на сайт
Юрий Панфилов
2016-02-09 20:52:22
Александр, а если нужно подменять заголовок на ключ из кампании и их 1000 или 2000?
Александр
2016-02-09 21:27:04
Из кампании можно передавать ключи в UTM-метках. Дальше просто вставляете их в нужные места с помощью php или js на крайний случай.
Аркадий Паровозов
2016-03-02 13:10:44
Здравствуйте Александр, появилась необходимость разместить скрипт на движке Wordpress, подскажите пожалуйста, в какой папке необходимо размещать скрипт и в какой файл нужно прописывать классы. Это папки темы или контента или wp-admin или создавать новую папку для скрипта а присваивать класс тогда в каком файле (основного сайта, темы или конкретной странице). Если можно по подробнее. Спасибо !
Аркадий Паровозов
2016-03-02 13:13:38
Подскажите пожалуйста, а где можно найти урок или узнать подробности по вопросу выше "А как сделать динамическую подмену другого контента,например фонового изображения?"
Александр
2016-03-02 20:31:43
Урока пока нету. Могу скинуть пример кода который делает подмену изображений - пишите мне вконтакте
Александр
2016-03-02 20:42:04
Здравствуйте. Смотря в каком месте нужно делать подмену, если в шаблоне - то прописывать классы нужно в файлах шаблона. Сам скрипт без разницы куда вы установите, главное установить правильные пути при их подключении.
Юра Жигалов
2016-03-10 01:13:24
Есть готовое решение скрипта через файл excel ? Сколько будет разработать скрипт в котором информация для замены берется из excel файла, заменят текст в различных местах и изображения. ?
Турбаз Турбазов
2016-04-05 19:39:54
Александр доброго дня,помогите плиз все сделал по вашей инструкции, но не работает...
Роман Петров
2016-04-07 05:06:33
И мне тоже пожалуйста!
Александр
2016-04-07 12:53:58
Пишите мне Вконтакте или Телеграме (http://lozyuk.ru/contacts/), Сразу кидайте ссылку на сайт, чтобы как то помочь нужно смотреть сайт.
Александр
2016-04-07 13:12:16
Пишите мне в ВК. На будущее всем кому нужен пример кода, лучше сразу пишите мне Вконтакте или Телеграме http://lozyuk.ru/contacts/
Rustem Rustem
2016-04-17 20:24:33
Спасибо большое, все отлично работает.
Иван Сергеевич
2016-04-28 14:02:05
Можно сделать на чистом php
Александр
2016-05-14 23:17:13
Можно на любом языке сделать, в статье JS потому что он универсален для всех сайтов.
Константин
2016-05-18 10:28:31
Я с вордпрессом запарился пока его подключил. Подключать нужно через функции в файле function.php темы. располагать файлы можно где хочешь, главное путь указать правильно потом.
Владислав
2016-06-30 13:38:42
Не работает. Все делал по инструкции. ozabore.ru Вот что выдает: utm_multi_vid.js:21 Uncaught TypeError: $.cookie is not a function(anonymous function) @ utm_multi_vid.js:21each @ app.js:2(anonymous function) @ utm_multi_vid.js:20c @ jquery-1.10.2.min.js:4fireWith @ jquery-1.10.2.min.js:4ready @ jquery-1.10.2.min.js:4q @ jquery-1.10.2.min.js:4
Павел Комар
2016-10-02 12:42:36
Добрый день! Можете помочь с установкой скрипта на вордпресс?
Андрей Белоусов
2016-11-15 16:03:46
Александр! А можно ли реализовать UTM-метки для каждой статьи на сайте? Просто у меня сайт про мед.препараты, и поэтому в заглавии мне нужно отображать их синонимы!
Александр
2016-11-15 23:01:14
Ответил вам Вконтакте
Илья Лунёв
2017-01-29 23:36:29
Я так понимаю, он подменяет только слова, будет ли версия с возможностью подмены картинок?