@dub/analytics

Overview

@dub/analytics allows you to track leads and sales conversions for Dub.

Quick start

1. Enable conversion tracking for your Dub link.
2. Install the @dub/analytics package to your project

``bash
npm install @dub/analytics
`

3. Inject the Analytics script to your app

`tsx
import { Analytics as DubAnalytics } from '@dub/analytics/react';

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (

{children}


);
}
`

You can all use the inject() function to add the tracking script to other frameworks.

Available Props

You can pass the following props to the Analytics component to customize the tracking script.

$3

The API host to use for tracking. This is useful for setting up reverse proxies to avoid adblockers. The default is https://api.dub.co.

$3

This is a JSON object that configures the domains that Dub will track.

- refer: The Dub short domain for referral program client-side click tracking (previously shortDomain).
- site: The Dub short domain for tracking site visits.
- outbound: An array of domains for cross-domain tracking. When configured, the existing dub_id cookie will be automatically appended to all outbound links targeting these domains to enable cross-domain tracking across different applications.

$3

[DEPRECATED: use domainsConfig.refer instead] The custom short domain you're using on Dub for your short links (for client-side click tracking).

$3

Decide the attribution model to use for tracking. The default is last-click.

- first-click - The first click model gives all the credit to the first touchpoint in the customer journey.
- last-click - The last click model gives all the credit to the last touchpoint in the customer journey.

$3

The cookieOptions prop accepts the following keys:

| Key | Default | Description | Example |
|----------|---------|-------------|---------|
| domain | null | Specifies the value for the Domain Set-Cookie attribute. | example.com |
| expires | 90 days from now | Specifies the Date object to be the value for the Expires Set-Cookie attribute. | new Date('2024-12-31') |
| expiresInDays | 90 | Specifies the number (in days) to be the value for the Expires Set-Cookie attribute. | 90 |
| path | / | Specifies the value for the Path Set-Cookie attribute. By default, the path is considered the "default path". | / |

For example, to set a 60-day cookie window, you can use the following code:

`tsx
import { Analytics as DubAnalytics } from "@dub/analytics"

cookieOptions={{
expiresInDays: 60,
}}
/>
`

$3

The query parameter to listen to for client-side click-tracking (e.g. ?via=john, ?ref=jane). The default is via`.

$3

Custom properties to pass to the script tag. Refer to MDN for all available options.