Как повысить конверсию сайта услуг

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

Зачем нужно повышать конверсию сайта?

Рассмотрим простой пример: на сайт из контекстной рекламы перешло 1 000 посетителей. Из них 80 совершили конверсионное действие. Оставили заявку, сделали заказ, позвонили или написали в мессенджер. Стоимость рекламного трафика составила 100 000 рублей.

Считаем процент конверсии по формуле: конверсия = (кол-во конверсий / кол-во посетителей) * 100

Наш пример: (80 конверсий / 1 000 посетителей) * 100 = 8%

Мы выяснили, что процент конверсии нашего сайта составляет 8%.

Предположим, что нам удалось повысить конверсию сайта на 2% до 10%. Это будет означать, что с 1 000 посетителей мы получили 100 конверсий. Давайте переведем эти данные в деньги.

До улучшения конверсии: 100 000 рублей / 80 конверсий = 1 250 рублей / конверсия.

После улучшения конверсии: 100 000 рублей / 100 конверсий = 1 000 рублей / конверсия.

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

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

Способы улучшения конверсии сайта

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

1. Сократите количество полей в формах

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

Так выглядит плохая форма. Она требует от посетителя ввода множества данных:

плохая форма
Сложная форма сбора заявок

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

плохая форма заявки
Простая форма сбора заявок

Исходя из этого, следует, что лучше получить малоинформативную заявку и потратить время на уточнение деталей, чем не получить заявку. Сокращение форм увеличивает процент конверсии в среднем на 2-3%.

Всплывающая форма при выходе с сайта

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

Всплывающая форма при выходе с сайта
Форма сбора заявок при выходе с сайта

Такая форма дает увеличение процента конверсии на сайтах услуг примерно на 5% и более.

Как сделать простую всплывающую форму при выходе с сайта

1. Подключаем на сайт библиотеку jQuery. Для этого между тегами размещаем следующий код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. Добавляем CSS стиль всплывающей формы при выходе:

<style type="text/css">
.exitform {    
    display:none;    
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:100000;
}    
.exitform .contein {
    background: #F6FCFF;
    opacity:.8;
    position:fixed;
    width:100%;
    height:100%;
}
.exitform .textform {
    box-sizing: border-box;
    padding: 30px 50px;
    border: 2px solid #FF3B3B;
    background: #FFFD6252;
    position: fixed;
    top: 80px;
    left: 50%;
    margin-left: -40%;
    width: 80%;
    box-shadow: 0 4px 10px 2px rgba(0, 0, 0, 0.14);
}       
.closeexitform {
    cursor: pointer;
    position: fixed;
    line-height: 60px;
    font-size: 50px;
    transform: rotate(45deg);
    text-align: center;
    top: 30px;
    right: 20px;
    color: #F00;
}
.closeexitfoem:hover {
    color: #590505;    
}
</style>

3. Добавляем HTML – код формы:

<div class="exitform">
    <div class="contein"></div>    
    <div class="textform">    
        Весомое преимущество чтобы посетитель оставил свой контакт
        <form>
        	<input type="text">
        	<input type="submit">
        </form>
    </div>
    <div class="closeexitform">+</div>
</div>

4. Добавляем JS код после тега <body>:

<script>
function getCookie(onevisit) {
    var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + onevisit.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}
var alertwin = getCookie("alertwin");
if (alertwin != "no") { 
    $(document).mouseleave(function(e){
        if (e.clientY < 10) {
            $(".exitform").fadeIn("fast");    
            var date = new Date;
            date.setDate(date.getDate() + 1); // Форма будет всплывать один раз в сутки
            document.cookie = "alertwin=no; path=/; expires=" + date.toUTCString();       
        }    
    });
    $(document).click(function(e) {
        if (($(".exitform").is(':visible')) && (!$(e.target).closest(".exitform .textform").length)) {
            $(".exitform").remove();
        }
    });  
}
</script>

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

Плавающая кнопка WhatsApp на сайт

На сегодняшний день WhatsApp является одним из самых популярных мессенджеров в России и СНГ. Поэтому не использовать его в качестве способа сбора лидов будет опрометчивым решением.

Плавающая кнопка WhatsApp на сайте

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

Поэтому я настоятельно рекомендую в угол на сайте добавить плавающую кнопку – переход в чат WhatsApp. Такая кнопка повышает процент конверсий на сайте на 2-5% и позволяет посетителям вести общение с менеджеров в удобном для них темпе.

Как сделать на сайте плавающую кнопку WhatsApp

1. Добавляем CSS стиль плавающей кнопки WhatsApp:

<style>
.whatsapp-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    transform: translate(-50%, -50%);
    background: #0D9F16; 
    border-radius: 50%;
    width: 55px; 
    height: 55px; 
    color: #fff;
    text-align: center;
    line-height: 5px; 
    font-size: 35px; 
    z-index: 9999;
}
.whatsapp-button a {
    color: #fff;
}
.whatsapp-button:before,
.whatsapp-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #0D9F16; 
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}
 
.whatsapp-button:after {
    animation-delay: .5s;
}
 
@keyframes animate
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}

@media (max-width : 800px) {  
.whatsapp-button {   
    bottom: 5px; 
    right: 10px; 
  }
}
</style>

2. Добавляем HTML – код самой кнопки. Меняем +79001234567 на свой номер телефона:

<a href="https://api.whatsapp.com/send?phone=+79001234567" target="_blank" title="Написать в Whatsapp" rel="noopener noreferrer">
	<div class="whatsapp-button">
		<img src="wa.png">
	</div>
</a>

3. Загружаем в корень сайта изображение кнопки:

Скачать изображение кнопки

Это все этапы создания анимированной, плавающей кнопки WhatsApp на сайте. При желании вы можете стилизовать кнопку под Viber, Telegram или мессенджер Вконтакте.

Другие способы повышения конверсии

Также для повышения конверсии на сайте размещайте больше полезной информации для посетителей:

  • Информацию о доставке и оплате;
  • Гарантии и условия возврата;
  • Реальные отзывы клиентов;
  • Сертификаты и другие награды;
  • Расположение вашего офиса или филиалов;
  • Ссылки на социальные сети и мессенджеры;
  • Мобильные и городские номера телефонов, включая горячую линию;
  • Контакты руководителя для связи.

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

Пишите в комментариях, какими способами поднятия конверсии сайта пользуетесь вы!

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

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