Мой случай использования всплывающего окна
Сегодня я хотел бы поговорить о так называемых всплывающих (модальных) окнах. Первоначально всплывающее окно мной было поставлено на сайт при входе на него (в настоящее время я убрал). Но это, к сожалению, оказалось не просто неэффективным, а даже негативно сказалось на конверсии.
Результаты Вебвизора Яндекса в течение месяца показали, что часть посетителей, даже не пыталась его закрыть!!! Они прокручивали страницу вместе с окном, при этом половина текста оставалась закрытой этим самым окном.
Другая часть закрывала его сразу же, и я даже чувствовал их раздражение. Конверсия упала в разы. Несколько человек все же подписалось через всплывающее окно, но я думаю, что данные посетители стали бы подписчиками и без него.
Это не мое всплывающее окно)) это пример. В итоге я пришел к выводу, что установка модального окна сразу же при загрузке страницы имеет только одни минусы. Устанавливать окно с его загрузкой через определенное время мне тоже показалось абсурдом, так как мне самому было бы неприятно в процессе чтения получить такой “подарок”.
Оставалось только одно проверенное практикой решение – установить данный “дивайс” с условием его открытия, непосредственно перед тем, как посетитель собирается покинуть страницу.
Безусловно, его наличие сыграло бы роль в повышении конверсии, но я решил поэкспериментировать, посчитав, что если уж посетитель прочитал весь текст страницы и решил ее покинуть, так и не приняв решение стать подписчиком, то предлагать ему еще один “шанс” было бы не столь эффективно.
И тут мне пришла в голову мысль, а что если предложить покидающему страницу подписки посетителю какую-то другую альтернативу? Если он не стал подписчиком в данный момент, то может он просто еще мне не доверяет или не готов так сразу отдать мне свою почту “на растерзание”?)))) Ну не отпускать же его просто так!!!
Короче, я решил направить пассивного посетителя на дополнительное обучение на выбор: 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 (нарушится отображение сайта), то перенесите все значения в одну таблицу стилей, изменив совпадающие селекторы.
