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

# Analytics SDK

> Bring back visitor analytics to your Komerza Dashboard with our lightweight analytics script

## Overview

The Komerza Analytics SDK allows you to track visitor behavior on your custom website and view the analytics directly in your Komerza Dashboard. With just a single script tag, you'll get comprehensive visitor insights including page views, user sessions, conversion tracking, and more.

<Card title="View Analytics" icon="chart-line" href="https://dashboard.komerza.com/">
  Access your visitor analytics in the Komerza Dashboard
</Card>

## Features

<CardGroup cols={2}>
  <Card title="GDPR Compliant" icon="shield-check">
    Automatic cookie consent management with essential/optional cookies
  </Card>

  <Card title="Zero Configuration" icon="bolt">
    Just include the script with your store ID - no complex setup required
  </Card>

  <Card title="Real-time Analytics" icon="chart-line">
    View visitor data instantly in your Komerza Dashboard
  </Card>

  <Card title="Privacy Focused" icon="eye-slash">
    Respects user privacy with transparent cookie consent and Shadow DOM isolation
  </Card>
</CardGroup>

## Quick Start

### Single Script Integration

Add the analytics script to your HTML pages with your store ID:

```html theme={null}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Store</title>
  </head>
  <body>
    <!-- Your website content -->
    <h1>Welcome to My Store</h1>

    <!-- Komerza Analytics - Add before closing </body> tag -->
    <script
      data-store-id="your-store-id"
      src="https://cdn.komerza.com/ka.min.js"
    ></script>
  </body>
</html>
```

<Note>
  Replace `your-store-id` with your actual Komerza store ID from your dashboard.
  The analytics script automatically handles GDPR compliance by showing a cookie
  consent notice to visitors.
</Note>

## Cookie Consent Flow

When a visitor first arrives on your site:

1. **Immediate Pageview**: An IP-only pageview is recorded immediately (GDPR compliant)
2. **Cookie Notice Display**: A GDPR-compliant notice appears in the bottom-right
3. **20-Second Timer**: If no response, "Required Only" tracking activates automatically
4. **User Choice**: Visitor can choose "Required Only" or "Accept All" at any time
5. **Preference Storage**: Choice is remembered for future visits (1-hour cookie expiry)

<Tabs>
  <Tab title="Required Only">
    * Random visitor ID (not fingerprinted)
    * Device type and browser name
    * Referrer information
    * Session tracking (1-hour expiry)
    * No cross-session tracking
  </Tab>

  <Tab title="Accept All">
    * Browser fingerprint for stable visitor ID
    * Full analytics tracking
    * Enhanced user behavior insights
    * Conversion and goal tracking
    * Detailed performance metrics
    * Cross-session tracking
  </Tab>
</Tabs>

## Implementation Examples

### Basic Website

```html theme={null}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Online Store</title>
  </head>
  <body>
    <header>
      <h1>My Store</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/products">Products</a>
        <a href="/about">About</a>
      </nav>
    </header>

    <main>
      <h2>Welcome to My Store</h2>
      <p>Discover amazing products...</p>
    </main>

    <footer>
      <p>&copy; 2025 My Store. All rights reserved.</p>
    </footer>

    <!-- Komerza Analytics -->
    <script
      data-store-id="7c1e4aa4-a28f-4855-a7e1-6dcc020d2083"
      src="https://cdn.komerza.com/ka.min.js"
    ></script>
  </body>
</html>
```

### E-commerce Site

```html theme={null}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Product Page - My Store</title>
  </head>
  <body>
    <div class="product-page">
      <h1>Amazing Product</h1>
      <div class="product-details">
        <img src="product-image.jpg" alt="Product" />
        <div class="product-info">
          <p class="price">$29.99</p>
          <button id="add-to-cart">Add to Cart</button>
          <button id="buy-now">Buy Now</button>
        </div>
      </div>
    </div>

    <!-- Komerza Analytics -->
    <script
      data-store-id="your-store-id"
      src="https://cdn.komerza.com/ka.min.js"
    ></script>

    <!-- Your product interaction scripts -->
    <script>
      document.getElementById("buy-now").addEventListener("click", function () {
        // Your checkout logic here
        // Analytics will automatically track this page interaction
      });
    </script>
  </body>
</html>
```

### React/SPA Integration

For single-page applications, add the script once in your main HTML file:

```html theme={null}
<!-- public/index.html (React) or main HTML file -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React Store</title>
  </head>
  <body>
    <div id="root"></div>

    <!-- Komerza Analytics -->
    <script
      data-store-id="your-store-id"
      src="https://cdn.komerza.com/ka.min.js"
    ></script>
  </body>
</html>
```

## Manual Consent Control

If you want to programmatically control consent (e.g., custom cookie banner):

```html theme={null}
<script
  data-store-id="your-store-id"
  src="https://cdn.komerza.com/ka.min.js"
></script>

<script>
  // Accept required-only tracking
  function acceptRequired() {
    window.KomerzaAnalytics.acceptRequired();
  }

  // Accept full analytics tracking
  function acceptAll() {
    window.KomerzaAnalytics.acceptOptional();
  }

  // Example: Custom button handlers
  document
    .getElementById("accept-required")
    .addEventListener("click", acceptRequired);
  document.getElementById("accept-all").addEventListener("click", acceptAll);
</script>
```

## Privacy Features

* **Random visitor IDs**: Required-only tracking uses crypto-random IDs (not fingerprinted)
* **Short expiry**: All cookies expire after 1 hour
* **No cross-domain tracking**: Cookies are site-specific
* **IP anonymization**: Essential pageviews are IP-only, no visitor ID

## Content Security Policy (CSP)

For sites with CSP headers, add the following to your CSP configuration:

```http theme={null}
Content-Security-Policy:
  script-src 'self' https://cdn.komerza.com;
  connect-src 'self' https://m-api.komerza.com;
```

<Note>
  The analytics script does not require CSP nonce integration as it loads from a
  trusted CDN. However, ensure `https://cdn.komerza.com` is in your `script-src`
  directive, and `https://m-api.komerza.com` is in your `connect-src` directive
  to allow data transmission.
</Note>

## Viewing Your Analytics

Once the script is installed and visitors start coming to your site:

1. **Login to Dashboard**: Visit [dashboard.komerza.com](https://dashboard.komerza.com)
2. **Navigate to Visitor Analytics**: Click on the "Visitors" section
3. **View Insights**: See real-time and historical visitor data
4. **Track Performance**: Monitor conversion rates and user behavior

<CardGroup cols={2}>
  <Card title="Real-time Analytics" icon="chart-line" href="https://dashboard.komerza.com?visitors">
    View live visitor activity and current site performance
  </Card>

  <Card title="Historical Reports" icon="chart-bar" href="https://dashboard.komerza.com/">
    Access detailed reports and trends over time
  </Card>
</CardGroup>

## Ad Blocker Compatibility

The analytics script uses the filename `ka.min.js` which is less likely to be blocked by ad blockers compared to filenames containing "analytics" or "tracking". However, some aggressive blockers may still block analytics requests.

## Support

<CardGroup cols={2}>
  <Card title="Analytics Dashboard" icon="chart-line" href="https://dashboard.komerza.com/">
    Access your visitor analytics and reports
  </Card>

  <Card title="Technical Support" icon="headset" href="mailto:support@komerza.com?subject=Analytics SDK Support">
    Get help with analytics integration
  </Card>
</CardGroup>
