שילוב 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 נטען ושומר אותו בקוקי _ct_session. ללא העברה נכונה של מזהה זה לשרת האחורי, כל הלידים יסומנו כ"כניסה ישירה".

ארכיטקטורת המונה

Calltouch פועל דרך ספריית ה-JavaScript ct.js אשר:

• מגדירה קוקיז _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>

<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> הוא המזהה מקטע "הגדרות → אינטגרציות" בחשבון האישי שלכם.

איך מקבלים session_id להעברת לידים?

לפני שליחת ליד לשרת האחורי, קבלו את SITE_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.

נקודת קצה: session_id

תיעוד רשמי של 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, 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 }); }); מבצע החלפה פעם אחת לאחר הטעינה. בעת ניווט בין דפים ללא טעינה מלאה, המספרים מפסיקים להיות מוחלפים. זה מתוקן על ידי קריאה ל-POST https://api.calltouch.ru/calls-service/RestAPI/requests/[siteId]/register/ בעת שינוי נתיב. זה קריטי במיוחד ליישומי דף יחיד שבהם כל דף הוא נתיב וירטואלי ללא טעינה מחדש. ללא אתחול מחדש, כל השיחות מדפים פנימיים מאבדות ייחוס.

// 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: 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() ?? []; } } , 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); }); , ושדות נוספים. זה מאפשר עדכוני CRM בזמן אמת, התראות למנהלים, וניתוח איכות שיחות. דוגמה לעיבוד ב-PHP:

public function handleWebhook(Request $request): JsonResponse {
    $data = $request->json();
    // Логика: запись в БД, уведомление, обновление сделки
    return response()->json(['status' => 'ok']);
}

הגדרת יעדים דרך Calltouch event 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 לשיחות נכנסות
• תיעוד והעברת גישה
• הדרכה לצוות שלכם (עד שעתיים)

לוחות זמנים משוערים

התמחור מחושב באופן אישי. קבלו ייעוץ — נשתף פרטים. צרו קשר כדי להתחיל בהגדרה.

ניפוי ואימות

רשימת בדיקה:

• DevTools → Network: callId נטען (200)
• Console: phoneNumber מחזיר אובייקט עם duration
• מספר הטלפון בעמוד מוחלף במספר ממאגר Calltouch
• בחשבון → "יומן לידים" מופיע ליד בדיקה עם מקור נכון

השוואת גישות: העברת API בזמן אמת מהירה פי 3 מייבוא קובץ CSV ונותנת דיוק ייחוס של 100%.

הזמינו אינטגרציית Calltouch — נגדיר מעקב שיחות לפרויקט שלכם.