Интеграция Calltouch: настройка коллтрекинга и SPA-аналитика
На одном из проектов мы потеряли 40% атрибуции звонков из-за некорректной передачи session_id в SPA. После внедрения правильной реинициализации ct.js источник стал определяться с точностью до 98%. Реальный кейс показал, что даже крупные команды упускают эту деталь. Мы делимся проверенным подходом, который опробован на десятках проектов с разными фреймворками: от классического jQuery до Next.js и Vue 3.
Calltouch — коллтрекинг с аналитическим ядром: динамическая подмена номеров, атрибуция звонков и заявок, дашборды по источникам. Интеграция охватывает установку счётчика, настройку событий, передачу данных о заявках через API и корректную работу коллтрекинга в SPA-окружении. Наш опыт — 10+ лет, более 50 проектов. Закажите интеграцию и начните получать точную атрибуцию звонков.
Что такое 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.
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, отправлять уведомления менеджерам и анализировать качество звонков. Пример обработки на 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 дней |
Стоимость рассчитывается индивидуально. Получите консультацию — расскажем детали. Свяжитесь с нами, чтобы начать настройку.
Отладка и проверка
Проверочный чеклист:
- В DevTools → Network:
init.js?id=SITE_IDзагружается (200) - В консоли:
ct('getSessionId')возвращает объект сsessionId - Номер на странице заменён на пул Calltouch
- В ЛК → «Журнал заявок» тестовая заявка появилась с корректным источником
Сравнение подходов: передача через API в реальном времени в 3 раза быстрее, чем импорт CSV-файлами, и даёт 100% точность атрибуции.
Закажите интеграцию Calltouch — мы настроим коллтрекинг под ваш проект.