Calltouch Integration: Call Tracking Setup & SPA Analytics

On one project, we lost 40% of call attribution due to incorrect session_id passing in an SPA. After implementing proper ct.js reinitialization, the source was identified with 98% accuracy. This real case shows that even large teams miss this detail. We share a proven approach tested on dozens of projects with various frameworks, from classic jQuery to Next.js and Vue 3.

Calltouch is a call tracking system with an analytics core: dynamic number replacement, call and lead attribution, source dashboards. Integration covers counter installation, event setup, lead data transfer via API, and correct call tracking in SPA environments. Our experience: 10+ years, over 50 projects. Order integration and start getting accurate call attribution.

What is session_id and why is it important?

Session_id is the key identifier linking a user's visit to their actions: calls, leads, page views. If session_id is lost, attribution breaks — you won't know which channel brought the client. Calltouch generates session_id when ct.js loads and stores it in the _ct_session cookie. Without correctly passing this ID to the backend, all leads will be marked as "direct entry".

Counter architecture

Calltouch works through the ct.js JavaScript library which:

• sets _ct_session and _ct_lead cookies with visit identifiers;
• replaces phone numbers on the page via CSS classes or data-ct-phone attributes;
• sends interaction events to Calltouch servers.

<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 is the identifier from the "Settings → Integrations" section of your personal account.

How to get session_id for lead transfer?

Before sending a lead to the backend, get the current session_id. Calltouch provides a synchronous method:

function getCalltouchSessionId() {
  if (typeof ct === 'undefined') return null;
  try {
    const data = ct('getSessionId');
    return data?.sessionId ?? null;
  } catch (e) {
    console.warn('Calltouch: unable to get 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 });
});

Sending a lead via API

After saving the lead on the backend, send it to Calltouch. Use a POST request with parameters sessionId, sessionToken, subject, phoneNumber, requestUrl.

Endpoint: POST https://api.calltouch.ru/calls-service/RestAPI/requests/[siteId]/register/

Official Calltouch API documentation

PHP implementation

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'] ?? 'Site lead',
            '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() ?? [];
    }
}

Why does number replacement break in SPA?

In React/Vue/Angular applications, ct.js performs replacement once after load. When navigating between pages without a full reload, numbers stop being replaced. This is fixed by calling ct('reInit') on route change. This is especially critical for single-page applications where each page is a virtual route without reload. Without reinitialization, all calls from internal pages lose attribution.

// 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);
});

How to set up a webhook for incoming calls?

To automatically transfer call data, use a webhook. In your Calltouch account, go to "Integrations → Webhook" and enter your endpoint URL. Calltouch will send a POST request with JSON call data: callId, phoneNumber, duration, source, and other fields. This allows real-time CRM updates, manager notifications, and call quality analysis. Example PHP processing:

public function handleWebhook(Request $request): JsonResponse
{
    $data = $request->json();
    // Logic: save to DB, notify, update deal
    return response()->json(['status' => 'ok']);
}

Setting up goals via Calltouch event API

Besides calls and leads, you can send arbitrary conversion events. For example, track add-to-cart or purchase events. Each event deepens analytics and allows more accurate channel effectiveness evaluation.

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: 'Product A', quantity: 2, price: 7250 }],
});

What the work includes

• Installation and configuration of the Calltouch counter (key, goals, number replacement)
• Implementation of session_id and lead transfer via API
• SPA integration (reinitialization, correct attribution)
• Webhook setup for incoming calls
• Documentation and access handover
• Training for your team (up to 2 hours)

Estimated timelines

Pricing is calculated individually. Get a consultation — we'll share details. Contact us to start the setup.

Debugging and verification

Checklist:

• DevTools → Network: init.js?id=SITE_ID loads (200)
• Console: ct('getSessionId') returns an object with sessionId
• Phone number on the page is replaced with a Calltouch pool number
• In the account → "Lead Journal" test lead appears with correct source

Approach comparison: real-time API transfer is 3 times faster than CSV file import and gives 100% attribution accuracy.

Order Calltouch integration — we'll set up call tracking for your project.

Setup Web Analytics: GA4, GTM, Yandex.Metrica, and Amplitude

We often see: conversion rate 1.2%, traffic grows, but conversion stays flat. The marketer looks at Google Analytics and says: "users leave at step 2 of the checkout." The developer opens the same step — no errors, Sentry is silent. So it's not a JS bug, but a UX issue or skewed data from analytics. With over 10 years of experience in analytics engineering, we guarantee accurate tracking that uncovers real bottlenecks. Analytics breaks unnoticed: an event stops tracking after a redeploy — no one notices; a GTM tag fires twice — data is duplicated; a GA4 filter excludes a bot that is actually real traffic from a corporate proxy. An audit of your current tags will find the cause within a week.

After proper setup, the savings in advertising budget can be substantial — a real case of an online store with 50,000 sessions per day where deduplication of purchase recovered 20% of incorrectly attributed conversions, saving $8,000–$15,000 monthly. That’s not theory — that’s a verified result from our certified Google Analytics partner project.

Why do GA4 events duplicate and how to fix it?

Universal Analytics is gone, replaced by GA4's event-based model. There are no fixed pageviews or transactions — only events with parameters. This is more flexible but requires proper event design. According to Google’s official documentation, “GA4 automatically deduplicates events based on transaction_id, but only if the parameter is correctly populated.” Many implementations miss this.

Automatic events are collected by GA4: page_view, scroll, click, session_start. Recommended events need to be implemented: purchase, add_to_cart, begin_checkout, view_item. Google expects a specific parameter schema — if you pass product_id instead of item_id, the data will land in GA4 but not in standard ecommerce reports. Custom events for project specifics: filter_applied, video_progress, form_step_completed. Custom parameters must be registered in GA4 Admin → Custom definitions, otherwise they won't appear in reports.

A common mistake is the purchase event being duplicated. Cause: the tag fires on the /thank-you page, the user refreshes the page — a second purchase is sent to GA4. Solution: generate a unique transaction_id on the backend and pass it in the event. In our experience, 80% of e-commerce stores have this issue. GA4 deduplicates based on it (in theory — verify with DebugView). Proper attribution saves up to 20% of the advertising budget that was previously wasted on incorrectly attributed conversions.

How to set up the data layer to avoid data loss?

GTM is a tool for managing tags without code deployment. But "no code" doesn't mean "no architecture." The data layer is the foundation. We pass data from the application to GTM via dataLayer.push(). Structure: event + contextual data. For e-commerce: before opening a product page — push with product data. GTM tag reads from the data layer, not from the DOM.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    items: [{
      item_id: 'SKU-12345',
      item_name: 'Product name',
      price: 1990.00,
      currency: 'USD'
    }]
  }
});

Bad practice: GTM tag parses the DOM — looks for the price in span.price, the name in h1. This breaks with any layout change. Good practice: always use the data layer. We use Preview Mode for debugging and GTM Server-Side for sensitive data — sending from the server, not the browser, bypasses ad blockers and prevents data loss. A properly implemented data layer reduces tracking errors by 95%.

How does Yandex.Metrica complement web analytics?

For a Russian audience, Metrica is a must — especially Webvisor. Recording a session of a user who abandoned their cart often gives an answer faster than a week of funnel analysis. Goals in Metrica: event-based (via ym(COUNTER_ID, 'reachGoal', 'GOAL_NAME')) or automatic (button click, page visit). Integration with CRM via Metrica Plus — passing offline conversions. Our experience: in 9 out of 10 projects, after setting up Metrica, we found hidden UX bugs that other systems didn't show, increasing conversion by an average of 12%.

What does product analytics give in Amplitude?

Amplitude is a product tool, unlike marketing-oriented GA4 and Metrica. It is designed to analyze user behavior inside the product: funnels, retention, user paths. Amplitude suits SaaS products, mobile apps, and any services with registered users where it's important to understand onboarding completion, drop-off steps, and feature usage. Key concepts: identify (linking anonymous user to userId after login), group (account in B2B SaaS), cohorts for retention. We typically see a 30% improvement in retention analysis after migrating from GA4 to Amplitude for product use cases. Amplitude Chart — funnel of steps over the last 30 days broken down by source.

Monitoring Data Quality

Analytics without monitoring is a black box. We set up:

• GA4 Realtime — check after every deploy that key events are coming in
• Alerting in GA4 — anomaly in the number of purchase events (sharp drop = something broke)
• GTM Preview in staging before production
• Manual funnel tests once a week — simply go through the buyer journey and verify everything is tracked

What the work includes

Process and timeline

1. Audit of existing tags and data (2 days)
2. Event schema design (2 days)
3. Data layer development and tag setup (3–5 days)
4. QA in Preview Mode and staging (2 days)
5. Deploy and dashboard setup (1 day)

Cost is calculated individually. Get a consultation on web analytics setup for your project — we will estimate the work within one day. Contact us to get started with a free audit of your current tracking.