Всплывающее модальное окно при закрытии страницы

Мой случай использования всплывающего окна

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

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

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

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

Оставалось только одно проверенное практикой решение - установить данный "дивайс" с условием его открытия, непосредственно перед тем, как посетитель собирается покинуть страницу.

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

И тут мне пришла в голову мысль, а что если предложить покидающему страницу подписки посетителю какую-то другую альтернативу? Если он не стал подписчиком в данный момент, то может он просто еще мне не доверяет или не готов так сразу отдать мне свою почту "на растерзание"?)))) Ну не отпускать же его просто так!!!

Короче, я решил направить пассивного посетителя на дополнительное обучение на выбор: HTML или CSS - короткие курсы по 10 уроков, где бы он получил полезную обучающую информацию, а там, глядишь, и стал бы подписчиком в будущем.

Результаты не заставили себя долго ждать. Яндекс-метрика показала, что в первый же вечер из 30 посетителей, решивших покинуть сайт без результата, половина (!) согласились перейти на уроки, для более детального изучения, интересующего их вопроса.

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

К оглавлению ↑

Установка модального всплывающего окна на сайт

Теперь, я хотел бы ознакомить вас с технической стороной установки модального окна, которое является АБСОЛЮТНО БЕСПЛАТНЫМ и совсем несложным в редактировании под себя.

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

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

Итак, для начала скачайте этот архив с файлами и распакуйте его. В нем находятся три скрипта с расширением .js, таблица стилей .css и изображение "крестик" .jpg. Предварительно оптимизированное изображение необходимо закачать в папку "image", где у вас находятся все изображения. Файл basic.css соответственно в папку "CSS" с таблицами стилей, а для скриптов в корне сайта создать новую папку "js" и поместить их туда.

Загружаем файлы и раскладываем по папкам

На рисунке файл bazic.css написан с ошибкой, так что не обращайте внимания. Продолжим, все файлы мы разместили, теперь нам необходимо внести изменения в HTML код. Открываем для редактирования наш файл index.html и внутри тега <head> вставляем следующую запись:

<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen'>
 <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="js/jquery.simplemodal.js"></script>
 <script type="text/javascript" src="js/init.js"></script>

Подключаем стили и скипты

Сейчас мы подключили таблицу стилей и три рабочих скрипта. Теперь создадим запись нашего окна. Для этого в любом месте тега <body> (обычно внизу) внесем такую запись:

<!-- /Okno -->
 <div style="display: none; position: fixed; text-align: center;" id="exit_content">
 <h1 style="color:#ffffff">Ваш заголовок </h1>
 <h3 style="color:#ffffff">Ваш текст</h3>
 <a href="Адрес вашего блога"><img src="ваше изображение" height="" width="" alt="Всплывающее окно"></a>
 </div>
 <!-- /Okno end -->

В моем варианте это выглядит так

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

Прописываем стили окна

Если вы все сделали правильно, не напутали пути для файлов, то у вас все будет работать.

ВАЖНО!! Если ваш файл stile.css будет конфликтовать с basic.css (нарушится отображение сайта), то перенесите все значения в одну таблицу стилей, изменив совпадающие селекторы.

До встречи! Успевайте всё и всегда на страницах блога Uspei.com

Плюсануть
Поделиться
Класснуть
Линкануть
Запинить

Буду благодарен, если поделитесь новостью в соцсетях

Вам также понравится...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *