Всплывающее окно дает последний шанс!

всплывающее окноСегодня я хотел бы поговорить о так называемых всплывающих (модальных) окнах.

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

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

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

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

Оставалось только одно проверенное практикой решение — установить данный «дивайс» с условием его открытия, непосредственно перед тем, как посетитель собирается покинуть страницу. Всплывающие окна

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

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

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

модальное окно на моем блоге

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

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

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

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

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

Итак, для начала скачайте этот архив с файлами и распакуйте его. В нем находятся три скрипта с расширением .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>

kodHTML

 

Сейчас мы подключили таблицу стилей и три рабочих скрипта. Теперь создадим запись нашего окна. Для этого в любом месте тега <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 —>

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

oknohtml

 

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

oknocss

 

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

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

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

Всего хорошего!

Удачи вам! До скорых встреч на страницах блога VyacheslavDanilov.ru


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

Смотри и удивляйся:
Десерт

*посмотреть еще ролик можно обновив страницу в браузере

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

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