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

# Introduction

> Learn more about the @codeqr/analytics script and how to install it.

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

The script handles the detection of the `cq_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 className="rounded-lg border border-gray-100" src="https://res.cloudinary.com/dhnaggn4g/image/upload/v1753665245/static/conversion-click-event_o5pbdg.png" alt="A diagram showing how click events are tracked in the conversion funnel" />
</Frame>

If you're using CodeQR Partners, this script also lets you [track clicks on the client-side](/sdks/client-side/features/client-side-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 `@codeqr/analytics` script in several different ways:

<CardGroup>
  <Card title="React" icon="react" href="https://docs.codeqr.io/sdks/client-side/installation-guides/react">
    Add CodeQR Analytics to your React app
  </Card>

  <Card title="Manual installation" icon="browser" href="https://docs.codeqr.io/sdks/client-side/installation-guides/manual">
    Add CodeQR Analytics to your website
  </Card>

  <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="#eb5611" />
    <path d="M0 36.989H36.9187L73.8374 73.9796H0V36.989Z" fill="#eb5611" />
    <path d="M0 73.9797H36.9187V110.97L0 73.9797Z" fill="#eb5611" />
  </svg>
}
    href="https://docs.codeqr.io/sdks/client-side/installation-guides/framer"
  >
    Add CodeQR Analytics to your Framer site
  </Card>

  <Card title="WordPress" icon="wordpress" href="https://docs.codeqr.io/sdks/client-side/installation-guides/wordpress">
    Add CodeQR Analytics to your WP site
  </Card>

  <Card title="Webflow" icon="webflow" href="https://docs.codeqr.io/sdks/client-side/installation-guides/webflow">
    Add CodeQR Analytics to your Webflow site
  </Card>
</CardGroup>

## Features

The `@codeqr/analytics` script comes with the following features:

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

## Properties

You can pass the following props to the `@codeqr/analytics` script to customize its behavior:

<ParamField body="data-api-host" type="url" default="https://api.codeqr.io">
  The base URL for the CodeQR API. This is useful for [setting up reverse
  proxies](/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://codeqr-cdn.pages.dev/analytics/script.js"
        defer
        data-cookie-options='{"expiresInDays": 60}'
      />
      ```
    </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 CodeQR will track. The following properties are available:

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

    <ParamField body="site" type="string">
      The CodeQR short domain for tracking site visits.
      Example: `site.codeqr.io`
    </ParamField>

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

<ParamField body="data-query-param" type="string" default="via">
  The query parameter 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 referece:

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

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