> ## Documentation Index
> Fetch the complete documentation index at: https://speakeasy-20cf8bdf.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Learn how to track lead conversion events with Dub Conversions

When it comes to conversion tracking, a `lead` event happens when a user performs an action that indicates interest in your product or service. This could be anything from:

* Signing up for an account
* Adding a product to cart
* Joining a mailing list

<Frame>
  <img className="rounded-lg border border-gray-100" src="https://assets.dub.co/help/conversion-lead-event.png" alt="A diagram showing how lead events are tracked in the conversion funnel" />
</Frame>

In this guide, we will be focusing on tracking new user sign-ups for a SaaS application as lead events on Dub.

## Prerequisites

Before you get started, make sure you follow the [Dub Conversions quickstart guide](/conversions/quickstart) to get Dub Conversions set up for your links:

1. [Enable conversion tracking for your links](/conversions/quickstart#step-1-enable-conversion-tracking-for-your-links)
2. [Install the @dub/analytics client-side SDK](/sdks/client-side/introduction)
3. [Install the Dub server-side SDK](/conversions/quickstart#step-3-install-the-dub-server-side-sdk)

## Configure lead tracking

Depending on which authentication framework you're using, we have a few pre-built guides to help you track lead events when a new user signs up for your SaaS application:

<CardGroup>
  <Card title="NextAuth.js" icon="shield-halved" iconType="solid" href="/conversions/leads/next-auth" horizontal>
    Tracking lead events with NextAuth.js
  </Card>

  <Card title="Clerk" icon="shield-halved" iconType="solid" href="/conversions/leads/clerk" horizontal>
    Tracking lead events with Clerk
  </Card>

  <Card title="Supabase" icon="shield-halved" iconType="solid" href="/conversions/leads/supabase" horizontal>
    Tracking lead events with Supabase
  </Card>

  <Card title="Auth0" icon="shield-halved" iconType="solid" href="/conversions/leads/auth0" horizontal>
    Tracking lead events with Auth0
  </Card>

  <Card title="Appwrite" icon="shield-halved" iconType="solid" href="/conversions/leads/appwrite" horizontal>
    Tracking lead events with Appwrite
  </Card>
</CardGroup>

If you're not using any of the frameworks listed above, you can use the following steps to track lead events:

1. Within the sign-up API request, retrieve the `dub_id` cookie that was created by the [`@dub/analytics` client-SDK](/sdks/client-side/introduction).
2. Send an event to the Dub API with the `dub_id` value, as well as your customer's ID and any other relevant information (email, name, avatar, etc.)

<Tip>
  If you don't have a customer ID, you can also use the `email` or `phone` as
  the customer ID.
</Tip>

## Code examples

Here are some examples of how you can track lead events using our [native SDKs](/sdks/overview):

<CodeGroup>
  ```typescript TypeScript theme={null}
  import { Dub } from "dub";

  const dub = new Dub();

  const dubId = req.cookies["dub_id"];
  if (dubId) {
    await dub.track.lead({
      clickId: dubId,
      eventName: "Sign Up",
      externalId: customer.id,
      customerName: customer.name,
      customerEmail: customer.email,
      customerAvatar: customer.avatar,
    });
    // delete the dub_id cookie
    res.cookies.set("dub_id", "", {
      expires: new Date(0),
    });
  }
  ```

  ```python Python theme={null}
  from dub import Dub
  import os

  dub = Dub(token=os.environ['DUB_API_KEY'])

  dub_id = request.cookies.get('dub_id')
  if dub_id:
      dub.track.lead({
          'click_id': dub_id,
          'event_name': 'Sign Up',
          'external_id': customer.id,
          'customer_name': customer.name,
          'customer_email': customer.email,
          'customer_avatar': customer.avatar
      })
      # delete the dub_id cookie
      response.delete_cookie('dub_id')
  ```

  ```go Go theme={null}
  package main

  import (
      "context"
      dub "github.com/dubinc/dub-go"
      "net/http"
  )

  d := dub.New(
      dub.WithSecurity(os.Getenv("DUB_API_KEY")),
  )

  dubId, err := r.Cookie("dub_id")
  if err == nil {
      _, err = d.Track.Lead(context.Background(), &operations.TrackLeadRequest{
          ClickId:         dubId.Value,
          EventName:       "Sign Up",
          ExternalId:      customer.ID,
          CustomerName:    customer.Name,
          CustomerEmail:   customer.Email,
          CustomerAvatar:  customer.Avatar,
      })
      // delete the dub_id cookie
      http.SetCookie(w, &http.Cookie{
          Name:    "dub_id",
          Value:   "",
          Expires: time.Unix(0, 0),
      })
  }
  ```

  ```ruby Ruby theme={null}
  require 'dub'

  dub = ::OpenApiSDK::Dub.new
  dub.config_security(
    ::OpenApiSDK::Shared::Security.new(
      token: ENV['DUB_API_KEY']
    )
  )

  dub_id = cookies[:dub_id]
  if dub_id
    req = ::OpenApiSDK::Operations::TrackLeadRequest.new(
      click_id: dub_id,
      event_name: 'Sign Up',
      external_id: customer.id,
      customer_name: customer.name,
      customer_email: customer.email,
      customer_avatar: customer.avatar
    )
    dub.track.lead(req)
    # delete the dub_id cookie
    cookies.delete(:dub_id)
  end
  ```

  ```php PHP theme={null}
  <?php

  require 'vendor/autoload.php';

  use Dub\Dub;
  use Dub\Models\Operations;

  $dub = Dub::builder()->setSecurity($_ENV["DUB_API_KEY"])->build();

  $dubId = $_COOKIE['dub_id'] ?? null;
  if ($dubId) {
      $request = new Operations\TrackLeadRequest();
      $request->clickId = $dubId;
      $request->eventName = 'Sign Up';
      $request->externalId = $customer->id;
      $request->customerName = $customer->name;
      $request->customerEmail = $customer->email;
      $request->customerAvatar = $customer->avatar;

      $dub->track->lead($request);
      // delete the dub_id cookie
      setcookie('dub_id', '', time() - 3600);
  }
  ```
</CodeGroup>

Here's the full list of attributes you can pass when sending a lead event:

| Property         | Required | Description                                                                                                              |
| :--------------- | :------- | :----------------------------------------------------------------------------------------------------------------------- |
| `clickId`        | **Yes**  | The unique `dub_id` parameter that the lead conversion event is attributed to.                                           |
| `eventName`      | **Yes**  | The name of the event. Example: "Sign up".                                                                               |
| `externalId`     | **Yes**  | The unique ID of the customer in your system. Will be used to identify and attribute all future events to this customer. |
| `customerEmail`  | No       | The email address of the customer. If not passed, a random email address will be generated.                              |
| `customerName`   | No       | The name of the customer. If not passed, a random name will be generated (e.g. "Big Red Caribou").                       |
| `customerAvatar` | No       | The avatar URL of the customer. If not passed, a random avatar URL will be generated.                                    |

## View your conversions

Once you've enabled conversion tracking for your links, all your tracked conversions will show up on your [Analytics dashboard](https://app.dub.co/analytics). We provide 3 different views to help you understand your conversions:

* **Time-series**: A [time-series view](https://dub.co/help/article/dub-analytics#1-time-series-analytics-chart) of the number clicks, leads and sales.

<Frame>
  <img src="https://mintcdn.com/speakeasy-20cf8bdf/-Y0j4C06SQOILvRL/images/conversions/timeseries-chart.png?fit=max&auto=format&n=-Y0j4C06SQOILvRL&q=85&s=7d752129ab0f59fb7ac44b5c83d608c9" alt="Time-series line chart" width="1600" height="900" data-path="images/conversions/timeseries-chart.png" />
</Frame>

* **Funnel chart**: A funnel chart view visualizing the conversion & dropoff rates across the different steps in the conversion funnel (clicks → leads → sales).

<Frame>
  <img src="https://mintcdn.com/speakeasy-20cf8bdf/-Y0j4C06SQOILvRL/images/conversions/funnel-chart.png?fit=max&auto=format&n=-Y0j4C06SQOILvRL&q=85&s=bd252526bae397088168478a8097c10d" alt="Funnel chart view showing the conversion & dropoff rates from clicks → leads → sales" width="1600" height="900" data-path="images/conversions/funnel-chart.png" />
</Frame>

* **Real-time events stream**: A [real-time events stream](https://dub.co/help/article/real-time-events-stream) of every single conversion event that occurs across all your links in your workspace.

<Frame>
  <img src="https://mintcdn.com/speakeasy-20cf8bdf/-Y0j4C06SQOILvRL/images/conversions/events-table.png?fit=max&auto=format&n=-Y0j4C06SQOILvRL&q=85&s=256bd06254e543c40f1ae268424e17e1" alt="The Events Stream dashboard on Dub" width="1600" height="900" data-path="images/conversions/events-table.png" />
</Frame>
