Інтеграція Roistat на сайт

Інтеграція Roistat

Roistat — наскрізна аналітика з акцентом на витрати та ROI рекламних каналів. Встановлюється одним лічильником, який перехоплює клікни, дзвінки та заявки, пов'язуючи їх з рекламними витратами з Google Ads, Яндекс Директ та інших джерел.

Як працює лічильник

Скрипт Roistat записує в cookie roistat_visit ідентифікатор відвідування — 32-символьний рядок. При будь-якій цільовій дії (форма, дзвінок, чат) цей ID передається разом із заявкою і дозволяє системі знайти джерело трафіку.

<!-- Базове встановлення — вставити перед </head> -->
<script>
(function(w, d, s, r, n) {
  w[n] = w[n] || function() { (w[n].q = w[n].q || []).push(arguments) };
  var f = d.getElementsByTagName(s)[0];
  var j = d.createElement(s);
  j.async = true;
  j.src = 'https://cdn.roistat.com/px.js';
  f.parentNode.insertBefore(j, f);
})(window, document, 'script', null, 'roistat');
roistat('init', { projectId: 'YOUR_PROJECT_ID' });
</script>

Через GTM це встановлюється тегом «Користувацький HTML» з тригером «Усі сторінки».

Передача відвідування при відправці форми

Форма повинна передати roistat_visit на бекенд. Найнадійніший спосіб — прихований обов'язково, який заповнюється перед сабмітом:

document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', () => {
    let input = form.querySelector('[name="roistat_visit"]');
    if (!input) {
      input = document.createElement('input');
      input.type = 'hidden';
      input.name = 'roistat_visit';
      form.appendChild(input);
    }
    input.value = getCookie('roistat_visit') ?? '';
  });
});

function getCookie(name) {
  const m = document.cookie.match(new RegExp('(?:^|; )' + name + '=([^;]*)'));
  return m ? decodeURIComponent(m[1]) : null;
}

На бекенді збережіть це значення разом із заявкою — потім воно передається в Roistat API як поле visit.

API для створення заявки

Roistat приймає ліди через REST API. Обов'язкові поля: projectId, visit та принаймні одне контактне поле.

curl -X POST 'https://cloud.roistat.com/api/proxy/1.0/project/lead/create' \
  -H 'Content-Type: application/json' \
  -d '{
    "projectId": "YOUR_PROJECT_ID",
    "visit": "abc123def456...",
    "fields": [
      { "name": "name", "value": "Іван Петров" },
      { "name": "phone", "value": "+79001234567" },
      { "name": "email", "value": "[email protected]" },
      { "name": "order_id", "value": "ORDER-789" }
    ]
  }'

Відповідь при успіху:

{ "status": "ok", "lead_id": 123456 }

Інтеграція через PHP (Laravel / чистий PHP)

// app/Services/RoistatService.php
class RoistatService
{
    private string $projectId;
    private string $apiUrl = 'https://cloud.roistat.com/api/proxy/1.0/project/lead/create';

    public function __construct()
    {
        $this->projectId = config('services.roistat.project_id');
    }

    public function sendLead(array $fields, string $visitId): bool
    {
        $payload = [
            'projectId' => $this->projectId,
            'visit'     => $visitId,
            'fields'    => array_map(
                fn($name, $value) => ['name' => $name, 'value' => $value],
                array_keys($fields),
                array_values($fields)
            ),
        ];

        $response = Http::timeout(5)->post($this->apiUrl, $payload);
        return $response->ok() && $response->json('status') === 'ok';
    }
}

У контролері:

public function store(FormRequest $request, RoistatService $roistat)
{
    $lead = Lead::create($request->validated());

    $roistat->sendLead([
        'name'     => $lead->name,
        'phone'    => $lead->phone,
        'email'    => $lead->email,
        'order_id' => (string) $lead->id,
    ], $request->input('roistat_visit', ''));

    return response()->json(['ok' => true]);
}

Коллтрекінг

Roistat забезпечує вбудований коллтрекінг. Після додавання номерів у кабінеті скрипт автоматично замінює телефони на сторінці. Жодного додаткового JS писати не потрібно — просто переконайтеся, що номери є в тексті або в атрибуті href="tel:...".

Якщо телефон рендериться через JS-фреймворк (React, Vue), переконайтеся, що скрипт Roistat ініціалізується після монтування компонентів:

// React: виклик після монтування
useEffect(() => {
  if (window.roistat) {
    window.roistat('replacePhones');
  }
}, []);

Перевірка

1. Відкрийте сайт у браузері
2. У DevTools → Application → Cookies переконайтеся, що roistat_visit присутня і не порожня
3. Заповніть тестову форму — у кабінеті Roistat → «Заявки» повинна з'явитися запис з джерелом (не «прямий заход»)
4. У консолі перевірте, немає помилок завантаження px.js

Строки

Базове встановлення лічильника + передача відвідування з форм — 2–4 години. Інтеграція API створення заявок на нестандартному бекенді — ще 2–3 години. Тестування та перевірка атрибуції по всіх каналах — 1–2 години.