Supabase

In conversion tracking, a lead event is an action that signals interest in your product:

• signing up for an account;
• booking a demo;
• joining a mailing list.

The lead event establishes the customer’s identity and the link they came from: every later action (a purchase, a plan upgrade) is attributed to that same link.

In this guide, we will be focusing on tracking new user sign-ups for a SaaS application that uses Supabase for user authentication.

Prerequisites

First, enable conversion tracking for your links — without it a click is never linked to the lead and sale events that follow.

For the whole workspace. Open Settings → Analytics and turn on the Conversion tracking switch in the page header — it controls the workspace-level setting. Every link created from that point on has conversion tracking enabled.

For a single link. Open the link builder and turn on the Conversion tracking switch — inside the builder it is also bound to the C keyboard shortcut.

Via the API. Pass trackConversion: true when creating or updating a link (it defaults to false):

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

Then install the RevRoute client-side script on your site — it records the click and stores its ID, which is what lead events are attached to.

The RevRoute client-side script is served from our domain — there are no npm packages to install. It picks up the rr_id query parameter, stores it in a first-party rr_id cookie on your domain (90 days) and uses it to attribute future conversions to the original link.

Add the tag to the <head> section of every page on your site:

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

In Next.js (App Router), use next/script in the root layout:

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

The server-side client

The examples below use the TypeScript SDK from the dub npm package. Always pass the RevRoute API serverURL to the client — without it the SDK will not talk to our API.

npm install dub

import { Dub } from "dub";
 
export const revroute = new Dub({
  token: process.env.REVROUTE_API_KEY, // secret rr_* key from your workspace settings
  serverURL: "https://api.revroute.ru", // required: the RevRoute API address
});

Configure Supabase

Next, configure Supabase to track lead conversion events in the auth callback function.

Here’s how it works in a nutshell:

1. In the /api/auth/callback route, check if:
   • the rr_id cookie is present.
   • the user is a new sign up (created in the last 10 minutes).
2. If the rr_id cookie is present and the user is a new sign up, send a lead event to RevRoute using revroute.track.lead
3. Delete the rr_id cookie.

// app/api/auth/callback/route.ts
import { cookies } from "next/headers";
import { NextResponse } from "next/server";
import { createClient } from "@/lib/supabase/server";
import { waitUntil } from "@vercel/functions";
import { revroute } from "@/lib/revroute";
 
export async function GET(request: Request) {
  const { searchParams, origin } = new URL(request.url);
  const code = searchParams.get("code");
  // if "next" is in param, use it as the redirect URL
  const next = searchParams.get("next") ?? "/";
 
  if (code) {
    const supabase = createClient(cookies());
    const { data, error } = await supabase.auth.exchangeCodeForSession(code);
    if (!error) {
      const { user } = data;
      const rr_id = cookies().get("rr_id")?.value;
      // if the user is created in the last 10 minutes, consider them new
      const isNewUser =
        new Date(user.created_at) > new Date(Date.now() - 10 * 60 * 1000);
      // if the user is new and has a rr_id cookie, track the lead
      if (rr_id && isNewUser) {
        waitUntil(
          revroute.track.lead({
            clickId: rr_id,
            eventName: "Sign Up",
            customerExternalId: user.id,
            customerName: user.user_metadata.name,
            customerEmail: user.email,
            customerAvatar: user.user_metadata.avatar_url,
          }),
        );
        // delete the clickId cookie
        cookies().delete("rr_id");
      }
      return NextResponse.redirect(`${origin}${next}`);
    }
  }
 
  // return the user to an error page with instructions
  return NextResponse.redirect(`${origin}/auth/auth-code-error`);
}

Request fields for POST /track/lead:

Where to see conversions

Once everything is set up, tracked conversions show up in your workspace analytics in three views:

• Time series — clicks, leads and sales over time: Analytics .
• Funnel — conversion and drop-off at every step (clicks → leads → sales): Analytics in funnel mode .
• Events stream — every conversion event across all links in the workspace, in real time: Events .