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

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

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

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

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

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

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

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

var ct_site_id = 'site_id';
var ct_data = {             
fio: 'Иванов Иван Иванович',
phoneNumber: '79000000000',
email: 'test@test.ru',
subject: 'Заявка с сайта',
tags: 'Mercedes,Белый',
comment: 'Тест-драйв',
requestUrl: location.href,
sessionId: window.ct('calltracking_params','mod_id').sessionId 
};
jQuery.ajax({  
  url: 'https://api.calltouch.ru/calls-service/RestAPI/requests/'+ct_site_id+'/register/',      
  dataType: 'json',         
  type: 'POST',          
  data: ct_data
});   

• site_id – ID Вашего сайта внутри ЛК Calltouch. Указывается без фигурных скобок. Его можно получить в разделе "Интеграции => API и  Webhooks =>  ID личного кабинета":

• ct_data – массив передаваемых входных параметров API-запроса на создание заявки.
• mod_id – его можно получить в разделе "Интеграции => API и  Webhooks":

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

Важно: Данные в API-запросе должны передаваться в кодировке utf-8.

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

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

<!-- Скрипт Calltouch для отслеживания заявок с форм -->
<script type="text/javascript">
jQuery(document).on('submit', 'form#myform', function() { 
var form = jQuery(this);
var phone = form.find('input[name="phonenumber"]').val();
var fio = form.find('input[name="user"]').val();
var mail = form.find('input[name="email"]').val(); 
var comment = form.find('input[name="comment"]').val();
var tags = form.find('input[name="tags"]').val(); 
var sub = 'Отслеживаемая форма обратной связи';
var ct_site_id = '36024'; /* ID сайта внутри Calltouch */
var ct_data = { 
fio: fio,
phoneNumber: phone,
email: mail,
subject: sub,
comment: comment,
tags: tags,
requestUrl: location.href,
sessionId: window.ct('calltracking_params','wgblo7m9').sessionId /* Чтобы определить источник заявки, передаем ID сессии Calltouch sessionId. Вместо wgblo7m9 нужно передавать mod_id скрипта Calltouch. */
};
/* При необходимости делаем проверку на корректность собранных с формы данных */
/* Например, обязательным для заполнения на форме является поле с телефоном, проверяем его наличие и не пустое ли оно */
if (typeof(phone)!='undefined' && phone!=''){
/* Выполняем AJAX-запрос */
jQuery.ajax({ 
 url: 'https://api.calltouch.ru/calls-service/RestAPI/requests/'+ct_site_id+'/register/', 
 dataType: 'json', 
 type: 'POST', 
 data: ct_data,
 async: false /* Предположим, после отправки формы на сайте настроен редирект на другую страницу, поэтому используем параметр async: false для синхронной отправки запроса */
}); 
}
});
</script>
<!-- Скрипт Calltouch для отслеживания заявок с форм -->   

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

$call_value = $_COOKIE['_ct_session_id']; /* ID сессии Calltouch, полученный из cookie */
$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.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);   

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

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

• ID сессии Calltouch, который необходимо отправить в качестве параметра sessionId API-запроса на создание заявки, необходимо передавать в PHP-обработчик с клиентской стороны, получая значение ID сессии из соответствующей переменной.
• Для корректной передачи кириллических символов в запросе и обхода проблем с кодировкой, необходимо применять 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-запроса на создание заявки.

Для проверки подключена ли та или иная форма к отслеживанию отправьте тестовую заявку с интересующей вас формы. И проверьте наличие заявки в Журнале заявок. 

Для корректного тестирование квиза (Мarquiz) посмотрите инструкцию: Тестирование заявок