Інтеграція Calltouch аналітики
Calltouch — коллтрекінг з аналітичним ядром: динамічна заміна номерів, атрибуція дзвінків та заявок, дашборди за джерелами. Інтеграція охоплює встановлення лічильника, налаштування подій, передачу даних про заявки через API та коректну роботу коллтрекінгу в SPA-середовищі.
Архітектура лічильника
Calltouch працює через JS-бібліотеку ct.js, яка:
- Встановлює cookies
_ct_sessionта_ct_leadз ідентифікаторами відвідування - Замінює телефонні номери на сторінці через CSS-класи або атрибути
data-ct-phone - Відправляє події про взаємодії на сервери Calltouch
<!-- Лічильник встановлюється в <head> якомога вище -->
<script>
(function(w, n) {
w[n] = w[n] || [];
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = '//mod.calltouch.ru/init.js?id=SITE_ID';
var f = document.getElementsByTagName('script')[0];
f.parentNode.insertBefore(s, f);
})(window, 'ct');
</script>
SITE_ID — ідентифікатор з розділу «Налаштування → Інтеграції» особистого кабінету.
Отримання session_id для передачи заявок
Перед відправкою заявки на бекенд потрібно отримати поточний session_id. Calltouch надає синхронний метод:
// Отримання session ID
function getCalltouchSessionId() {
if (typeof ct === 'undefined') return null;
try {
// Метод повертає об'єкт { sessionId: '...', ... }
const data = ct('getSessionId');
return data?.sessionId ?? null;
} catch (e) {
console.warn('Calltouch: не вдалося отримати session ID', e);
return null;
}
}
// Використання при сабміті форми
document.getElementById('lead-form').addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
formData.append('ct_session_id', getCalltouchSessionId() ?? '');
await fetch('/api/leads', { method: 'POST', body: formData });
});
Передача заявки в Calltouch через API
Після збереження заявки на бекенді відправляємо її в Calltouch, щоб система могла атрибутувати ліда до джерела.
Endpoint: POST https://api.calltouch.ru/calls-service/RestAPI/requests/[siteId]/register/
curl -X POST \
'https://api.calltouch.ru/calls-service/RestAPI/requests/12345/register/' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-d 'sessionId=SESSION_ID_FROM_COOKIE&subject=Заявка з сайту&name=Іван Петров&phoneNumber=79001234567&[email protected]&requestUrl=https://example.com/contact&sessionToken=YOUR_TOKEN'
Параметри:
-
sessionId— зct('getSessionId') -
sessionToken— токен сайту з особистого кабінету (розділ API) -
subject— тема заявки (вільний текст) -
phoneNumber— телефон без+та пробілів -
requestUrl— URL сторінки, з якої прийшла заявка
Реалізація на PHP
// app/Services/CalltouchService.php
class CalltouchService
{
private string $siteId;
private string $sessionToken;
private string $apiBase = 'https://api.calltouch.ru/calls-service/RestAPI/requests';
public function __construct()
{
$this->siteId = config('services.calltouch.site_id');
$this->sessionToken = config('services.calltouch.token');
}
public function registerRequest(array $data, string $sessionId): array
{
$url = "{$this->apiBase}/{$this->siteId}/register/";
$response = Http::asForm()->timeout(5)->post($url, [
'sessionId' => $sessionId,
'sessionToken' => $this->sessionToken,
'subject' => $data['subject'] ?? 'Заявка з сайту',
'name' => $data['name'] ?? '',
'phoneNumber' => preg_replace('/\D/', '', $data['phone'] ?? ''),
'email' => $data['email'] ?? '',
'requestUrl' => $data['url'] ?? '',
'comment' => $data['comment'] ?? '',
]);
if (!$response->ok()) {
Log::error('Calltouch API error', [
'status' => $response->status(),
'body' => $response->body(),
'session' => $sessionId,
]);
}
return $response->json() ?? [];
}
}
SPA: Коректна заміна номерів
У React/Vue/Angular додатках ct.js виконує заміну один раз після завантаження. При навігації між сторінками без повного перезавантаження номери перестають змінюватися. Виправляється викликом ct('reInit') при змові маршруту:
// React Router v6
import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';
export function CalltouchReinit() {
const location = useLocation();
useEffect(() => {
if (typeof window.ct === 'function') {
// Невелика затримка — дати компоненту відрендерити нові номери
setTimeout(() => window.ct('reInit'), 300);
}
}, [location.pathname]);
return null;
}
Для Vue Router:
router.afterEach(() => {
setTimeout(() => window.ct?.('reInit'), 300);
});
Налаштування цілей через Calltouch Events API
Крім дзвінків та заявок можна передавати довільні конверсійні події:
// Подія «додавання у кошик»
ct('send', 'event', {
eventName: 'add_to_cart',
value: 2990,
currency: 'RUB',
orderId: 'CART-456',
});
// Подія «оформлення замовлення»
ct('send', 'event', {
eventName: 'purchase',
value: 14500,
currency: 'RUB',
orderId: 'ORDER-789',
items: [
{ id: 'SKU-001', name: 'Товар A', quantity: 2, price: 7250 }
],
});
Webhook для вхідних дзвінків
Calltouch може відправити POST-запит на ваш сервер при кожному дзвінку — зручно для автоматичного створення угод у CRM.
Приклад payload:
{
"callId": "CT-12345",
"sessionId": "abc...xyz",
"phoneNumber": "+79001234567",
"duration": 124,
"status": "answered",
"source": "google/cpc",
"medium": "cpc",
"campaign": "brand-search",
"keyword": "наш бренд"
}
Endpoint для webhook реєструється в особистому кабінеті → «Інтеграції → Webhook».
Налагодження
Чеклист перевірки:
- DevTools → Network: перевірити, що
init.js?id=SITE_IDзавантажується без помилок (200) - Консоль:
ct('getSessionId')— повинен повернути об'єкт з непустимsessionId - Заміна номерів: на сторінці повинен бути номер з пулу Calltouch, не оригінальний
- Особистий кабінет → «Журнал заявок»: перевірити, що тестова заявка з'явилась з коректним джерелом
Строки
Встановлення лічильника та налаштування заміни номерів — 3–4 години. Реалізація API передачи заявок на бекенді — 4–6 годин. Налаштування webhook та інтеграція з CRM — окрема задача, 1–2 дні залежно від CRM.