Script Variants

Learn more about the different variants of the @dub/analytics script.

Inspired by Plausible, our script is split into multiple variants to help you optimize your script for different use cases.

This allows us to keep the base variant of the script as lightweight as possible (~1kb) while still allowing you to use the script in more complex use cases.

Syntax

The base script is available on script.js, and all variants are available on script.[variant].js.

For instance, the outbound-domains variant is available on script.outbound-domains.js.

You can also mix and match variants. For example, you can use the site-visit and outbound-domains variants together with this script: script.site-visit.outbound-domains.js.

List of variants

Here’s a list of all the variants available:

• Base Variant
• Site Visit Variant
• Outbound Domains Variant
• Combined Variant

Base Variant (script.js)

The base variant of the script is the most lightweight variant of the script. It supports the following features:

• Detecting the dub_id query parameter and storing it as a first-party cookie.
• Tracking client-side click events for referral programs.
• Setting custom cookie window and attribution models

Here’s how you can use the base variant:

React

<DubAnalytics />

Site Visit Variant (script.site-visit.js)

@dub/analytics site visit feature is still in beta.

The site visit variant of the script is a variant of the script that supports tracking site visits.

On top of the features supported by the base variant, it also supports tracking the first entry page of a user, which is useful for measuring SEO and Google Ads performance.

Here’s how you can use the site visit variant:

React

// the DubAnalytics component automatically detects the `domainsConfig.site` prop
// and applies the site-visit script variant for you
<DubAnalytics domainsConfig={{ site: "site.dub.co" }} />

Outbound Domains Variant (script.outbound-domains.js)

The outbound domains variant of the script is a variant of the script that supports cross-domain tracking across different applications.

On top of the features supported by the base variant, it also supports appending the dub_id cookie to all outbound links targeting the domains you configure.

Here’s how you can use the outbound domains variant:

React

// the DubAnalytics component automatically detects the `domainsConfig.outbound` prop
// and applies the outbound-domains script variant for you
<DubAnalytics domainsConfig={{ outbound: ["example.com", "example.sh"] }} />

Combined Variant

You can also mix and match variants. For example, you can use the site-visit and outbound-domains variants together with this script: script.site-visit.outbound-domains.js.

Here’s how you can use the combined variant:

React

// the DubAnalytics component automatically detects the `domainsConfig` prop
// and applies the combined script variant for you
<DubAnalytics
  domainsConfig={{
    site: "site.dub.co",
    outbound: ["example.com", "example.sh"],
  }}
/>

DubAnalytics React Component

If you’re using a React application, we recommend using the DubAnalytics component to automatically apply the correct script variant for you.

For example, if you want to use the outbound-domains variant, you can do the following:

React

<DubAnalytics domainsConfig={{ outbound: ["example.com", "example.sh"] }} />

The DubAnalytics component will automatically detect the domainsConfig prop and apply the correct script variant for you.