React
How to add Dub Analytics to your React or Next.js site
With Dub Analytics, you can track leads and sales 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.
import { Analytics as DubAnalytics } from '@dub/analytics/react';
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>{children}</body>
<DubAnalytics />
</html>
);
}
Concepts
You can pass the following props to the <Analytics />
component to customize the tracking script:
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.
For example, to set a cross domain cookie that works on the apex domain (domain.com
) as well as subdomains (app.domain.com
):
import { Analytics as DubAnalytics } from "@dub/analytics";
<DubAnalytics
cookieOptions={{
domain: process.env.IS_PRODUCTION_ENV
? ".yourdomain.com" // for cross-domain tracking
: undefined,
}}
/>;
Alternatively, to set a first-click attribution model:
import { Analytics as DubAnalytics } from "@dub/analytics";
<DubAnalytics attributionModel="first-click" />;
Examples
We also have some advanced examples on GitHub:
Was this page helpful?