Скрипт конструктора landing page
Хочешь увеличить конверсию на лендинге на 30% за 5 минут? Для этого нужно всего лишь… ладно, это был небольшой кликбейт, тем не менее, сегодня мы говорим про базовые скрипты, которые используются в продажах и могут существенно увеличить показатели вашей посадочной страницы.
О чем речь? Таймер обратного отсчета, back-button скрипты (подмена кнопки "назад"), iframe для сайта конструкторов и прочее… Те маленькие хитрости, которые помогают удержать внимание пользователя, домонетизировать трафик или скрыть от модераторов то, что им не нужно видеть :)
Сразу скажем, что данные скрипты не претендуют на звание сенсации, это вполне базовые вещи, которые используются на лендингах, тем не менее, они полезны и просты в применении - пользуйтесь.
Базовый скрипт таймера обратного отсчета
Адаптация нашего друга - Желтого Веба (интервью здесь) достаточно несложного скрипта. Нужно добавить таймер обратного отсчета, чтобы подогреть пользователя к решению - держите готовый скрипт.
Внутри есть комментарии (какой параметр за что отвечает) для тех, кто не силен в коде.
Использовать просто: создаём несколько тегов под часы-минуты-секунды и, собственно, всё.
Скажем, как-нибудь так:
Подменяем историю браузера пользователя
Данные скрипты работают с кнопкой "назад" в браузере пользователя и подменяют страницу на ту, которая нужна вам. Либо просто "отключают" кнопку, отправляя пользователя на тот же сайт.
Скрипт опубликовал Трон, за что ему отдельное спасибо!
Копируем код ниже, вставляем сразу после тега , сохраняем изменения.
onpopstate = function (t)
t.state && location.replace("https://yandex.ru") //Ставим свою ссылку
По наблюдениям автора: порядка 50% пользователей нажимают кнопку “назад”, вместо того, чтобы просто закрыть страницу - этим нужно пользоваться!
Также есть варианты от Желтого Веба:
-
, которая работает с десктопными браузерами. , который просто отключает кнопку "назад".
Простой iframe для тех, кто использует сайты-конструкторы
Не нужно лишних слов! Если вы не знаете, как сделать iframe, закрывающий полностью весь сайт-конструктор - пользуйтесь:
Да, вещь максимально простая, но пусть будет под рукой.
Скрипт проброса меток в конструкторе для подтягивание статистики
Небольшой скрипт для ваших конструкторов, поддерживающих Javascript от Желтого. С его помощью можно пробросить все метки, которые были установлены вами, скажем, в Facebook, в трекер. Таким образом будет корректно тянуться вся стата, соответственно и расходы.
var hvost = window.location.search.substring(1);
var elements = document.getElementsByTagName('a');
var newHref = elements[i].href;
if (newHref.indexOf("?")==-1) newHref += "?";
if (hvost!="") elements[i].href = newHref + hvost;
Скрипт актуален для конструкторов типа: shopify, github, wix, tilda.
Скрипт работы с автоправила в Facebook
Альтернатива данному решению от Трона. Скрипт по работе с автоправилами. Копирует, сохраняет в шаблон, устанавливает на аккаунты.
Если коротко: качаем, кидаем на хостинг содержимое архива, устанавливаем максимальные разрешения для папки "пресеты" и файла "бейс.тхт", переходим по адресу куда закинули все (домен, домен/папка и т.д), остальное все должно быть интуитивно понятно.
Если непонятно, тогда вот подробное руководство:
1. Качаем архив, закидываем на хостинг и устанавливаем права доступа на папку «presets» и файл «base.txt»:
2. Добавляем аккаунт, нажав на "крестик":
Таблица имеет древовидную структуру. Изначально мы видим «Соц» аккаунты, но если нажать «+» таблица разворачивается и мы можем увидеть БМы и РА (Рекламные аккаунты) на них.
Name — Имя соца, БМа, РА. Name2 — Имя которое присвоили вы. А.П. — Автоправила. В скобках количество автоправил на Соце, вне скобок общее количество, на всех зависимых РА+Соц. Update — Обновление данных по аккаунту. Delete — Удаление аккаунта из скрипта.
3. Сохранение набора автоправил в шаблон.
4. Установка автоправил на аккаунты.
1 — Отмечаем чекбоксы с аккаунтами на которые хотите установить автоправила. 2 — Выбираем шаблон который хотите установить. 3 — Жмем «Применить данный пресет». Ждем пока страница не перезагрузится, если аккаунтов будет выбрано много, то придется подольше подождать.
5. Собственно все, пользуйтесь на здоровье!
Вывод
Даже если вы далеки от программирования и базового понимания кода - это не означает, что работа со скриптами и правки лендинга вам противопоказаны. В сети есть масса полезных готовых скриптов, которые нужно просто скачать и установить. Они позволяют значительно упростить работу, а также увеличить показатели конверсии лендингов.
Безусловно, под собственные авторские разработки нужен хороший программист, но если задача простая - скорее всего, решение на нее уже есть в открытом доступе.
В данной статье мы собрали для вас несколько простых, но полезных скриптов, которые могут быть полезны. Пользуйтесь :)
Отдельное спасибо Желтому Вебу, Трону и каждому, кто внес свою строчку кода в разработку.
Привет, друзья! В интернет-маркетинге уже давно используются так называемые посадочные страницы, они же лендинги. Опытным путем было выяснено, что конверсия у них в разы выше. Но прогресс не стоит на месте и появилась такая штука, как мультилендинг, эффективность которых зачастую еще лучше. Вот только мало кому позволяют знания внедрить такую штукенцию в свои проекты. Но после прочтения этой статьи вы убедитесь в том, что это не так страшно, как вам казалось. Давайте для начала разберемся в некоторых понятиях.
Что такое мультилендинг простыми словами
Принцип создания мультилендинга прост. Необходимо создать условия, в зависимости от которых будет показан тот или иной контент. Другими словами — если существует определенная UTM-метка, то показывать одно, если другая метка — показывать второе, если еще одна — третье и так далее. таким образом страница будет соответствовать и объявлению и самому запросу. Сравните эти 2 варианта.
Рабочий скрипт мультилендинга
Теперь разберем скрипт мультилендинга. В самом начале 1 и 2 строка — мы объявили 2 переменные и присвоили им значение по умолчанию. То есть, что будет подставлено в них в случае, когда никаких меток в ссылке не будет. И далее на 4, 8, 12 и 16 строках идет проверка на существование определенных меток и в зависимости от того, какая из них существует — присваивать переменной значение. utm_term=fialka — метка, которую вы заранее прописали под конкретную ключевую фразу. Посмотрите как работает мультилендинг на живом примере.
Как видите, сделать мультилендинг не сложно. Основные трудности в том, что нужно прописывать метки вручную. Это немного утомительно, особенно, если объявлений очень много. Есть специальная платформа, типа Тильда или Ягла, где можно их копипастить, но все равно потратите энное количество времени. Но результат практически всегда оправдывает усилия, тем более если немного проявить фантазию, то на мультилендинге можно поменять не только заголовок и изображение, но и целые блоки, а то и всю страницу целиком. Делается это по тому же принципу, все, что нужно показать по тем или иным ключевым словам — заносим в переменную. Так же условий может быть гораздо больше. Для определенного типа трафика показывать персонифицированное предложение или простое приветствие. Например. если переход был из социальной сети vk, то создать УТП специально для тех, кто пришел именно оттуда. Я думаю смысл вы уловили. Цель — повышение конверсии. Если есть вопросы по этой теме -задавайте их в комментариях.
Landing Page удобен для бизнесменов тем, что его можно сделать буквально за один день. Если скачать шаблон сайта Landing Page в готовом виде, то сделать одностраничник своей компании можно за минимальную сумму, так как оплачивать придётся только хостинг. В данной категории Вы можете скачать свежие и адаптивные наблоны Landing Page на различную тематику Вашего бизнеса.
HTML шаблон для сайта SEO маркетинга — Onix Digital
Onix Digital — современный HTML шаблон для сайта SEO маркетинга. Этот одностраничный бесплатный макет CSS включает карусели контента, таблицы цен, вкладки .
HTML шаблон для сайта цифрового маркетинга — SEO Dream
SEO Dream — отличный HTML шаблон для сайта цифрового маркетинга. Это одностраничный макет HTML5 с анимированными элементами страницы и красивыми векторными .
Одностраничный адаптивный HTML шаблон — Upright
Upright — это одностраничный адаптивный и полноразмерный HTML шаблон со столбцом параллаксного изображения. Этот одностраничный макет имеет галерею с .
Одностраничный HTML шаблон — Ocean Vibes
Ocean Vibes — это профессиональный одностраничный HTML шаблон, содержит видео-баннер. Во всплывающем окне содержимого открываются 5 страниц. В этом макете .
Landing Page шаблон — Nova
Nova — современный Landing Page шаблон целевой страницы приложения с высокой конверсией, который очень легко настроить в соответствии с вашими потребностями .
Landing Page шаблон — Lums
Lums — отличный Landing Page шаблон. Шаблон концепция SEO, приложения, программного обеспечения, маркетинга, агентства, одной страницы, Sass, запуска шаблона .
Landing Page шаблон — Nexus
Nexus — современный Landing Page шаблон целевой страницы, который очень легко настроить в соответствии с вашими потребностями, для продвижения мобильных .
Landing Page шаблон — Zeino
Zeino — отличный Landing Page шаблон целевой страницы программного приложения с несколькими концепциями, специально разработан для любого типа мобильного .
Landing Page шаблон — Carroll
Carroll — профессиональный Landing Page шаблон целевой страницы приложения, отзывчивый, чистый и современный шаблон для целевых страниц, сделано 5 вариантов .
Landing Page шаблон — ICO
ICO — современный Landing Page шаблон Crypto BlockChain Parallax разработан для компании и агентства ico. Шаблон оптимизирован для индустрии советников ICO и .
В прошлой статье я сделал небольшой анонс скрипта мультилендинга, который начал разрабатывать, и обещал, что на днях выложу.
Думаю, время пришло, и есть что показать. Будем считать эту версию 0.01 и впереди есть 99 версий улучшений, до того момента, как можно будет сказать, что скрипт нормально работает и " шалость удалась ", идея удалась.
Сейчас, многое, что не совершенно с точки зрения организации кода, его оптимизации и безопасности. Но он справляется со своей работой. Процесс добавления UTM меток и фраз - выглядит следующим образом:
Как видите, пока можно только добавлять и удалять. Позже буду пробовать сделать так, чтобы была возможность и редактирования фраз. Хочу обратить внимание на то, что пока работаем только со значением utm_content. Также, имейте ввиду, что фразы и значение метки подставляются с большой буквы. Это сделано для того, чтобы не было путаницы и все приведено к общему виду. Так что, даже если вы напишите все хоть большими буквами, в базу данных значения запишутся в таком виде, который вы видите на скрине.
Слева есть меню, которое, пока, всего с двумя полями:
Для того, чтобы попасть в админку, предварительно нужно задать пароль и логин в файле config.php, который расположен в корне папки со скриптом:
По умолчанию логин и пароль root1. Не забудьте поменять на свой. Тут же нужно указать и фразу, которая будет выводиться, если в базе не найдется совпадения пришедшего значения UTM метки. То есть если UTM метка не указана в базе, то будет выводиться значение по умолчанию, которое вы укажите в этом файле.
Подключение скрипта мультилендинга
Теперь, давайте поговорим о подключении. Давайте по шагам.
- Скачиваете архив со скриптом и распаковываете в корень вашего сайта. В результате чего у вас появиться папка ml в корне проекта.
- Если ваш индексный файл был в формате html, то меняем расширение на php.
- В папке ml находим файл config.php и задаем логин и пароль для входа в админку, а также не забываем указать фразу, которая будет выводиться по умолчанию (то есть стандартный ваш заголовок).
- После входа в админку прописываем соответствие фраз и параметров UTM меток. Как я уже говорил, пока ориентируемся только на параметр utm_content.
- А потом, в индексном файле вашего сайта, перед , то есть в самом начале подключаем файл main_iclude_file.inc.php следующим образом:
- Теперь нам доступна переменная $keyword, которая и содержит нашу заготовленную фразу. Осталось вывести ее, например в теге h1:
Еще раз скажу, что буду благодарен за любые советы, идеи и предложения. Сильно не пинайте за код, а за конкретные правки в нем, буду только благодарен. Спасибо, что помогаете.
Привет, друзья и коллеги. Мне тут некоторые жалуются, что заказчики часто просят лендинги с админкой. Чтобы можно было быстро поменять какой-то текст на посадочной странице. И действительно, для заказчика это очень удобно, но нам, разработчикам, нет смысла использовать какую-то тяжелую CMS типа Битрикса, Joomla или WordPress, ведь это будет только одна страница, и подключать такие тяжелые вещи ради визуального редактора не совсем рационально, а других возможностей от этих CMSок мы практически не получаем.
Разрабатывать свою CMS (для меня) - тоже не вариант. Во-первых, нужно обладать определенным багажом знаний, во-вторых - это потраченное время, а в-третьих - зачем изобретать велосипед?
В связи с этим я решил поискать легкие CMS, которые подошли бы для landing page, не заставляли бы создавать базы данных, легко бы подключались к любому проекту, и позволяли бы заказчику легко менять контент на его посадочной странице. Как ни странно, я довольно быстро нашел потрясающую CMS, которая справляется с этой задачей. Вот и спешу с вами поделиться своей находкой.
CMS для лендинг пейдж
Прежде чем начать настройку и описание, еще раз хочу обратить ваше внимание на то, что мы говорим о CMS не о как конструкторе лендинга, а как о визуальном редакторе посадочной странице. То есть, это такой редактор, при помощи которого заказчик сможет легко поменять текст и картинки на лендинге и ему не нужно будет лезть в код.
Теперь можно переходить непосредственно к CMS - я выбрал Sitecake. Это действительно удобно. Чтобы понять, как это работает, предлагаю посмотреть демонстрационный ролик. А потом, я покажу как подключить все это дело:
Ну как впечатления? Мне кажется это очень круто, удобно и к тому же бесплатно . Нет, платные тарифы конечно есть (от 19 до 250$), но они больше для брендирования.
На сайте разработчика больше нет бесплатной версии. Минимальная стоимость 19$. Есть возможность попробовать в течении 30 дней.
В платной версии можно поставить свой логотип в редакторе, вместо логотипа Sitecake. Как я понял, за 250$ мы выкупаем права и получаем полную поддержку от разработчиков. Можем продавать эту CMS, как дополнительный функционал или включать в стоимость своих услуг, как отдельный продукт. Как написано на сайте:
For agencies who want to set custom cms pricing for their clients.
Sitecake - CMS для лендингов
Итак, давайте разбираться как ее подключать. На самом деле - все очень просто. Достаточно скачать архив и скопировать оттуда 2 файла в корень сайта (папку sitecake и sitecake.php).
После этого, тем элементам, которые будут доступны для визуально редактирования задаем класс sc-content - все. Прочитав это на сайте разработчика - я моментально побежал ставить и тестировать эту CMS, которая как нельзя лучше подходит для лендингов.
То есть все сводится к 3 шагам:
- Скачиваем и распаковываем архив
- Закидываем все в корень сайта (папку и файл)
- В нужном месте добавляем класс sc-content
Появится окошко с вводом пароля. Пароль по умолчанию - admin. Там же можно сразу и изменить его.
Кстати, админка, если ее можно так назвать, локализована на русский язык, хотя он, практически, и не нужен.
А какие вы используете CMS для landing page? Мне показалась эта наиболее удобной. Как вам?
Читайте также: