Client-side click-tracking

With the @dub/analytics script, you can track clicks on the client-side using query parameters (e.g. ?via=john, ?ref=jane).

A few use cases include:

• You’re using Dub Partners with dual-sided incentives and want to display a banner that says: “John referred you to Acme and gave you 25% off”
• You have dynamically generated referral pages (e.g. Tesla) and want to track clicks using a trackClick() function inside your application code.
• You are migrating from an existing affiliate management platform (e.g. Rewardful) that uses query parameters to track conversions.

​

Quickstart

Here’s how you can enable client-side click-tracking with the @dub/analytics script:

// install the package (e.g. npm install @dub/analytics)
import { Analytics as DubAnalytics } from "@dub/analytics/react";

export default function App() {
  return (
    <Layout>
      <DubAnalytics
        domainsConfig={{
          refer: "go.example.com", // the custom domain you're using on Dub for your short links
        }}
      />
      {/* Your app code here */}
    </Layout>
  );
}

​

Automatically fetching partner and discount data

If you’re using Dub Partners with dual-sided incentives, the script will automatically fetch the partner and discount data for you when someone lands on your site via a valid referral link.

This data will be stored as a JSON-stringified object in the dub_partner_data cookie in the following format:

{
  "clickId": "xxx", // unique ID of the click event
  "partner": {
    "id": "pn_xxx", // unique ID of the partner on Dub
    "name": "John Doe", // name of the partner
    "image": "https://example.com/john.png" // avatar of the partner
  },
  "discount": {
    "id": "disc_xxx", // unique ID of the discount on Dub
    "amount": 25, // discount amount (either a percentage or a fixed amount)
    "type": "percentage", // type of the discount (either "percentage" or "fixed")
    "maxDuration": 3, // maximum duration of the discount in months
    "couponId": "XZuejd0Q", // Stripe coupon code
    "couponTestId": "2NMXz81x" // Stripe test coupon ID
  }
}

To access this cookie data, we recommend using a cookie library like js-cookie – here’s an example:

import Cookies from "js-cookie";

const dubPartnerData = Cookies.get("dub_partner_data");
const { partner, discount } = dubPartnerData ? JSON.parse(dubPartnerData) : {};

// Display a banner that says: _"John referred you to Acme and gave you 25% off"_

return (
  <div className="flex items-center gap-2">
    <img src={image} alt={name} className="size-6 rounded-full" />
    <p>
      {name} referred you to Acme and gave you {amount} {type} off
    </p>
  </div>
);

Here’s an example of how the discount banner will look like:

​

Manually tracking clicks with the trackClick() function

This is helpful for tracking clicks on:

• Dynamically generated referral pages (e.g. Tesla)
• Dynamic user-generated content/webpages:
  • Dub’s public analytics dashboards (e.g. app.dub.co/share/:slug)
  • Cal.com’s booking pages (e.g. cal.com/steven)
  • Tella’s video pages (e.g. tella.tv/video/:slug)

​

Differences from server-side click-tracking

Server-side click-tracking is enabled by default for all Dub links and come with the following attributes:

These events happen on the server-side and cannot be blocked by browser extensions or ad-blockers, which improves the accuracy of your analytics data.