# Installation guide

## **Accessing the Tracking Snippet**

When adding a new site to your Cookie Analytics account, the tracking snippet will be displayed automatically.

For websites already added to your account, follow these steps to retrieve the snippet:

1. Log in to your **Cookie3 Analytics account**.
2. Click on the “Manage websites” button in the application’s sidebar.
3. Click on the "Install" or "Manage" button in the table row corresponding with your website

### What’s inside the tracking snippet?

The current version of the script should look like this:

```jsx
<script
   src="<https://cdn.markfi.xyz/scripts/analytics/><current-script-version>/cookie3.analytics.min.js"
   integrity="sha384-lp8ATuGdLnhwAutE0SOVmSINtZ4DObSNjODmbbjYxaX92FOPBLyZjN+wVIaoK4Qy"
   crossOrigin="anonymous"
   site-id="<your-site-id>"
   async="true"
></script>
```

The tracking snippet contains several important attributes:

* `src`: The URL of the Cookie3 Analytics script. Should be set to the `cdn.markfi.xyz` hostname
* `integrity`: A hash that ensures the script's integrity. Read more about our Security measures here →
* `crossOrigin`: Set to "anonymous" for CORS requests
* `site-id`: Your unique site identifier that you can copy within the app

## Installation guides

#### **Add The Tracking Snippet To Your Site’s \<head>**

* To integrate your website with Cookie3 Analytics, you need to insert the **Cookie3 tracking snippet** into the header section of your site.
* Place the snippet within the \<head> ... \</head> tags on your website’s pages.

### **Next.js**

For Next.js applications, you can add the Cookie3 tracking snippet to your pages by following these steps:

* Access your `layout.tsx` or `_app.tsx` in your project’s repository
* Add the following code to the file:

  ```jsx
  import Script from 'next/script'

  export default function RootLayout({ children }) {
    return (
      <html lang="en">
        <head>
          <Script
            src="<https://cdn.markfi.xyz/scripts/analytics/><current-script-version>/cookie3.analytics.min.js"
            integrity="sha384-lp8ATuGdLnhwAutE0SOVmSINtZ4DObSNjODmbbjYxaX92FOPBLyZjN+wVIaoK4Qy"
            crossOrigin="anonymous"
            site-id="<your-site-id>"
            strategy="lazyOnLoad"
            async
          />
        </head>
        <body>{children}</body>
      </html>
    )
  }
  ```
* Replace `current-script-version` and `your-site-id` with the appropriate values from your Cookie3 Analytics account.

### **Nuxt**

For Nuxt applications, you can add the Cookie3 tracking snippet by following these steps:

* Create a new file called `cookie3-analytics.client.js` in your `plugins` directory
* Add the following code to the file:

```jsx
export default defineNuxtPlugin(() => {
  useHead({
    script: [
      {
        src: '<https://cdn.markfi.xyz/scripts/analytics/><current-script-version>/cookie3.analytics.min.js',
        integrity: 'sha384-lp8ATuGdLnhwAutE0SOVmSINtZ4DObSNjODmbbjYxaX92FOPBLyZjN+wVIaoK4Qy',
        crossOrigin: 'anonymous',
        'site-id': '<your-site-id>',
        async: true,
      },
    ],
  })
})
```

* Replace `current-script-version` and `your-site-id` with the appropriate values from your Cookie3 Analytics account.

### **Wordpress**

For WordPress websites, you can add the Cookie3 tracking snippet by following these steps:

* Log in to your WordPress admin panel
* Navigate to Appearance > Theme Editor
* Select your active theme and locate the header.php file
* Add the Cookie3 tracking snippet just before the closing \</head> tag in the header.php file
* Save the changes and refresh your WordPress site

Remember to replace the \<current-script-version> and \<your-site-id> placeholders with the appropriate values from your Cookie3 Analytics account.

### **Framer**

For Framer websites, you can add the Cookie3 tracking snippet by following these steps:

* Open your Framer project and navigate to the Settings panel
* Click on the "Custom Code" tab
* Paste the Cookie3 tracking snippet into the "Head" section

### **Webflow**

For Webflow websites, you can add the Cookie3 tracking snippet by following these steps:

* Log in to your Webflow account and open your project
* Navigate to the project settings and select the "Custom Code" tab
* Paste the Cookie3 tracking snippet into the "Head Code" section


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cookie3.com/cookie3-analytics/setup-your-site-or-app/installation-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
