Отправка данных после ухода посетителя, или повышаем конверсию лендинга


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

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

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

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

$(window).unload(function () {
Создаем и заполняем массив значений поле телефон:

var tel = [];
$('input[name="tell"]').each(function(index, element){
  tel.push($(element).val());
});
Отправляем get-запрос с помощью ajax:

   $.ajax({
     type: 'GET',
     async: false,
url: 'obrab.php?tel='+tel[0]+','+tel[1]+','+tel[2]+','+tel[3]
});
Обратите внимание, что запрос должен быть обязательно асинхронным, иначе, к примеру, гугл хром нам ничего не отправит. Теперь надо разобрать обработчик этого самого запроса. Примерный код:

$conn = new mysqli("хост", "имя", "пароль", "база");
$tel = $_GET['tel'];
$result = $conn->query("INSERT INTO `таблица ` (`id`,`times`, `tel`) VALUES (NULL, '".$tel."');");
$conn->close();
Как видите, тоже ничего сложного нет. Подключаемся, получаем телефоны, заносим их в таблицу, закрываем соединение. Можно добавить ip-адрес, реферер посетителя (или с какой страницы идет запрос), время и так далее. Можно разобрать телефоны, добавить отправку имени и текста, в общем, возможностей немало.

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

Если у вас есть какие-то проблемы с формами, лендингами или вообще сайтами, то вы всегда можете написать мне – на почту, в скайп или вконтакте – я с удовольствием и за небольшую плату помогу вам.
Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

тегизаметки, javascript, php, лендинг




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




Обнаружение изменений файлов с помощью FileSystemWatcher C#
Пошаговое руководство по верстке на вордпресс. Глава седьмая: простейшая галерея и хлебные крошки
Рецензия на книгу Веллер Михаил Приключения майора Звягина