Learn how to track sales conversion events with Linkkit on the client side, allowing you to attribute purchases and revenue directly from your frontend application.
Linkkit’s powerful attribution platform helps you understand how effectively your links are driving user acquisition, conversions, and revenue growth.
In this guide, you'll learn how to track conversion events with Linkkit using client-side tracking, enabling you to measure leads, sales, and other key actions directly from your frontend application.
Ad blockers – Some users may have ad blockers that prevent tracking scripts from loading.
JavaScript disabled – Conversion events cannot be tracked if JavaScript is disabled in the user's browser.
Network interruptions – Failed tracking requests caused by network issues may not be retried automatically.
Privacy restrictions – Certain browser settings, privacy tools, or user preferences may block client-side tracking.
For improved reliability and more accurate attribution, consider implementing server-side conversion tracking with Linkkit.
Step 1: Enable Conversion Tracking for Your Links
Before you can start tracking conversions, you'll need to enable conversion tracking for your Linkkit links. Once enabled, Linkkit can attribute leads, sales, and other conversion events back to the original referral link.
Option 1: Enable Conversion Tracking at the Workspace Level
Navigate to your workspace’s Tracking Settings page.
Turn on the Workspace-Level Conversion Tracking option.
Once enabled, conversion tracking will be applied to all future links created in that workspace.
This option will automatically enable conversion tracking in the **Linkkit Link Builder** for all future links created within the workspace.
Option 2: Enable Conversion Tracking at the Link Level
To enable conversion tracking for a particular link:
Open the Linkkit Link Builder for the link.
Turn on the Conversion Tracking option.
Enabling conversion tracking for a link
This setting will apply conversion tracking only to the selected link.
For faster access, you can also press the C keyboard shortcut while inside the Linkkit Link Builder to quickly enable conversion tracking for the current link.
Option 3: Enable Conversion Tracking via the API
When creating or updating a link, simply set the trackConversion parameter to true:
Step 2: Install the Linkkit Analytics Script
Next, you'll need to install the Linkkit Analytics script and configure it for client-side conversion tracking.
1. Allowlist Your Website Domain
To enable Linkkit to receive and process client-side conversion events, you'll first need to add your website's domain to the allowlist.
To do this:
- Navigate to your workspace's Tracking Settings page.
- Add your website's domain to the Allowed Hostnames list.
Adding your domain provides an extra layer of security by ensuring that only authorized websites can send conversion events using your publishable key.
When adding domains to the Allowed Hostnames list, you can use different hostname patterns depending on the traffic you want to track:
- example.com – Tracks conversion events only from example.com.
- *.example.com – Tracks conversion events from all subdomains of example.com (such as www.example.com, app.example.com, or shop.example.com), but does not include example.com itself.
This flexibility allows you to control exactly which domains and subdomains are authorized to send conversion events to Linkkit.
2. Generate Your Publishable Key
Before you can start tracking conversions on the client side, you'll need to generate a publishable key from your Linkkit workspace.
To generate a publishable key:
- Navigate to your workspace's Tracking Settings page.
- Locate the Publishable Key section.
- Generate a new publishable key.
This key is used to authenticate and securely send client-side conversion events from your website to Linkkit.
3. Install the Linkkit Analytics Script
Next, install the Linkkit Analytics script on your website or web application.
The Linkkit Analytics script is responsible for capturing attribution data and enabling client-side conversion tracking.
You can install the Linkkit Analytics script using any of the following methods:
<script>
!(function (c, n) {
c[n] =
c[n] ||
function () {
(c[n].q = c[n].q || []).push(arguments);
};
["trackClick", "trackLead", "trackSale"].forEach(
(t) => (c[n][t] = (...a) => c[n](t, ...a)),
);
var s = document.createElement("script");
s.defer = 1;
s.src = "https://www.linkkitcdn.com/analytics/script.conversion-tracking.js";
s.setAttribute("data-publishable-key", "linkkit_pk_xxxxxxxx"); // Replace with your publishable key
document.head.appendChild(s);
})(window, "linkkitAnalytics");
</script>import { Analytics as LinkKitAnalytics } from '@linkkit/analytics/react';
export default function RootLayout({
children,
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<LinkKitAnalytics
...
publishableKey="linkkit_pk_xxxxxxxx" // Replace with your publishable key
/>
</html>
);
}
Step 3: Track lead events
Once the Linkkit Analytics script has been installed, you can begin tracking lead events directly from your application on the client side.
Track Leads Using URL Query Parameters (Recommended)
If users are redirected to a thank-you page after completing a successful action, you can track lead events by reading values from the URL query parameters.
This approach is simple to implement and helps ensure that conversion events are accurately attributed to the original referral link.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Thank You</title>
</head>
<body>
<div>Thank you for signing up!</div>
<script>
// Get query parameters from URL
const params = new URLSearchParams(window.location.search);
const email = params.get("email");
const name = params.get("name");
if (email) {
// Track the lead event
dubAnalytics.trackLead({
eventName: "Sign Up",
customerExternalId: email, // can also be customer email
customerName: name || undefined,
customerEmail: email,
});
}
</script>
</body>
</html>import { useAnalytics } from "@dub/analytics/react";
import { useEffect } from "react";
export function ThankYouPage() {
const { trackLead } = useAnalytics();
useEffect(() => {
// Get query parameters from URL
const params = new URLSearchParams(window.location.search);
const email = params.get("email");
const name = params.get("name");
if (email) {
// Track the lead event
trackLead({
eventName: "Sign Up",
customerExternalId: email, // can also be customer email
customerName: name || undefined,
customerEmail: email,
});
}
}, [trackLead]);
return <div>Thank you for signing up!</div>;
}Track Leads from Form Submissions
You can also track lead events directly when users submit a form on your website.
This method allows you to record conversions immediately after a successful form submission, ensuring that lead activity is captured and attributed to the appropriate referral source in Linkkit.
When sending a lead event to Linkkit, you can include the following properties to provide additional context and improve conversion attribution:
When to Track Lead Events
Lead events should be tracked after a user successfully completes an action that indicates interest in your product or service, such as:
- Creating a new account or registering as a user
- Subscribing to a newsletter
- Submitting a contact form
- Requesting a demo or signing up for a free trial
- Downloading gated content, such as eBooks, guides, or whitepapers
To ensure accurate conversion tracking, the lead event should only be triggered after your backend confirms that the action has been completed successfully. This helps prevent duplicate, incomplete, or invalid lead records from being captured in Linkkit.
Step 4: Track Sale Events
Once the Linkkit Analytics script has been installed, you can begin tracking sale events directly from your application on the client side.
Track Sales Using URL Query Parameters (Recommended)
If users are redirected to a confirmation or thank-you page after completing a purchase, you can track sale events by reading values from the URL query parameters.
This method makes it easy to record completed purchases and attribute them to the appropriate referral link within Linkkit, ensuring accurate conversion and revenue tracking.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Order Confirmation</title>
</head>
<body>
<div>Thank you for your purchase!</div>
<script>
// 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");
if (customerId && amount) {
// Track the sale event
linkkitAnalytics.trackSale({
eventName: "Purchase",
customerExternalId: customerId, // can also be customer email
amount: parseInt(amount), // Amount in cents
invoiceId: invoiceId || undefined,
// Additional props for direct sale tracking (without prior lead event):
// clickId: "cm3w...", // Read from linkkit_id cookie
// customerName: "John Doe",
// customerEmail: "john@example.com",
// customerAvatar: "https://example.com/avatar.jpg",
// currency: "usd",
// paymentProcessor: "stripe",
// metadata: { plan: "pro" },
});
}
</script>
</body>
</html>import { useAnalytics } from "@linkkit/analytics/react";
import { useEffect } from "react";
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");
if (customerId && amount) {
// Track the sale event
trackSale({
eventName: "Purchase",
customerExternalId: customerId, // can also be customer email
amount: parseInt(amount), // Amount in cents
invoiceId: invoiceId || undefined,
// Additional props for direct sale tracking (without prior lead event):
// clickId: "cm3w...", // Read from linkkit_id cookie
// customerName: "John Doe",
// customerEmail: "john@example.com",
// customerAvatar: "https://example.com/avatar.jpg",
});
}
}, [trackSale]);
return <div>Thank you for your purchase!</div>;
}Track Sales from Form Submissions
You can also track sale events directly when users successfully complete a checkout or purchase form on your website.
This approach allows you to record sales immediately after a transaction is completed, ensuring that revenue and conversion data are accurately attributed to the correct referral source in Linkkit.
The following properties can be included when sending a sale event to Linkkit:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Checkout</title>
</head>
<body>
<form id="checkoutForm">
...
<button type="submit">Checkout</button>
</form>
<script>
document
.getElementById("checkoutForm")
.addEventListener("submit", function (e) {
e.preventDefault();
// Track the sale event
linkkitAnalytics.trackSale({
eventName: "Purchase",
customerExternalId: "cus_RBfbD57H", // can also be customer email
amount: 5000, // $50.00
invoiceId: "in_1MtHbELkdIwH",
// Additional props for direct sale tracking (without prior lead event):
// clickId: "cm3w...", // Read from linkkit_id cookie
// customerName: "John Doe",
// customerEmail: "john@example.com",
// customerAvatar: "https://example.com/avatar.jpg",
// currency: "usd",
// paymentProcessor: "stripe",
// metadata: { plan: "pro" },
});
});
</script>
</body>
</html>import { useAnalytics } from "@linkkit/analytics/react";
import { useState } from "react";
export function CheckoutForm() {
const { trackSale } = useAnalytics();
// …
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
// Track the sale event
trackSale({
eventName: "Purchase",
customerExternalId: "cus_RBfbD57H", // can also be customer email
amount: 5000, // $50.00
invoiceId: "in_1MtHbELkdIwH",
// For direct sale tracking (without prior lead event):
// clickId: "cm3w...", // Read from linkkit_id cookie
// customerName: "John Doe",
// customerEmail: "john@example.com",
// customerAvatar: "https://example.com/avatar.jpg",
});
};
return (
<form onSubmit={handleSubmit}>
...
</form>
);
}When to Track Sale Events
Sale events should only be tracked after a user successfully completes a purchase or payment-related action, such as:
- Completing a checkout or placing an order
- Making a subscription payment
- Paying an invoice
- Converting from a trial or demo to a paid plan
- Any other successful revenue-generating transaction
To ensure accurate conversion and revenue tracking, the sale event should be triggered only after your backend confirms that the payment has been successfully processed. This helps prevent duplicate, incomplete, or invalid sale records from being sent to Linkkit.
Step 5: View Your Conversions
That's it — you're all set! Once conversion tracking is configured, you can monitor your leads, sales, and revenue directly within the Linkkit Analytics Dashboard.
To help you better understand your conversion performance, Linkkit provides several reporting views:
Time-Series View
A time-based visualization that displays the number of clicks, leads, and sales over a selected period. This view helps you track trends, measure performance, and identify changes in conversion activity over time.
Time-series chart showing clicks, leads, and sales over time.
Funnel View
A funnel chart that visualizes the conversion rates and drop-off rates across each stage of the conversion journey, from Clicks → Leads → Sales.
This view helps you identify where users are progressing successfully and where potential customers are dropping off, making it easier to optimize your conversion funnel and improve overall performance.
Funnel chart displaying conversion and drop-off rates from Clicks → Leads → Sales.
Real-Time Events Stream
A live event stream that displays every conversion event as it happens across all links in your workspace.
This view provides real-time visibility into user activity, allowing you to monitor clicks, leads, and sales as they occur and quickly verify that your conversion tracking is working correctly.
Real-time events stream showing conversion activity across all workspace links.