Skip to Content
Документация для разработчиковОтслеживание конверсийLeadsClerk
💡

Отслеживание конверсий доступно на тарифе Business и выше .

В отслеживании конверсий событие lead — это действие, которым пользователь показывает интерес к продукту:

  • зарегистрировался;
  • записался на демо;
  • подписался на рассылку.

Событие лида задаёт личность клиента и ссылку, по которой он пришёл: все его дальнейшие действия (покупка, апгрейд тарифа) атрибутируются той же ссылке.

В этом руководстве мы сосредоточимся на отслеживании регистраций новых пользователей для SaaS-приложения, использующего Clerk для аутентификации.

Что нужно до начала

Сначала включите отслеживание конверсий для ссылок: без него клик не связывается с последующими событиями лида и продажи.

💡

Для ссылок партнёрской программы шаг можно пропустить — RevRoute включает отслеживание конверсий у них автоматически.

Для всего воркспейса. Откройте Настройки → Аналитика и включите переключатель Отслеживание конверсий в шапке страницы — он управляет настройкой на уровне воркспейса. Отслеживание включится у всех ссылок, созданных после этого.

Для отдельной ссылки. Откройте конструктор ссылки и включите переключатель Отслеживание конверсий — внутри конструктора он же дёргается горячей клавишей C.

Через API. Передайте trackConversion: true при создании или обновлении ссылки (по умолчанию — false):

curl -X POST "https://api.revroute.ru/links" \
  -H "Authorization: Bearer dub_xxxxxx" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "trackConversion": true
  }'

Затем установите на сайт клиентский скрипт RevRoute — он фиксирует клик и сохраняет его идентификатор, без которого события лида не к чему привязать.

Клиентский скрипт RevRoute отдаётся с нашего домена — npm-пакеты ставить не нужно. Скрипт находит в URL параметр rr_id, сохраняет его в first-party cookie rr_id на вашем домене (90 дней) и по нему связывает будущие конверсии с исходной ссылкой.

Вставьте тег в секцию <head> каждой страницы сайта:

<script defer src="https://app.revroute.ru/analytics/script.js"></script>

В Next.js (App Router) — через next/script в корневом layout:

import Script from "next/script";
 
export default function RootLayout({ children }) {
  return (
    <html lang="ru">
      <body>{children}</body>
      <Script defer src="https://app.revroute.ru/analytics/script.js" />
    </html>
  );
}
💡

Варианты скрипта (site visit, outbound domains, клиентские конверсии) и все его атрибуты data-* описаны в разделе Варианты скрипта.

📝

Проверить установку можно двумя способами:

  1. Откройте консоль браузера и введите _revRouteAnalytics — если скрипт установлен, в консоли появится объект.
  2. Добавьте к адресу сайта параметр ?rr_id=test и убедитесь, что в браузере появился cookie rr_id.

Если оба пункта не сработали, проверьте, что:

  • тег скрипта стоит в секции <head> страницы;
  • кеш CDN сброшен, если сайт отдаётся через CDN.

Серверный клиент RevRoute

Примеры ниже используют официальный TypeScript-SDK. Он ставится из npm под именем dub — форк RevRoute отдельного пакета не публикует, поэтому в SDK обязательно указывается наш serverURL, иначе запросы уйдут в api.dub.co.

npm install dub
import { Dub } from "dub";
 
export const dub = new Dub({
  token: process.env.REVROUTE_API_KEY, // секретный ключ dub_* из настроек воркспейса
  serverURL: "https://api.revroute.ru", // без него SDK пойдёт в api.dub.co
});
⚠️

Секретный ключ (dub_*) держите в переменных окружения и не отдавайте в браузер. Ключ создаётся в разделе API-ключей .

💡

SDK не обязателен: /track/lead и /track/sale — обычные HTTPS-эндпоинты, их можно вызвать из любого языка (см. Track lead).

Настройка Clerk

Далее настройте Clerk для отслеживания событий конверсий лидов при регистрации нового пользователя. Вот короткое видео, демонстрирующее процесс:

Краткое описание шагов:

Добавьте переменные окружения

Добавьте в приложение следующие переменные окружения:

# get it here: https://dashboard.clerk.com/apps/new
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_key
 
# get it here: https://d.to/tokens
REVROUTE_API_KEY=your_api_key

Добавьте кастомный claim в session-токен Clerk

Добавьте этот JSON как кастомный claim  в session-токен Clerk:

{
  "metadata": "{{user.public_metadata}}"
}

Свяжите клиентский скрипт с хуком `useUser` из Clerk

Оберните клиентский скрипт RevRoute компонентом, который вызывает серверное действие trackLead. Npm-пакет не нужен — скрипт отдаётся с нашего домена.

"use client";
 
import { trackLead } from "@/actions/track-lead";
import { useUser } from "@clerk/nextjs";
import { useEffect } from "react";
 
export function RevRouteAnalytics() {
  const { user } = useUser();
 
  useEffect(() => {
    if (!user || user.publicMetadata.revrouteClickId) return;
 
    // if the user is loaded but hasn't been persisted to Revroute yet, track the lead event
    trackLead({
      id: user.id,
      name: user.fullName!,
      email: user.primaryEmailAddress?.emailAddress,
      avatar: user.imageUrl,
    }).then(async (res) => {
      if (res.ok) await user.reload();
      else console.error(res.error);
    });
 
    // you can also use an API route instead of a server action
    /*
    fetch("/api/track-lead", {
      method: "POST",
      body: JSON.stringify({
        id: user.id,
        name: user.fullName,
        email: user.primaryEmailAddress?.emailAddress,
        avatar: user.imageUrl,
      }),
    }).then(res => {
      if (res.ok) await user.reload();
      else console.error(res.statusText);
    });
    */
  }, [user]);
 
  return (
    <script
      defer
      src="https://app.revroute.ru/analytics/script.js"
      data-api-host="https://api.revroute.ru"
    />
  );
}

Затем добавьте компонент RevRouteAnalytics в корневой layout приложения:

import { RevRouteAnalytics } from "@/components/analytics-overview";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <RevRouteAnalytics />
        {children}
      </body>
    </html>
  );
}

Реализуйте серверное действие `trackLead`

На стороне сервера реализуйте серверное действие trackLead. Как вариант, вместо него можно завести отдельный API-маршрут:

// This is a server action
"use server";
 
import { dub } from "@/lib/dub";
import { clerkClient } from "@clerk/nextjs/server";
import { cookies } from "next/headers";
 
export async function trackLead({
  id,
  name,
  email,
  avatar,
}: {
  id: string;
  name?: string | null;
  email?: string | null;
  avatar?: string | null;
}) {
  try {
    const cookieStore = await cookies();
    const clickId = cookieStore.get("rr_id")?.value;
 
    if (clickId) {
      // Send lead event to Revroute
      await dub.track.lead({
        clickId,
        eventName: "Sign Up",
        customerExternalId: id,
        customerName: name,
        customerEmail: email,
        customerAvatar: avatar,
      });
 
      // Delete the rr_id cookie
      cookieStore.set("rr_id", "", {
        expires: new Date(0),
      });
    }
 
    const clerk = await clerkClient();
    await clerk.users.updateUser(id, {
      publicMetadata: {
        revrouteClickId: clickId || "n/a",
      },
    });
 
    return { ok: true };
  } catch (error) {
    console.error("Error in trackLead:", error);
    return { ok: false, error: (error as Error).message };
  }
}

Поля запроса POST /track/lead:

ПолеОбяз.Описание
clickIdдаИдентификатор клика, к которому привязывается лид. Читается из cookie rr_id. Для отложенного лида допустима пустая строка — тогда клик берётся у клиента, найденного по customerExternalId.
eventNameдаНазвание события (например, Sign up). Оно же связывает лид с последующей продажей через leadEventName в /track/sale.
customerExternalIdдаИдентификатор клиента в вашей системе. По нему атрибутируются все будущие события этого клиента.
discountCodeнетПромокод партнёра, если клиент пришёл без клика по ссылке. Если переданы и clickId, и discountCode, приоритет у clickId.
customerNameнетИмя клиента. Если не передать, сгенерируется случайное.
customerEmailнетEmail клиента.
customerAvatarнетURL аватара клиента.
modeнетasync (по умолчанию) — не блокировать запрос; wait — дождаться записи события; deferred — отложить создание лида до следующего запроса.
eventQuantityнетЧисловое значение события (например, количество мест в триале): лид будет засчитан столько раз.
metadataнетПроизвольные данные события, до 10 000 символов в JSON.

Пример приложения

Чтобы узнать больше об отслеживании лидов с Clerk, ознакомьтесь со следующим примером приложения:

github

Revroute + Clerk: пример приложения

Пример отслеживания регистраций через Clerk и SDK Revroute.

Где смотреть конверсии

После настройки все отслеженные конверсии видны в аналитике воркспейса — в трёх представлениях:

  • График по времени — клики, лиды и продажи в динамике: Аналитика .
  • Воронка — конверсия и отвал на каждом шаге (клики → лиды → продажи): Аналитика в режиме воронки .
  • Поток событий — каждое событие конверсии по всем ссылкам воркспейса в реальном времени: События .
Last updated on
Better AuthОтложенное отслеживание лидов