Как установить скрипт камбекер (ComeBacker) на продающую страницу 15


Здравствуйте, уважаемые друзья. Сегодня я расскажу вам, как установить скрипт камбекер на продающий сайт.

Но, для начала давайте расскажу, что, же такое камбекер.

Камбекер (ComeBacker) – это механизм возврата, который срабатывает при закрытии окна браузера. Смысл работы такой, — вы делаете продающую страницу, на которой у вас есть предложение товара или услуги по основной цене. А также делаете отдельную страницу с уникальным предложением, на которой предоставляете скидку. Так вот, когда человек посещает продающий сайт и его что-то не устраивает, (цена вероятнее всего) он собирается уйти, закрывает окно, а тут ему уникальное предложение. И велика вероятность, что потенциальный клиент сделает покупку.

Этот механизм хорошо работает, и увеличивает процент продаж примерно на 30%. Так, за неделю продаж моего курса, и благодаря работе в этот момент скрипта камбекера, было сделано 40 дополнительных продаж. А ведь эти люди могли уйти.

Результат спецпродаж

Результат спецпродаж

Что нужно для настройки камбекера?

Первое, прежде всего, вам потребуется создать дополнительную страницу с уникальным предложением (скидкой, подарком, бонусом). Сделать её можно по примеру одностраничного сайта, который мы уже рассматривали. То есть, используя только HTML и CSS.

Я использовал вот такую страницу с уникальным предложением.

Моя страница с предложением

Моя страница с предложением

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

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

Создание страницы с уникальным предложением.

Дабы облегчить вашу задачу я предлагаю исходный код моей страницы, скриншот, которой вы видели выше. Ваша задача взять этот исходный код, вставить его в новый документ, в редакторе Notepad++ и сохранить с названием comеback.html.

Разумеется, изображения, ссылку на форму оплаты и счётчик обратного отсчёта вы устанавливаете свои. Фрагменты, подлежащие замене, я отметил оранжевым цветом.

<!DOCTYPE html>
<html>
<head>
 <title>Спецпредложение</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="description" content="Описание предложения" />
 <meta name="keywords" content="Ключевые слова" />
 <link href="favicon.jpg" rel="shortcut icon" type="image/x-icon" />
 <link type="text/css" rel="stylesheet" href="style-comback.css" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="wrap">
 <div class="ytm"><img alt="Подпись картинки" src="ytm.png"/></div>
 <div class="sale"><img alt="Подпись картинки" src="sale.png"/></div>
 <div class="text"> 
 <p>Уникальное предложение действует только для Вас.<br>
 Используйте свой шанс!</p>
 </div>
<!--Счётчик-->
 <div class="timer"><script src="http://megatimer.ru/s/54b536524833087ac08c6c4bfa6e733a.js"></script></div>
<!--Счётчик-->
 <div class="price"><img alt="Подпись картинки" src="price.png"/></div>
 <div class="button"><a href="Ссылка на форму заказа"><img src="buttom.png" alt="Подпись картинки" /></a></div>
 </div>
 </div>
 <footer> 
 </footer>
 </body>
</html>

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

.wrap { margin: 0 auto;
width: 990px;}
.ytm { margin: 0 auto;
width: 960px;}
.sale {margin: 0 auto;
margin-top: 20px;
width: 673px;}
.price {margin: 0 auto;
margin-top: 30px;
width: 325px;}
.text {line-height: 29px;
 color: #2E3192;
 font-size: 24px;
 text-align: center;
 font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
 font-style: normal;}
.button {margin: 0 auto;
width: 300px;}

Эти стили также вставьте в новый файл и сохраните его с названием style-comback.css.

Все эти файлы и изображения должны находиться в одной общей папке. Структура будет выглядеть вот так:

Общая папка
   comеback.html
   style-comback.css
   файлы изображений

Установка и настройка скрипта камбекер.

Итак, когда у вас готова страница уникального предложения, можно приступать к установке скрипта.

Для этого открываете в редакторе исходный код продающей страницы и вставляете в неё, перед закрытием тега </body> код скрипта:

<!--Комбекер-->
 
<script language="javascript">
var exitsplashmessage = '***************************************\n\n***************************************\n\n УНИКАЛЬНОЕ ПРЕДЛОЖЕНИЕ!!!\n\nВы получаете СКИДКУ! \n\nСкидка закрплена за Вами, успейте использовать её!\n\nДля того, чтобы получить СКИДКУ\n\nНАЖМИТЕ НА КНОПКУ "Остаться на этой странице"\n\n***************************************\n\n***************************************';
var exitsplashpage = 'comeback.html';
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); }}}
function addClickEvent(a,i,func) { if (typeof a[i].onclick != 'function') { a[i].onclick = func; } }
var theDiv = '<div id="ExitSplashDiv" style="display:block; width:100%; height:100%; position:absolute; background:#FFFFFF; margin-top:0px; margin-left:0px;" align="center">';
theDiv = theDiv + '<iframe src="'+exitsplashpage+'" width="100%" height="100%" align="middle" frameborder="0"></iframe>';
theDiv = theDiv + '</div>';
theBody = document.body; if (!theBody) {theBody = document.getElementById("body"); if (!theBody) {theBody = document.getElementsByTagName("body")[0];}}
var PreventExitSplash = false;
function DisplayExitSplash(){ if(PreventExitSplash == false){ window.scrollTo(0,0); PreventExitSplash=true; divtag = document.createElement("div"); divtag.setAttribute("id","ExitSplashMainOuterLayer"); divtag.style.position="absolute"; divtag.style.width="100%"; divtag.style.height="100%"; divtag.style.zIndex="99"; divtag.style.left="0px"; divtag.style.top="0px"; divtag.innerHTML=theDiv; theBody.innerHTML=""; theBody.topMargin="0px"; theBody.rightMargin="0px"; theBody.bottomMargin="0px"; theBody.leftMargin="0px"; theBody.style.overflow="hidden"; theBody.appendChild(divtag); return exitsplashmessage; } }
var a = document.getElementsByTagName('A'); for (var i = 0; i < a.length; i++) { if(a[i].target !== '_blank') {addClickEvent(a,i, function(){ PreventExitSplash=true; });} else{addClickEvent(a,i, function(){ PreventExitSplash=false;});}}disablelinksfunc = function(){var a = document.getElementsByTagName('A'); for (var i = 0; i < a.length; i++) { if(a[i].target !== '_blank') {addClickEvent(a,i, function(){ PreventExitSplash=true; });} else{addClickEvent(a,i, function(){ PreventExitSplash=false;});}}}
addLoadEvent(disablelinksfunc);
disableformsfunc = function(){ var f = document.getElementsByTagName('FORM'); for (var i=0;i<f.length;i++){ if (!f[i].onclick){ f[i].onclick=function(){ PreventExitSplash=true; } }else if (!f[i].onsubmit){ f[i].onsubmit=function(){ PreventExitSplash=true; }}}}
addLoadEvent(disableformsfunc);
window.onbeforeunload = DisplayExitSplash;
</script>

Выглядеть это будет так:

Установка скрипта

Установка скрипта

Оранжевым цветом я выделил фрагменты кода, которые вы исправляете под своё предложение.

Сохраняете файл и проверяете. При закрытии окна должно появляется всплывающее окно с предложением «Остаться на странице». Если вы остаётесь, то вам будет показано уникальное предложение.

Если всё работает, загружайте файлы на хостинг и начинайте рекламную компанию.

Весь процесс в деталях предлагаю посмотреть в моём видеоуроке, где я наглядно показываю структуру файлов и принципы настройки камбекера.

Друзья, на этом у меня сегодня всё, я желаю вам успехов и хорошего настроения. А на ваши вопросы буду рад ответить в комментариях.

До встречи в новых статьях и видеоуроках.

С уважением, Максим Зайцев.



Если статья оказалась для Вас полезной, поделитесь с друзьями, жмите на кнопочки:


Подписывайтесь на новые статьи!


Оставьте комментарий

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

15 коммент. к статье “Как установить скрипт камбекер (ComeBacker) на продающую страницу

  • Людмила

    Очень нужная вещь! Максим, а можно его приспособить под обычный сайт, что бы открывалось окно (пока еще не придумала с чем 🙂 ) при уходе пользователя с любой страницы обычного многостраничного сайта? Если да, то куда размещать файлы и где прописывать коды?

    • Максим Зайцев От автора

      Людмила, конечно можно приспособить и к обычному сайту. Код камбекера нужно разместить в подвале и тогда при закрытии сайта будет срабатывать камбекер. А отдельную страницу с предложением можно сделать либо самому на html и css, либо это будет отдельная страница сделанная с помощью движка.

  • Вика

    Добрый вечер, Максим! После последнего обновления ВордПресс вебмастер Яндекса показывает на сайте много новых страниц, как оказалось их наплодил wp-json, смотрю Ваш исходный код страницы и тоже вижу его присутствие rel=’https://api.w.org/’ href=’http://1zaicev.ru/wp-json/’ /><link. Будьте любезны опишите в новой статье, как будете бороться с этой заразой, в интернете есть информация, но я как-то Вам больше доверяю!

    • Вика

      Кстати, по теме статьи, очень классный скрипт, особенно впечатлило, что продажи увеличились!

      • Максим Зайцев От автора

        Да, его задача удержать уходящих людей. И если переложение человека заинтересует, то он не уйдёт и сделает покупку. Хорошая штука, только постоянно ею пользоваться нельзя, иначе результат со временем ухудшится.

    • Максим Зайцев От автора

      Здравствуйте, Виктория. Новые обновления постоянно подкидывают сюрпризы 😉 Ссылки эти я заметил, наблюдаю за ними, вы индекс они не попадают и вреда для сайта я тоже не вижу. Посмотрю ещё и если будет интересная информация, то обязательно напишу статью.

  • Николай

    Здравствуйте Максим…..подскажите в чем может быть проблема….создал все файл в папке открываю свою страницу, потом нажимаю закрыть выходит окно где предлагают Остаться или закрыть…..нажимаю остаться и появляется надпись вместо страницы comeback.html
    Страница не найдена.
    Страницы file:///C:/Documents%20and%20Settings/Admin/Рабочий%20стол/site/comeback.html не существует.
    Проверил все возможные места может где-то точку поставил, файлы переименовал не помогло

    • Максим Зайцев От автора

      Здравствуйте, Николай. Судя по описанной ситуации, причина может быть только в именах файлов и путях к ним. Попробуйте сменить имя файла камбекера на цифру и указать её в скрипте. Возможно в имени присутствуете русская буква «С» и скрипт не работает. Также проверьте, чтобы все эти файлы были в одной папке.

      • Николай

        Спасибо Максим за подсказку….всё работает…..мне даже в голову такое не пришло…..
        и еще письмо я получил что оставлен комментарий на вашем сайте…так вот…в письме есть строки такие

        There is a new comment on the post «Как установить скрипт камбекер (ComeBacker) на продающую страницу».

        Author: Максим Зайцев
        Comment:
        Здравствуйте, Николай.

        See all comments on this post here:

        To manage your subscriptions or to block all notifications from this site, click the link below:

        • Максим Зайцев От автора

          Николай, рад что всё заработало. А письмо это уведомление о новом комментарии. В этом же письме есть ссылка на отписку, если это необходимо.

          • Николай

            Максим я это понял…а написал т.к думаю текст лучше перевести на русский язык….но Вам лучше знать…
            Спасибо еще раз за помощь и скрипт….добавил в закладки….

          • Максим Зайцев От автора

            Спасибо, Николай. Постараюсь уделить этому внимание и перевести информацию на русский.