> ## Documentation Index
> Fetch the complete documentation index at: https://dub.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Learn more about the Dub Analytics script and how to install it.

Dub Analytics (`@dub/analytics`) is a lightweight (\~1kb), [open-source](https://github.com/dubinc/analytics) client-side script for [tracking conversion events](/help/article/dub-conversions) with Dub.

The script handles the detection of the `dub_id` query parameter and storing it as a first-party cookie, which will be used to attribute subsequent conversion events to the original link.

<Frame>
  <img src="https://assets.dub.co/help/conversion-click-event.png" alt="A diagram showing how click events are tracked in the conversion funnel" />
</Frame>

If you're using Dub Partners, this script also lets you [track clicks on the client-side](/docs/sdks/client-side/features/click-tracking) using query parameters (e.g. `?via=john`). This gives you the flexibility to track clicks directly on your website or app, without needing to rely on link redirects.

## Installation guides

You can install the Dub Analytics script in several different ways:

<CardGroup>
  <Card title="React" icon="react" href="/docs/sdks/client-side/installation-guides/react" horizontal />

  <Card title="Manual installation" icon="browser" href="/docs/sdks/client-side/installation-guides/manual" horizontal />

  <Card
    title="Framer"
    icon={
  <svg
    width="74"
    height="111"
    viewBox="0 0 74 111"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className="w-7 h-7"
  >
    <path d="M0 0H73.8374V36.9892H36.9187L0 0Z" fill="#155dfc" />
    <path d="M0 36.989H36.9187L73.8374 73.9796H0V36.989Z" fill="#155dfc" />
    <path d="M0 73.9797H36.9187V110.97L0 73.9797Z" fill="#155dfc" />
  </svg>
}
    href="/docs/sdks/client-side/installation-guides/framer"
    horizontal
  />

  <Card title="Shopify" icon="shopify" href="/docs/sdks/client-side/installation-guides/shopify" horizontal />

  <Card title="WordPress" icon="wordpress" href="/docs/sdks/client-side/installation-guides/wordpress" horizontal />

  <Card title="Webflow" icon="webflow" href="/docs/sdks/client-side/installation-guides/webflow" horizontal />

  <Card title="Google Tag Manager" icon="google" href="/docs/sdks/client-side/installation-guides/google-tag-manager" horizontal />
</CardGroup>

## Features

The Dub Analytics script comes with the following features:

* [Conversion-tracking](/docs/sdks/client-side/features/conversion-tracking)
* [Client-side click-tracking](/docs/sdks/client-side/features/click-tracking)
* [Cross-domain tracking](/docs/sdks/client-side/features/cross-domain-tracking)
* [Reverse-proxy support](/docs/sdks/client-side/features/reverse-proxy-support)

## Properties

You can pass the following props to the Dub Analytics script to customize its behavior:

<ParamField body="data-api-host" type="url" default="https://api.dub.co">
  The base URL for the Dub API. This is useful for [setting up reverse
  proxies](/docs/sdks/client-side/features/reverse-proxy-support) to avoid
  adblockers.
</ParamField>

<ParamField body="data-attribution-model" type="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.
</ParamField>

<ParamField body="data-cookie-options" type="JSON-stringified object">
  Custom properties to pass to the cookie. Refer to
  [MDN's Set-Cookie documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie) for
  all available options.

  <Expandable title="properties">
    <ParamField body="domain" type="string">
      Specifies the value for the `Domain` Set-Cookie attribute. This is useful
      for cross-domain tracking. Example: `.example.com`
    </ParamField>

    <ParamField body="expires" type="integer" default="90">
      Specifies the `Date` object to be the value for the `Expires` Set-Cookie
      attribute. Example: `new Date('2024-12-31')`
    </ParamField>

    <ParamField body="expiresInDays" type="integer" default="90">
      Specifies the number (in days) to be the value for the `Expires`
      Set-Cookie attribute.

      For example, to set the cookie window to 60 days (instead of the default 90 days), you can add the following to your script:

      ```html theme={null}
      <script
        src="https://www.dubcdn.com/analytics/script.js"
        defer
        data-cookie-options='{"expiresInDays": 60}'
      ></script>
      ```
    </ParamField>

    <ParamField body="path" type="string" default="/">
      Specifies the value for the `Path` Set-Cookie attribute. By default, the
      path is considered the "default path". Example: `/`
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="data-domains" type="JSON-stringified object">
  Configure the domains that Dub will track. The following properties are available:

  <Expandable title="properties">
    <ParamField body="refer" type="string">
      The Dub custom domain for [referral program client-side click tracking](http://d.to/clicks/refer) (previously `data-short-domain`).
      Example: `refer.dub.co`
    </ParamField>

    <ParamField body="site" type="string">
      The Dub short domain for tracking site visits.
      Example: `site.dub.co`
    </ParamField>

    <ParamField body="outbound" type="string | string[]">
      An array of domains for cross-domain tracking. When configured, the existing `dub_id` cookie
      will be automatically appended to all outbound links targeting these domains to enable
      cross-domain tracking across different applications.
      Example: `"dub.sh, git.new"`
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="data-query-params" type="string[]" default="[&#x22;via&#x22;]">
  An array of query parameters to listen to for client-side click-tracking (e.g.
  `?via=abc123`).
</ParamField>

## Open-source examples

Here are some open-source code examples that you can reference:

<CardGroup cols={2}>
  <Card title="Dub Analytics with Client-side Click Tracking + Reverse Proxy" icon="github" href="https://github.com/dubinc/analytics/tree/main/apps/nextjs-reverse-proxy" color="#333333">
    See the full example on GitHub.
  </Card>

  <Card title="Dub Analytics with Geolocation" icon="github" href="https://github.com/dubinc/analytics/tree/main/apps/nextjs-geolocation-script" color="#333333">
    See the full example on GitHub.
  </Card>
</CardGroup>