Здравствуйте, уважаемые друзья. Сегодня я расскажу вам, как установить скрипт камбекер на продающий сайт.
Но, для начала давайте расскажу, что, же такое камбекер.
Камбекер (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>
Выглядеть это будет так:
Оранжевым цветом я выделил фрагменты кода, которые вы исправляете под своё предложение.
Сохраняете файл и проверяете. При закрытии окна должно появляется всплывающее окно с предложением «Остаться на странице». Если вы остаётесь, то вам будет показано уникальное предложение.
Если всё работает, загружайте файлы на хостинг и начинайте рекламную компанию.
Весь процесс в деталях предлагаю посмотреть в моём видеоуроке, где я наглядно показываю структуру файлов и принципы настройки камбекера.
Друзья, на этом у меня сегодня всё, я желаю вам успехов и хорошего настроения. А на ваши вопросы буду рад ответить в комментариях.
До встречи в новых статьях и видеоуроках.
С уважением, Максим Зайцев.
Очень нужная вещь! Максим, а можно его приспособить под обычный сайт, что бы открывалось окно (пока еще не придумала с чем
) при уходе пользователя с любой страницы обычного многостраничного сайта? Если да, то куда размещать файлы и где прописывать коды?
Людмила, конечно можно приспособить и к обычному сайту. Код камбекера нужно разместить в подвале и тогда при закрытии сайта будет срабатывать камбекер. А отдельную страницу с предложением можно сделать либо самому на 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:
Николай, рад что всё заработало. А письмо это уведомление о новом комментарии. В этом же письме есть ссылка на отписку, если это необходимо.
Максим я это понял…а написал т.к думаю текст лучше перевести на русский язык….но Вам лучше знать…
Спасибо еще раз за помощь и скрипт….добавил в закладки….
Спасибо, Николай. Постараюсь уделить этому внимание и перевести информацию на русский.
Приветствую, Максим.
Установил скрипт камбекера себе на сайт, но он почему-то работает только в браузере Internet Explorer, в ГуглХроме и Яндекс браузере работать отказывается (сайт просто закрывается, при этом никакое всплывающее окно не появляется). Что можно сделать, чтобы скрипт работал во всех браузерах?
Здравствуйте, Николай. Скрипт работает во всех браузерах. Попробуйте сбросить кэш браузера.
Здравствуйте, подскажите, пожалуйста, как правильно прописать в скрипте, чтобы еще и аудио проигрывалось по ссылке?
Здравствуйте, Иван. В скрипт добавлять ничего не надо. На страницу камбекера нужно добавить аудио и автовоспроизведение. Тогда при открытии будет проигрываться аудио. Если ли же речь идёт о камбекере с голосом (подождите….), то это совсем другой код.