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