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.

1

Install package

Using the package manager of your choice, add the @dub/analytics to your project.

npm install @dub/analytics
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
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>
  );
}
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 domainsConfig.refer property to enable client-side click-tracking.

app/layout.tsx
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 domainsConfig={{
        refer: "yourcompany.link"
      }} />
    </html>
  );
}

Read the client-side click-tracking guide for more information.

You can verify the installation with the following tests:

  1. Open the browser console and type in _dubAnalytics – if the script is installed correctly, you should see the _dubAnalytics object in the console.
  2. Add the ?dub_id=test query parameter to your website URL and make sure that the dub_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:

​
apiHost
url
default:"https://api.dub.co"

The base URL for the Dub API. This is useful for setting up reverse proxies to avoid adblockers.

​
attributionModel
first-click | last-click
default:"last-click"

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.
​
cookieOptions
CookieOption Object
​
domainsConfig
JSON-stringified object

Configure the domains that Dub will track. The following properties are available:

​
queryParam
string
default:"via"

The query parameter to listen to for client-side click-tracking (e.g. ?via=abc123).

​
scriptProps
HTMLScriptElement Object

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