Інтеграція Calltouch: налаштування коллтрекінгу та SPA-аналітика

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

Офіційна документація 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 годин)

Строки орієнтовно

Вартість розраховується індивідуально, починаючи від 1500 грн. Отримайте консультацію — розповімо деталі. Зв'яжіться з нами, щоб почати налаштування. Ми гарантуємо точну атрибуцію та сертифіковану підтримку.

Налагодження та перевірка

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

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

Замовте інтеграцію Calltouch — ми налаштуємо коллтрекінг під ваш проєкт.