React
How to add @dub/analytics to your React or Next.js site
With Dub Analytics, you can track lead and sale conversions on your website, enabling you to measure the effectiveness of your marketing campaigns.
Quickstart
This quick start guide will show you how to get started with Dub Analytics on your website.
Install package
Using the package manager of your choice, add the @dub/analytics
to your project.
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.
Optional: Set up client-side click tracking
If you’re using Dub Partners for affiliate management, you will also need to set up the domainsConfig.refer
property to enable client-side click-tracking.
Read the client-side click-tracking guide for more information.
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.
If both of these checks pass, the script is installed correctly. Otherwise, please make sure:
- 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
).