Наверх
Подписаться

Как подключить заявки с сайта к отслеживанию Calltouch

Что такое заявка?

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

Отображение заявок в статистике

Чтобы эффективно анализировать статистику, необходимо отслеживать как можно больше обращений клиентов. А клиенты могут обращаться в Вашу компанию не только посредством звонков, но и оставляя заявки на Вашем сайте. Заявки в Calltouch так же являются составляющей лида. Напомним, что лид в Calltouch это звонок + обратный звонок + заявка. Созданные заявки будут доступны в качестве метрик любого отчета Calltouch, как на графиках:

requests_metrics.png

Так и в таблицах в виде отдельных столбцов:

requests_columns.png

А так же в отдельном отчете Журнал заявок:

requests_journal.png 

 

Подключение к отслеживанию заявок с форм сайта

Суть подключения состоит в том, чтобы по событию отправки формы на Вашем сайте, выполнялся скрипт, который будет отправлять в Calltouch API-запрос на создание заявки. Реализовать подключение можно либо на клиентской стороне, либо на серверной. Оба способа описаны далее.

 

Реализация на клиентской стороне

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

В данном случае оптимальным вариантом будет добавление дополнительного скрипта Calltouch в текущий обработчик формы. Обратите внимание, что скрипт отправки заявки в Calltouch необходимо выполнять только при успешном прохождении валидации формы. Ниже представлен пример скрипта для отправки API-запроса на создание заявки средствами JavaScript, используя функцию AJAX библиотеки jQuery:

var ct_node_id = 'X';
var ct_site_id = '{site_id}';
var ct_data = {             
fio: 'Иванов Иван Иванович',
phoneNumber: '79000000000',
email: 'test@test.ru',
subject: 'Заявка с сайта',
sessionId: window.call_value 
};
jQuery.ajax({  
  url: 'https://api-node'+ct_node_id+'.calltouch.ru/calls-service/RestAPI/requests/'+ct_site_id+'/register/',      
  dataType: 'json',         
  type: 'POST',          
  data: ct_data
});

Где:

  • X - номер API-сервера, где расположен Ваш сайт. Его предварительно можно узнать с помощью отдельного API-метода.
  • {site_id} - ID Вашего сайта внутри ЛК Calltouch. Указывается без фигурных скобок. Его можно получить в разделе "Настройки => API":

______________2019-06-13___12.45.45.png

  • ct_data - массив передаваемых входных параметров API-запроса на создание заявки.

Во входных параметрах fio, phoneNumber, email и subject скрипта выше указаны тестовые данные формы. При написании реального скрипта на сайте для отправки заявок в Calltouch, необходимо настроить передачу данных, введенных клиентом на отправляемой форме, в качестве значений соответствующих входных параметров API-запроса на создание заявки.

advice_ver2.png По умолчанию AJAX-запрос выполняется асинхронно. Если при отправке формы на сайте происходит редирект или обновление страницы, мы рекомендуем использовать синхронный AJAX-запрос, чтобы избежать случаев, когда редирект при отправке формы выполнится быстрее, чем API-запрос на создание заявки в Calltouch. Для этого в AJAX-функцию необходимо добавить параметр async: false.

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

<script type="text/javascript">
/* Вешаем обработчик по событию submit формы с идентификатором myform */
jQuery(document).on('submit', 'form#myform', function() { 
/* Записываем в переменную form объект с формой, на которой сработало событие submit */
var form = jQuery(this);
/* Ищем на форме input для ввода номера телефона и получаем его значение, в примере поиск производится по наличию у input атрибута name со значением phone */
var phone = form.find('input[name="phone"]').val();
/* Аналогично собираем другие введенные в поля формы данные, например, ФИО и email */
var fio = form.find('input[name="name"]').val();
var mail = form.find('input[name="email"]').val(); 
/* Указываем название формы */
var sub = 'Заявка на звонок';
/* Указываем ID сайта внутри Calltouch и адрес API-сервера */
var ct_node_id = 'X';
var ct_site_id = '{site_id}';
/* Формируем массив входных параметров запроса */
var ct_data = {         
fio: fio,
phoneNumber: phone,
email: mail,
subject: sub,
sessionId: window.call_value 
};
/* При необходимости делаем проверку на корректность собранных с формы данных */
/* Например, обязательным для заполнения на форме является поле с телефоном, проверяем его наличие и не пустое ли оно */
if (typeof(phone)!='undefined' && phone!=''){
/* Выполняем AJAX-запрос */
jQuery.ajax({  
  url: 'https://api-node'+ct_node_id+'.calltouch.ru/calls-service/RestAPI/requests/'+ct_site_id+'/register/',      
  dataType: 'json',         
  type: 'POST',          
  data: ct_data,
  async: false /* Предположим, после отправки формы на сайте настроен редирект на другую страницу, поэтому используем параметр async: false для синхронной отправки запроса */
});  
}
});
</script>

Скрипт выше является примером и требует адаптации под конкретные формы Вашего сайта. Его использование и внесение в него изменений требует наличие на сайте библиотеки jQuery и навыков ее использования.

 

Реализация на серверной стороне

В случае, если основной функционал обработки, валидации и отправки формы организован на стороне сервера, то можно встроить функционал отправки заявок в Calltouch скриптом на сервере. Приведем пример реализации скрипта на PHP с использованием CURL:

$call_value = $_COOKIE['_ct_session_id']; /* ID сессии Calltouch, полученный из cookie */
$ct_node_id = 'X';
$ct_site_id = '{site_id}';
$ch = curl_init();
curl_setopt($ch, CURLOPT_HTTPHEADER, array("Content-type: application/x-www-form-urlencoded;charset=utf-8"));
curl_setopt($ch, CURLOPT_URL,'https://api-node'.$ct_node_id.'.calltouch.ru/calls-service/RestAPI/requests/'.$ct_site_id.'/register/');
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS,
	"fio=".urlencode($_POST['name'])
	."&phoneNumber=".$_POST['phone']
	."&email=".$_POST['email']
	."&subject=".urlencode('Заявка с сайта')
	."".($call_value != 'undefined' ? "&sessionId=".$call_value : ""));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$calltouch = curl_exec ($ch);
curl_close ($ch);

Где:

  • X - номер API-сервера, где расположен Ваш сайт. Его предварительно можно узнать с помощью отдельного API-метода.
  • {site_id} - ID Вашего сайта внутри ЛК Calltouch. Указывается без фигурных скобок. Его можно получить в разделе "Настройки => API":

______________2019-06-13___12.45.45.png

При использование такого метода, следует обратить внимание на 3 пункта:

  • ID сессии Calltouch, который необходимо отправить в качестве параметра sessionId API-запроса на создание заявки, необходимо передавать в PHP-обработчик с клиентской стороны, получая значение ID сессии из соответствующей переменной (по умолчанию window.call_value).
  • Для корректной передачи кириллических символов в запросе и обхода проблем с кодировкой, необходимо применять PHP-функцию urlencode ко всем PHP-переменным, передаваемым в качестве входных параметров API-запроса. Т.е., если ФИО клиента находится в $_POST['name'], то в API-запрос ее надо добавить как urlencode($_POST['name']).
  • В API-запросе в явном виде должна быть указана кодировка utf-8.

Во входных параметрах fio, phoneNumber, email и subject скрипта выше указаны тестовые данные формы соответственно: $_POST['name'], $_POST['phone'], $_POST['email'] и значение "Заявка с сайта". При написании реального скрипта на сервере для отправки заявок в Calltouch, необходимо настроить передачу данных, введенных клиентом на отправляемой форме, в качестве значений соответствующих входных параметров API-запроса на создание заявки.

Видеоинструкция - как подключить заявки с форм сайта за 5 минут

 

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 0 из 0
Еще есть вопросы? Отправить запрос

0 Комментарии

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