Skip to Content
Developer DocsConversion trackingSalesDirect sale tracking

// snippet import removed // snippet import removed // snippet import removed // snippet import removed // snippet import removed

In this guide, we will be focusing on tracking sales conversion events without a prior lead event. This is useful when you want to attribute a sale directly to a click, bypassing the lead tracking step.

When to use direct sale tracking

Direct sale tracking is ideal for scenarios where:

  • You don’t need to track leads separately (e.g., one-time purchases)
  • You want to attribute sales directly to clicks without intermediate steps
  • You’re tracking sales for users who haven’t signed up or created an account
📝

If you’re tracking both leads and sales in your conversion funnel, refer to our server-side tracking or client-side tracking guides instead.

⚠️

Lead commission rewards will not be created when using direct sale tracking.

Prerequisites

Track direct sale conversions

To track a direct sale, you need to pass the clickId parameter along with customer information when tracking the sale event. The clickId can be read from the dub_id cookie that’s automatically set when a user clicks on your Dub link.

Track direct sales from URL query parameters

If you redirect users to a confirmation page after a successful purchase, you can track direct sales by reading query parameters from the URL and the dub_id cookie.

import { useAnalytics } from "@dub/analytics/react";
import { useEffect } from "react";
 
// Helper function to read cookie
function getCookie(name: string) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop()?.split(";").shift();
}
 
export function OrderConfirmationPage() {
  const { trackSale } = useAnalytics();
 
  useEffect(() => {
    // Get query parameters from URL
    const params = new URLSearchParams(window.location.search);
    const customerId = params.get("customer_id");
    const amount = params.get("amount");
    const invoiceId = params.get("invoice_id");
 
    // Get click ID from cookie
    const clickId = getCookie("dub_id");
 
    if (customerId && amount && clickId) {
      // Track the direct sale event
      trackSale({
        eventName: "Purchase",
        customerExternalId: customerId,
        amount: parseInt(amount), // Amount in cents
        invoiceId: invoiceId || undefined,
 
        // Required for direct sale tracking:
        clickId: clickId,
        customerName: "John Doe", // Optional: customer name
        customerEmail: "john@example.com", // Optional: customer email
        customerAvatar: "https://example.com/avatar.jpg", // Optional: avatar URL
      });
    }
  }, [trackSale]);
 
  return <div>Thank you for your purchase!</div>;
}

Track direct sales from form submissions

You can also track direct sales when users complete a checkout form on your website.

import { useAnalytics } from "@dub/analytics/react";
import { useState } from "react";
 
// Helper function to read cookie
function getCookie(name: string) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop()?.split(";").shift();
}
 
export function CheckoutForm() {
  const { trackSale } = useAnalytics();
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
 
    // Get click ID from cookie
    const clickId = getCookie("dub_id");
 
    if (clickId) {
      // Track the direct sale event
      trackSale({
        eventName: "Purchase",
        customerExternalId: "cus_RBfbD57H",
        amount: 5000, // $50.00
        invoiceId: "in_1MtHbELkdIwH",
 
        // Required for direct sale tracking:
        clickId: clickId,
        customerName: "John Doe",
        customerEmail: "john@example.com",
        customerAvatar: "https://example.com/avatar.jpg",
      });
    }
  };
 
  return (
    <form onSubmit={handleSubmit}>
      ...
      <button type="submit">Complete Purchase</button>
    </form>
  );
}

Server-side direct sale tracking

You can also track direct sales from your backend by passing the clickId parameter when calling the track sale API:

import { Dub } from "dub";
 
const dub = new Dub();
 
await dub.track.sale({
  customerExternalId: "cus_RBfbD57HDzPKpduI8elr5qHA",
  amount: 5000,
  paymentProcessor: "stripe",
  eventName: "Purchase",
  invoiceId: "in_1MtHbELkdIwH",
  currency: "usd",
 
  // Required for direct sale tracking:
  clickId: "cm3w...", // Pass the click ID from your frontend
  customerName: "John Doe",
  customerEmail: "john@example.com",
  customerAvatar: "https://example.com/avatar.jpg",
});
📝

When to track sale: Track sale events only after a user successfully completes a purchase or payment-related action. Ensure the event is triggered only after the backend confirms the payment was successful.

View your conversions

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:

SupabaseTracking refunds