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

# Install the Browser SDK

> Add the Scanova tracking snippet to your website directly in HTML or via Google Tag Manager. Works with any website, CMS, or frontend framework.

The SDK is a single `<script>` tag. Install it once in your site's `<head>` and it loads asynchronously — no impact on page performance.

## Step 1: Copy your snippet from the dashboard

1. Go to **Integrations → Conversion Tracking** in the Scanova dashboard
2. Click on your tracking site
3. Open the **Embed** tab
4. Configure the auto-tracking toggles you want enabled
5. Copy the generated snippet

The snippet will look like this, with your `site_id` already filled in:

```html theme={null}
<script>
(function(w,d,s,o,f,js,fjs){
  w['ScanovaTrackingObject']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
  js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
  js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
})(window,document,'script','scanova','https://cdn.scanova.io/ct/js/qcg.min.js');

scanova('init', 'YOUR_SITE_ID', {
  autoPageview: true,
  autoClicks: true,
  autoForms: true,
  autoScroll: true
});
</script>
```

## Option A: Install directly in HTML (recommended)

Paste the snippet inside your site's `<head>` tag, **before the closing `</head>`**:

```html theme={null}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Your Page</title>

  <!-- Scanova Conversion Tracking -->
  <script>
  (function(w,d,s,o,f,js,fjs){
    w['ScanovaTrackingObject']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  })(window,document,'script','scanova','https://cdn.scanova.io/ct/js/qcg.min.js');

  scanova('init', 'YOUR_SITE_ID', {
    autoPageview: true,
    autoClicks: true,
    autoForms: true,
    autoScroll: true
  });
  </script>
</head>
<body>
  <!-- your content -->
</body>
</html>
```

**Where to paste in common platforms:**

| Platform    | Where to add the snippet                                             |
| ----------- | -------------------------------------------------------------------- |
| WordPress   | Appearance → Theme Editor → `header.php`, before `</head>`           |
| Shopify     | Online Store → Themes → Edit Code → `theme.liquid`, before `</head>` |
| Webflow     | Project Settings → Custom Code → Head Code                           |
| Squarespace | Settings → Advanced → Code Injection → Header                        |
| Wix         | Settings → Custom Code → Add Code → Head                             |
| Custom HTML | Directly in your HTML template `<head>`                              |

## Option B: Google Tag Manager

Use GTM if you manage all your tags from the GTM console and cannot edit your site's HTML directly.

1. Open your GTM container
2. Click **Tags → New**
3. Choose **Custom HTML** as the tag type
4. Paste the full Scanova snippet
5. Set the trigger to **All Pages**
6. Name the tag (e.g. "Scanova Conversion Tracking") and click **Save**
7. **Submit** and **Publish** the container

<Warning>
  Do not install the snippet both directly in HTML and via GTM on the same page. This will load the SDK twice and send duplicate events.
</Warning>

**GTM tips:**

* Place the tag to fire as early as possible — use "DOM Ready" or "Page View" triggers, not "Window Loaded"
* If your site is a single-page app (SPA), read the [SPA & Framework Guide](/conversion-tracking/browser/spa-frameworks) before configuring GTM triggers

## Step 2: Verify the installation

After deploying your snippet:

1. Open your website in a browser
2. Open **DevTools → Network** tab
3. Filter by `/ct`
4. Reload the page

You should see a `POST` request to `https://t.scanova.io/ct` returning `200`.

For a full verification checklist, see [Verify & Debug](/conversion-tracking/browser/verify).

## Next steps

<CardGroup cols={2}>
  <Card title="SDK Configuration" icon="sliders" href="/conversion-tracking/browser/sdk-configuration">
    Learn all init options and what each toggle controls.
  </Card>

  <Card title="Custom Events" icon="sparkles" href="/conversion-tracking/browser/custom-events">
    Track specific user actions from your JavaScript code.
  </Card>

  <Card title="SPA Frameworks" icon="react" href="/conversion-tracking/browser/spa-frameworks">
    React, Next.js, and Vue-specific setup.
  </Card>

  <Card title="Verify & Debug" icon="bug" href="/conversion-tracking/browser/verify">
    Confirm events are being received correctly.
  </Card>
</CardGroup>
