Quickstart
This quick start guide will show you how to get started with Dub Analytics on your website.1
Install package
Using the package manager of your choice, add the
@dub/analytics
to your project.2
Initialize package in your code
If you are using a React framework, you can use the
<Analytics />
component to track conversions on your website.E.g. if you’re using Next.js, you can add the <Analytics />
component to your root layout component or any other pages where you want to track conversions.app/layout.tsx
3
Optional: Set up client-side click tracking
If you’re using Dub Partners for affiliate management, you will also need to set up the Read the client-side click-tracking guide for more information.
domainsConfig.refer
property to enable client-side click-tracking.app/layout.tsx
You can verify the installation with the following tests:
- Open the browser console and type in
_dubAnalytics
– if the script is installed correctly, you should see the_dubAnalytics
object in the console. - Add the
?dub_id=test
query parameter to your website URL and make sure that thedub_id
cookie is being set in your browser.
- 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
Concepts
You can pass the following props to the<Analytics />
component to customize its behavior:
The base URL for the Dub API. This is useful for setting up reverse
proxies to avoid
adblockers.
The attribution model to use for the analytics event. The following
attribution models are available:
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.
Configure the domains that Dub will track. The following properties are available:
The query parameter to listen to for client-side click-tracking (e.g.
?via=abc123
).