Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


Как только вы создадите сайт по одной из указанных ссылок, я увижу это в отчете партнерской программы:

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

Кейс №7. Ненавязчивое уведомление перед закрытием страницы

Сергей    14.01.2015    2926    4.7 из 5.0 (15)

Оцените материал:

    О чем здесь?

    Недавно просматривая один интернет магазин, я заметил решение, которое мне показалось интересным. На странице оформления заказа в момент когда я уже хотел ее закрыть мне было выдано уведомление с промо-кодом на скидку.

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

    В статье рассмотрен один из способов реализовать такое уведомление.

    Составляем уведомление

    Уведомление будет выводиться с помощью подключенной библиотеки fancybox. Это уведомление мы поместим в нижнюю часть шаблона, скроем и укажем для него id, чтобы в любой момент его найти и показать:

    <div style="display:none" id="closing-message">
    ...Текст сообщения...
    </div>
    

    В тексте сообщения можно предложить:

    • Промо-код для гостя на странице оформления заказа. Он может быть многоразовым, но не говорите об этом. Сообщите, что этот промо-код действует только здесь и сейчас в течении часа
    • Оставить email (зарегистрироваться), чтобы получить какой-либо бонус (подарок)
    • Подписаться на рассылку, чтобы не потерять контакт. Это может быть форма сервиса email рассылок или ссылка на страницу подписки, где вы подробно описываете выгоды подписчиков
    • Следить в социальных сетях за вашим сайтом
    • Ответить на вопрос "Что не получается?", "Нужна помощь?", связаться с консультантом, заказать обратный звонок и т.д.

    Уверен, это далеко не все варианты и вы придумаете нужный для своего случая.

    Выводим уведомление

    Теперь пришло время вывести уведомление. Для этого нам понадобится написать небольшой скрипт.

    В предложенном варианте уведомление будет показываться, когда курсор мыши покидает контент страницы и появляется в области расположения вкладок браузера (к сожалению, это относится и к полосе прокрутки):

    $("body").on("mouseleave",function(){
     $.fancybox("#closing-message");
    });
    

    Чтобы посмотреть, как это работает, наведите курсор на кнопку, а затем на другую область:

    Когда вам потребуется реализовать что-то подобное при наведении на кнопку или контейнер, просто укажите класс или идентификатор в скрипте:

    $("#button-id").on("mouseleave",function(){
     $.fancybox("#closing-message");
    });
    

    Важно то, что при этом не блокируется закрытие вкладка как в случае с alert сообщениями, поэтому уведомление в заметке названо ненавязчивым.

    На этом все.

    Дополнения

    При обсуждении кейса в группе uCoz vk.com, возникло несколько идей:

    1. Реализовать показ уведомления только при закрытии вкладки
    2. Не показывать повторно сообщение тем, кто уже с ним ознакомлен
    3. Скрыть уведомления через некоторое время

    В первом случае невозможна реализация ненавязчивого уведомления, поскольку при закрытии вкладки пользователь ожидает, что она закроется. Пришлось бы прерывать событие и показывать alert окно. Лично меня подобное жутко бесит (кроме случаев, когда сайт предлагает сохранить изменения).

    Чтобы запомнить тех, кто уже видел уведомление, допишем код:

    if(!getCookie("closing-message")) {
     $("html").bind("mouseleave",function closingMessage(){
     $.fancybox("#closing-message");
     document.cookie = "closing-message=true;path=/";
     $("html").unbind("mouseleave", closingMessage);
     });
    }
    function getCookie(name) {
     var matches = document.cookie.match(new RegExp(
     "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
     ))
     return matches ? decodeURIComponent(matches[1]) : undefined 
    } 
    

    Теперь напишем код таймера, который закроет уведомлении после 7 секунд:

    setTimeout(function(){$.fancybox.close()}, 7*1000);
    

    Добавим этот код в обработчик события и в итоге получим:

    if(!getCookie("closing-message")) {
     $("html").bind("mouseleave",function closingMessage(){
     $.fancybox("#closing-message");
     document.cookie = "closing-message=true;path=/";
     $("html").unbind("mouseleave", closingMessage);
     setTimeout(function(){$.fancybox.close()}, 7*1000);
     });
    }
    function getCookie(name) {
     var matches = document.cookie.match(new RegExp(
     "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
     ))
     return matches ? decodeURIComponent(matches[1]) : undefined 
    } 
    

    Статьи по теме

    Обсуждение

    Всего комментариев: 14

    N
    1
    Вы уж объясняйте пожалуйста что куда ставить
    avatar
    1
    2
    Здравствуйте.

    Ставить нужно в шаблон той страницы, для которой подключаете уведомление. К примеру, если подключаете для всех страниц сайта, то перейдите в шаблон "Нижняя часть сайта" (он же $GLOBAL_BFOOTER$).

    Перед закрывающим тегом body разместите сначала сообщение, а затем и сам скрипт. Скрипт можно сохранить в файл и подключить его так <script src="путь к файлу"></script>
    avatar
    3
    сделал все как написано,не робит..
    avatar
    4
    то есть извиняюсь, робить то робит, только показывает постоянно тем, кто уже видел это сообщение
    avatar
    5
    и через 7 секунд не исчезает в мазилле
    A
    6
    
    Цитата
    то есть извиняюсь, робить то робит, только показывает постоянно тем, кто уже видел это сообщение

    Поддерживаю, не закрывается и показывается всем постоянно!
    avatar
    0
    7
    Можно ссылку на сайт?
    A
    9
    avatar
    0
    10
    Так уберите первые три строки
    Код
    $("body").on("mouseleave",function(){
      $.fancybox("#closing-message");
    });

    Из http://vladwebstudio.com/js/mform3.js
    A
    11
    Спасибо, все работает!
    A
    8
    
    Цитата
    Можно ссылку на сайт?
    http://vladwebstudio.com/
    avatar
    12
    Я удалил эту: 
    Код
    setTimeout(function(){$.fancybox.close()}, 7*1000);
    но через 7 секунд исчезает promo kod!  как сделать, чтобы не исчезнуть?
    avatar
    13
    aaa vsjo okey, zachinil!
    avatar
    14
    У меня что-то не получилось на сайте http://iblom.blogspot.ru/. Я вставил и текст и код перед закрывающим тегом body. Ничего не получилось. Только внизу страницы появился текст кода))) Можно для новичка поподробнее что и куда? И как ссылку на картинку сделать? Или, чтобы вместо картинки было предложение подписки на facebook?
    Кейс №7. Ненавязчивое уведомление перед закрытием страницы
    Кейс №7. Ненавязчивое уведомление перед закрытием страницы