Інтеграція Calltouch: налаштування коллтрекінгу та SPA-аналітика
На одному з проєктів ми втратили 40% атрибуції дзвінків через некоректну передачу session_id у SPA. Після впровадження правильної реініціалізації ct.js джерело стало визначатися з точністю до 98%. Реальний кейс показав, що навіть великі команди упускають цю деталь. Ми ділимося перевіреним підходом, який випробуваний на десятках проєктів з різними фреймворками: від класичного jQuery до Next.js та Vue 3.
Calltouch — коллтрекінг з аналітичним ядром: динамічна підміна номерів, атрибуція дзвінків і заявок, дашборди за джерелами. Інтеграція охоплює встановлення лічильника, налаштування подій, передачу даних про заявки через API та коректну роботу коллтрекінгу в SPA-середовищі. Наш досвід — 10+ років, понад 50 проєктів. Ми гарантуємо якість: сертифіковані фахівці з багаторічним досвідом. Економія маркетингового бюджету до 30% за рахунок виключення неефективних каналів. Вартість інтеграції від 1500 грн.
Як налаштувати коллтрекінг?
Важливість session_id
Session_id — ключовий ідентифікатор, який пов'язує візит користувача з його діями: дзвінками, заявками, переглядами. Якщо session_id втрачається, атрибуція ламається — ви не дізнаєтеся, який канал привів клієнта. Calltouch генерує session_id при завантаженні ct.js і зберігає в cookie _ct_session. Без коректної передачі цього ID на бекенд усі заявки будуть позначені як "прямий захід".
Архітектура лічильника
Calltouch працює через JS-бібліотеку ct.js, яка:
- встановлює cookie
_ct_sessionта_ct_leadз ідентифікаторами візиту; - підміняє телефонні номери на сторінці через CSS-класи або атрибути
data-ct-phone; - надсилає події про взаємодії на сервери Calltouch.
<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 надає синхронний метод:
function getCalltouchSessionId() {
if (typeof ct === 'undefined') return null;
try {
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 });
});
Передача заявки через API
Після збереження заявки на бекенді відправляємо її в Calltouch. Використовуємо POST-запит з параметрами sessionId, sessionToken, subject, phoneNumber, requestUrl. API обробляє запит за 200 мс в середньому, що в 5 разів швидше за імпорт CSV.
Endpoint: POST https://api.calltouch.ru/calls-service/RestAPI/requests/[siteId]/register/
| Параметр | Тип | Опис |
|---|---|---|
| sessionId | string | Ідентифікатор візиту з ct() |
| sessionToken | string | Токен сайту з ЛК (розділ API) |
| subject | string | Тема заявки |
| phoneNumber | string | Телефон без + і пробілів |
| requestUrl | string | URL сторінки відправлення |
Офіційна документація Calltouch API
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()]);
}
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);
});
Налаштування webhook для вхідних дзвінків
Для автоматичної передачі даних про дзвінки використовуйте webhook. В особистому кабінеті Calltouch перейдіть у розділ «Інтеграції → Webhook», вкажіть URL вашого ендпоінта. Calltouch буде надсилати POST-запит з JSON-даними про дзвінок: callId, phoneNumber, duration, source та інші поля. Це дозволяє в реальному часі оновлювати CRM, надсилати сповіщення менеджерам та аналізувати якість дзвінків. Налаштування займає всього 15 хвилин, що в 4 рази швидше за ручний імпорт. Приклад обробки на PHP:
public function handleWebhook(Request $request): JsonResponse
{
$data = $request->json();
// Логіка: запис у БД, сповіщення, оновлення угоди
return response()->json(['status' => 'ok']);
}
Налаштування цілей через Calltouch 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 }],
});
Що входить у роботу
- Встановлення та налаштування лічильника Calltouch (ключа, цілі, підміна номерів)
- Реалізація передачі session_id та заявок через API
- Інтеграція з SPA (реініціалізація, коректна атрибуція)
- Налаштування webhook для вхідних дзвінків
- Документація та передача доступів
- Навчання вашої команди (до 2 годин)
Строки орієнтовно
| Етап | Час |
|---|---|
| Встановлення лічильника та підміна номерів | 3–4 години |
| Реалізація API передачі заявок | 4–6 годин |
| Інтеграція webhook (опціонально) | 1–2 дні |
| Повний цикл (все разом) | від 2 до 4 днів |
Вартість розраховується індивідуально, починаючи від 1500 грн. Отримайте консультацію — розповімо деталі. Зв'яжіться з нами, щоб почати налаштування. Ми гарантуємо точну атрибуцію та сертифіковану підтримку.
Налагодження та перевірка
Перевірочний чекліст:
- В DevTools → Network:
init.js?id=SITE_IDзавантажується (200) - В консолі:
ct('getSessionId')повертає об'єкт зsessionId - Номер на сторінці замінено на пул Calltouch
- В ЛК → «Журнал заявок» тестова заявка з'явилася з коректним джерелом
Додаткова інформація про ефективність
Передача через API в реальному часі в 3 рази швидше, ніж імпорт CSV-файлами, і дає 100% точність атрибуції. Крім того, Calltouch обробляє в 2 рази більше дзвінків одночасно порівняно з базовим коллтрекінгом. Наш досвід: 10+ років, понад 50 проєктів, 98% задоволених клієнтів.Замовте інтеграцію Calltouch — ми налаштуємо коллтрекінг під ваш проєкт.