> ## 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.
# React
> How to add @codeqr/analytics to your React or Next.js site
With CodeQR 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 CodeQR Analytics on your website.
Using the package manager of your choice, add the `@codeqr/analytics` to your project.
```bash npm theme={null}
npm install @codeqr/analytics
```
```bash pnpm theme={null}
pnpm add @codeqr/analytics
```
```bash yarn theme={null}
yarn add @codeqr/analytics
```
```bash bun theme={null}
bun add @codeqr/analytics
```
If you are using a React framework, you can use the `` component to track conversions on your website.
E.g. if you're using Next.js, you can add the `` component to your root layout component or any other pages where you want to track conversions.
```jsx app/layout.tsx theme={null}
import { Analytics as CodeQRAnalytics } from '@codeqr/analytics/react';
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
{children}
);
}
```
If you're using [CodeQR Partners](/partners/quickstart) for affiliate management, you will also need to set up the `domainsConfig.refer` property to enable [client-side click-tracking](/sdks/client-side/features/client-side-click-tracking).
```jsx app/layout.tsx theme={null}
import { Analytics as CodeQRAnalytics } from '@codeqr/analytics/react';
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
{children}
);
}
```
Read the [client-side click-tracking guide](/sdks/client-side/features/client-side-click-tracking) for more information.
You can **verify the installation** with the following tests:
1. Open the browser console and type in `_CodeQRAnalytics` – if the script is installed correctly, you should see the `_CodeQRAnalytics` object in the console.
2. Add the `?cq_id=test` query parameter to your website URL and make sure that the `cq_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 `` 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 `` component to customize its behavior:
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.
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.
Specifies the value for the `Domain` Set-Cookie attribute. This is useful
for cross-domain tracking. Example: `.example.com`
Specifies the `Date` object to be the value for the `Expires` Set-Cookie
attribute. Example: `new Date('2024-12-31')`
Specifies the number (in days) to be the value for the `Expires`
Set-Cookie attribute. Example: `90`
Specifies the value for the `Path` Set-Cookie attribute. By default, the
path is considered the "default path". Example: `/`
Configure the domains that CodeQR will track. The following properties are available:
The CodeQR custom domain for [referral program client-side click tracking](http://d.to/clicks/refer)
(previously `shortDomain`).
Example: `refer.codeqr.io`
The CodeQR short domain for tracking site visits.
Example: `site.codeqr.io`
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"]`
The query parameter to listen to for client-side click-tracking (e.g.
`?via=abc123`).
Custom properties to pass to the script tag. Refer to
[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement) for
all available options.