> ## Documentation Index
> Fetch the complete documentation index at: https://dub-mintlify-update-supabase-lead-tracking-guide-82850.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Segment

> Learn how to track sale conversion events with Segment and Dub

<Note>
  Conversion tracking requires a [Business plan](https://dub.co/pricing)
  subscription or higher.
</Note>

When it comes to [conversion tracking](/conversions/quickstart), a `sale` event happens when a user purchases your product or service. Examples include:

* Subscribing to a paid plan
* Usage expansion (upgrading from one plan to another)
* Purchasing a product from your online store

<Frame>
  <img className="rounded-lg border border-gray-100" src="https://assets.dub.co/help/conversion-sale-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 sales conversion events for a SaaS application that uses Segment to track conversions.

## Prerequisites

First, you'll need to enable conversion tracking for your Dub links to be able to start tracking conversions:

<Tip>
  If you're using [Dub Partners](/partners/quickstart), you can skip this step
  since partner links will have conversion tracking enabled by default.
</Tip>

<AccordionGroup>
  <Accordion title="Option 1: On a workspace-level">
    To enable conversion tracking for all future links in a workspace, you can do the following:
    To enable conversion tracking for all future links in a workspace, you can do the following:

    1. Navigate to your [workspace's Analytics settings page](https://app.dub.co/settings/analytics).
    2. Toggle the **Workspace-level Conversion Tracking** switch to enable conversion tracking for the workspace.

    <Frame>
      <img src="https://mintcdn.com/dub-mintlify-update-supabase-lead-tracking-guide-82850/QGUHh3r7hC2NS4u-/images/conversions/enable-conversion-tracking-workspace.png?fit=max&auto=format&n=QGUHh3r7hC2NS4u-&q=85&s=d2bc96cd4bcc8e47c0e086746df630c8" alt="Enabling conversion tracking for a workspace" width="1364" height="557" data-path="images/conversions/enable-conversion-tracking-workspace.png" />
    </Frame>

    This option will enable conversion tracking in the [Dub Link Builder](https://dub.co/help/article/dub-link-builder) for all future links.
  </Accordion>

  <Accordion title="Option 2: On a link-level">
    If you don't want to enable conversion tracking for all your links in a workspace, you can also opt to enable it on a link-level.

    To enable conversion tracking for a specific link, open the [Dub Link Builder](https://dub.co/help/article/dub-link-builder) for a link and toggle the **Conversion Tracking** switch.

    <Frame>
      <img src="https://mintcdn.com/dub-mintlify-update-supabase-lead-tracking-guide-82850/QGUHh3r7hC2NS4u-/images/conversions/enable-conversion-tracking.png?fit=max&auto=format&n=QGUHh3r7hC2NS4u-&q=85&s=d9a83ac168f69997b97cd6e068cd38b1" alt="Enabling conversion tracking for a link" width="2345" height="908" data-path="images/conversions/enable-conversion-tracking.png" />
    </Frame>

    <Tip>
      You can also use the `C` keyboard shortcut when inside the link builder to
      quickly enable conversion tracking for a given link.
    </Tip>
  </Accordion>

  <Accordion title="Option 3: Via the API">
    Alternatively, you can also enable conversion tracking programmatically via the [Dub API](/api-reference/introduction). All you need to do is pass `trackConversion: true` when creating or updating a link:

    <CodeGroup>
      ```javascript Node.js
      const link = await dub.links.create({
        url: "https://dub.co",
        trackConversion: true,
      });
      ```

      ```python Python
      link = d.links.create(url="https://dub.co", track_conversion=True)
      ```

      ```go Go
      link, err := d.Links.Create(ctx, &dub.CreateLinkRequest{
          URL: "https://dub.co",
          TrackConversion: true,
      })
      ```

      ```ruby Ruby
      s.links.create_many(
        ::OpenApiSDK::Operations::CreateLinkRequest.new(
          url: "https://dub.co",
          track_conversion: true,
        )
      )
      ```
    </CodeGroup>
  </Accordion>
</AccordionGroup>

Then, you'd want to install the `@dub/analytics` script to your website to track conversion events.

You can install the `@dub/analytics` script in several different ways:

<CardGroup>
  <Card title="React" icon="react" href="/sdks/client-side/installation-guides/react" horizontal />

  <Card title="Manual installation" icon="browser" href="/sdks/client-side/installation-guides/manual" horizontal />

  <Card
    title="Framer"
    icon={
  <svg
    width="74"
    height="111"
    viewBox="0 0 74 111"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className="w-7 h-7"
  >
    <path d="M0 0H73.8374V36.9892H36.9187L0 0Z" fill="#eb5611" />
    <path d="M0 36.989H36.9187L73.8374 73.9796H0V36.989Z" fill="#eb5611" />
    <path d="M0 73.9797H36.9187V110.97L0 73.9797Z" fill="#eb5611" />
  </svg>
}
    href="/sdks/client-side/installation-guides/framer"
    horizontal
  />

  <Card title="Shopify" icon="shopify" href="/sdks/client-side/installation-guides/shopify" horizontal />

  <Card title="WordPress" icon="wordpress" href="/sdks/client-side/installation-guides/wordpress" horizontal />

  <Card title="Webflow" icon="webflow" href="/sdks/client-side/installation-guides/webflow" horizontal />

  <Card title="Google Tag Manager" icon="google" href="/sdks/client-side/installation-guides/google-tag-manager" horizontal />
</CardGroup>

<Check>
  You can **verify the installation** with the following tests:

  1. Open the browser console and type in `_dubAnalytics` – if the script is installed correctly, you should see the `_dubAnalytics` object in the console.
  2. Add the `?dub_id=test` query parameter to your website URL and make sure that the `dub_id` cookie is being set in your browser.

  If both of these checks pass, the script is installed correctly. Otherwise, please make sure:

  * The analytics script was added to the `<head>` section of the page
  * If you're using a content delivery network (CDN), make sure to purge any cached content
</Check>

If you’ve already set up the Dub (Actions) destination, you can skip the first two steps and jump straight to the Add Mapping section.

## Configure Segment Action

Next, configure [Segment Dub (Actions)](https://app.segment.com/goto-my-workspace/destinations/catalog/actions-dub) to track sales conversion events.

<Steps>
  <Step title="Add Dub (Actions) destination">
    Head to [Segment Dub (Actions)](https://app.segment.com/goto-my-workspace/destinations/catalog/actions-dub) and add the destination to your Segment workspace.

    <Frame>
      <img src="https://mintcdn.com/dub-mintlify-update-supabase-lead-tracking-guide-82850/QGUHh3r7hC2NS4u-/images/conversions/segment/segment-actions.png?fit=max&auto=format&n=QGUHh3r7hC2NS4u-&q=85&s=6e5fbf52df2087c28d973b03ebb8a449" alt="Segment Dub (Actions) destination" width="1440" height="1024" data-path="images/conversions/segment/segment-actions.png" />
    </Frame>
  </Step>

  <Step title="Configure Dub API Key">
    In the Dub (Actions) destination settings, fill out the following fields:

    * **Name:** Enter a name to help you identify this destination in Segment.
    * **API Key:** Enter your Dub API key. You can find this in the [Dub Dashboard](https://app.dub.co/settings/tokens).
    * **Enable Destination:** Toggle this on to allow Segment to send data to Dub.

    Once completed, click **Save Changes**.

    <Frame>
      <img src="https://mintcdn.com/dub-mintlify-update-supabase-lead-tracking-guide-82850/QGUHh3r7hC2NS4u-/images/conversions/segment/segment-basic-settings.png?fit=max&auto=format&n=QGUHh3r7hC2NS4u-&q=85&s=128f6baf9c4763bf394d557357acb42e" alt="Segment Dub (Actions) Basic Settings" width="1440" height="1024" data-path="images/conversions/segment/segment-basic-settings.png" />
    </Frame>
  </Step>

  <Step title="Add Mapping">
    Next, you’ll choose the **Track a sale** action from the list of available actions.

    By default, this action is configured to send sale data to Dub when the **Event Name** is **Order Completed**.

    <Frame>
      <img src="https://mintcdn.com/dub-mintlify-update-supabase-lead-tracking-guide-82850/QGUHh3r7hC2NS4u-/images/conversions/segment/segment-track-sale-action.png?fit=max&auto=format&n=QGUHh3r7hC2NS4u-&q=85&s=d7461f3082519b50205d2fe008534c32" alt="Segment Dub (Actions) Mapping" width="1440" height="1024" data-path="images/conversions/segment/segment-track-sale-action.png" />
    </Frame>

    Below the selected action, you’ll see the mapping for that action.

    <Frame>
      <img src="https://mintcdn.com/dub-mintlify-update-supabase-lead-tracking-guide-82850/QGUHh3r7hC2NS4u-/images/conversions/segment/segment-track-sale-mapping.png?fit=max&auto=format&n=QGUHh3r7hC2NS4u-&q=85&s=0094eefad679de31e8b7879c1c1e27d1" alt="Segment Dub (Actions) Mapping" width="1440" height="1024" data-path="images/conversions/segment/segment-track-sale-mapping.png" />
    </Frame>

    You can customize the trigger and mapping to fit the specific needs of your application.

    Finally, click **Next** and then **Save and enable** to add the mapping to the destination.
  </Step>

  <Step title="Send sale events to Dub">
    On the server side, you’ll use the `@segment/analytics-node` SDK to send sale events to Segment.

    Make sure to include relevant properties such as `userId`, `payment_processor`, `order_id`, `currency`, and `revenue` in the payload.

    ```tsx
    import { Analytics } from "@segment/analytics-node";

    const segment = new Analytics({
      writeKey: "<YOUR_SEGMENT_WRITE_KEY>",
    });

    segment.track({
      userId: id,
      event: "Order Completed",
      properties: {
        payment_processor: "stripe",
        order_id: "ORD_123",
        currency: "USD",
        revenue: 1000,
      },
      integrations: {
        All: true,
      },
    });
    ```

    Once the event is tracked, Segment will forward the sale data to Dub based on the mappings you’ve configured.
  </Step>
</Steps>

Here are the properties you can include when sending a sale event:

| Property             | Required | Description                                                                                                                                            |
| :------------------- | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `customerExternalId` | **Yes**  | The unique ID of the customer in your system. Will be used to identify and attribute all future events to this customer.                               |
| `amount`             | **Yes**  | The amount of the sale in cents.                                                                                                                       |
| `paymentProcessor`   | No       | The payment processor that processed the sale (e.g. [Stripe](/conversions/sales/stripe), [Shopify](/conversions/sales/shopify)). Defaults to "custom". |
| `eventName`          | No       | The name of the event. Defaults to "Purchase".                                                                                                         |
| `invoiceId`          | No       | The invoice ID of the sale. Can be used as a idempotency key – only one sale event can be recorded for a given invoice ID.                             |
| `currency`           | No       | The currency of the sale. Defaults to "usd".                                                                                                           |
| `metadata`           | No       | An object containing additional information about the sale.                                                                                            |

## Example App

To learn more about how to track sales with Segment, check out the following example app:

<Card title="Segment + Next.js App Router Example" icon="github" href="https://github.com/dubinc/examples/blob/main/conversions/segment/actions/track-sale.ts">
  Next.js app using Segment to track sales.
</Card>

## View conversion results

And that's it – you're all set! You can now sit back, relax, and watch your conversion revenue grow. We provide 3 different views to help you understand your conversions:

* **Time-series**: A [time-series view](https://app.dub.co/dub/analytics?view=timeseries) of the number clicks, leads and sales.

<Frame>
  <img src="https://mintcdn.com/dub-mintlify-update-supabase-lead-tracking-guide-82850/QGUHh3r7hC2NS4u-/images/conversions/timeseries-chart.png?fit=max&auto=format&n=QGUHh3r7hC2NS4u-&q=85&s=3063f896f67f87008753e5c093f0b56c" alt="Time-series line chart" width="2400" height="1260" data-path="images/conversions/timeseries-chart.png" />
</Frame>

* **Funnel chart**: A [funnel chart view](http://app.dub.co/analytics?view=funnel) visualizing the conversion & dropoff rates across the different steps in the conversion funnel (clicks → leads → sales).

<Frame>
  <img src="https://mintcdn.com/dub-mintlify-update-supabase-lead-tracking-guide-82850/QGUHh3r7hC2NS4u-/images/conversions/funnel-chart.png?fit=max&auto=format&n=QGUHh3r7hC2NS4u-&q=85&s=1d7842d6466a329fd8aff7837f101f5f" alt="Funnel chart view showing the conversion & dropoff rates from clicks → leads → sales" width="2400" height="1260" data-path="images/conversions/funnel-chart.png" />
</Frame>

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

<Frame>
  <img src="https://mintcdn.com/dub-mintlify-update-supabase-lead-tracking-guide-82850/QGUHh3r7hC2NS4u-/images/conversions/events-table.png?fit=max&auto=format&n=QGUHh3r7hC2NS4u-&q=85&s=c04e6dd1980cba607b28222f0cc7d77f" alt="The Events Stream dashboard on Dub" width="2400" height="1260" data-path="images/conversions/events-table.png" />
</Frame>
