Интеграция Calltouch коллтрекинга: настройка, API и SPA-аналитика

Интеграция 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/

Официальная документация 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 часов)

Сроки ориентировочно

Стоимость рассчитывается индивидуально. Получите консультацию — расскажем детали. Свяжитесь с нами, чтобы начать настройку.

Отладка и проверка

Проверочный чеклист:

• В DevTools → Network: init.js?id=SITE_ID загружается (200)
• В консоли: ct('getSessionId') возвращает объект с sessionId
• Номер на странице заменён на пул Calltouch
• В ЛК → «Журнал заявок» тестовая заявка появилась с корректным источником

Сравнение подходов: передача через API в реальном времени в 3 раза быстрее, чем импорт CSV-файлами, и даёт 100% точность атрибуции.

Закажите интеграцию Calltouch — мы настроим коллтрекинг под ваш проект.