Реализация "click away" логики на странице продаж (JavaScript, jQuery)

JavaScript реализация "Click Away" логики на странице продажРечь пойдет о страницах моментных продаж (где посетителя всеми способами убеждают купить какой-либо товар прямо сейчас). Для этого, в частности, применяются JavaScript таймеры обратного отсчета. Еще один способ удержать посетителя и поднять конверсию — показать ему скидку, или предложить бесплатную пробную версию, в случае, при попытке уйти со страницы (закрыть её или ввести другой URL в адресной строке).

Исходные данные

  • Страница продаж (1).
  • Некоторый рекламный месседж ("FREE" в квадратике, на схеме ниже).
  • Страница с более выгодным предложением (2).

Концептуальная схема

Концептуальная схема JavaScript / jQuery Click Away логики

Рассмотрим по шагам

Пользователь изучает страницу продаж, прокручивает контент, читает...
По какой-то причине он решает закрыть страницу (на схеме — "X").

Вместо закрытия мы ему показываем alert сообщение с текстом "ПОДОЖДИТЕ! Нажмите кнопку *ОТМЕНА* или *ОСТАТЬСЯ НА СТРАНИЦЕ* в СЛЕДУЮЩЕМ окне, чтобы Увидеть ЧТО-ТО Особенное! Я расскажу вам как вы можете получить мой продукт ЗА ПОЛ-ЦЕНЫ!". В этот момент у пользователя только один вариант — нажать "ОК", т.к. alert сообщение не предусматривает отказа. Это важный момент, т.к. с психологической точки зрения мы подготавливаем посетителя к согласию в следующем диалоговом окне подтверждения.

Обратите внимание, что в контенте, под alert сообщением, мы отображаем ранее скрытый блок с предпросмотром более выгодного предложения.

После нажатия на "ОК" (на схеме — "Y"), пользователю показывается диалог подтверждения "Вы желаете уйти с этой страницы?". Происходит выбор. Наша задача в независимости от его выбора перенаправить на целевую страницу с новым предложением (на схеме — "Z").

Таким образом, небольшой процент отказников все-таки возвращается и все-таки заказывает товар, повышая конверсию.

Техническая реализация

На странице продаж подключаем библиотеку jQuery используя CDN:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2"></script>

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

</pre>
<div id="waithalfprice" style="display: none;"><img src="/discount-preview.jpg" alt="" /></div>
<pre>

Обратите внимание на inline-стиль: style="display: none;" — он обязательно нужен для того, чтобы этот блок изначально не отображался, независимо от скорости и успешности загрузки остальных стилей страницы.

В шапку страницы, в тегах <script>...</script> добавляем JavaScript логику:

var PreventExitPop = false;
window.onbeforeunload = function() {
    if(PreventExitPop == false) {
        PreventExitPop=true;

        scroll(0,0);
        $("#waithalfprice").show();
        setTimeout('window.location = "/waithalfprice/"', 1000);

        alert('Текст alert-сообщения');
        return 'Текст для диалога подтверждения';
    }
}

Вместо текстов "Текст alert-сообщения" и "Текст для диалога подтверждения" вписываем, соответственно, свои месседжи.

Пояснения JavaScript Click Away логики

scroll(0,0);
— это нужно для скроллинга страницы вверх, чтобы посетитель увидел картинку с предпросмотром более выгодного предложения независимо от того где он в момент ухода просматривает страницу.

$("#waithalfprice").show();
— эта команда включает видимость блока с картинкой предпросмотра.

setTimeout('window.location="/waithalfprice/"',1000);
— эта команда выполняет переход (редирект) на страницу "/waithalfprice/" через 1 секунду. Это делается "хитрым" способом, чтобы обойти ограничения некоторых браузеров на выполнение JavaScript логики в момент возникновения события onbeforeunload.

alert('Текст alert-сообщения');
— вывод alert сообщения с кнопкой "ОК".

return 'Текст для диалога подтверждения';
— некоторые браузеры используют это возвращаемое текстовое значение для отображения текста в диалоге подтверждения, поэтому не стОит его игнорировать.

Пример страницы продаж, использующей описанную логику: bodyweightburn.com.

Как избежать блокировки собственных ссылок?

Ссылкой может быть кнопка "Купить" или переход на FAQ, эти ссылки так же будут активировать click away логику. Чтобы избежать этого, достаточно добавить вначале такой скрипт:

$(function(){
// ...
$("A").click(function(){ PreventExitPop=true; });
// ...
});

О кроссбраузерности

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

IE, Chrome — Поддерживает всё, за исключением безусловного редиректа. Т.е. пользователь будет перенаправлен только в случае согласия.

FireFox — Поддерживает всё на 100%. Предпросмотр предложения, alert-сообщение, диалог подтверждения и (!) редирект независимо от выбора пользователя.

Safari — Не позволит показать скрытый блок с предпросмотром предложения. И, в случае отказа в диалоге подтверждения не даст произвести редирект. Т.е. покажет alert, потом диалог подтверждения ивыполнит редирект _только_ в случае, если посетитель выберет "Остаться на странице".

Opera — вообще не поддерживает перехват onbeforeunload, поэтому в ней всё вышеописанное работать не будет.

Факультативный материал: для предпросмотра более выгодного предложения рекомендую выполнить jQuery предзагрузку изображения.

Еще одна небольшая подсказка — вместо изображения с предпросмотром более выгодного предложения вы можете использовать iframe, в который загружается ваше более выгодное предложение. Тогда отпадает возня с созданием скриншота и необходимостью следить за его актуальностью.

Поделитесь с друзьями:



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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>