Installation

Add the Open Analytics tracking script to your site. One snippet works everywhere — copy it from Settings → Tracking code in your dashboard for the exact site key and endpoint.

HTML & Vanilla JS

The simplest installation — drop the script anywhere in your HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
    <!-- Open Analytics -->
    <script
  async
  src="https://analytics.gitopen.dev/tracker.js?v=1.0.8"
  data-site-key="YOUR_SITE_KEY"
  data-endpoint="https://analytics.gitopen.dev/api/events"
  data-use-cookies="false"
></script>
  </head>
  <body>
    <!-- your content -->
  </body>
</html>

Tip

Using async ensures the script never blocks page rendering. The snippet uses data-use-cookies="false" (fingerprint mode) by default — change to "true" for cookie-based identification. See Visitor identification for details.

Next.js

Use the built-in Next.js Script component so the analytics script loads with the correct strategy.

App Router (Next.js 13+)

Add it to your root app/layout.tsx:

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://analytics.gitopen.dev/tracker.js?v=1.0.8"
          data-site-key="YOUR_SITE_KEY"
          data-endpoint="https://analytics.gitopen.dev/api/events"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pages Router (Next.js 12 and below)

Add it to pages/_app.tsx:

import Script from "next/script";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://analytics.gitopen.dev/tracker.js?v=1.0.8"
        data-site-key="YOUR_SITE_KEY"
        data-endpoint="https://analytics.gitopen.dev/api/events"
        strategy="afterInteractive"
      />
    </>
  );
}

Tip

The strategy="afterInteractive" loads the script after the page is interactive — ideal for analytics.

React (Vite / CRA)

Inject the script once inside your root component, or add it directly to index.html.

Option A — index.html (recommended)

<body>
  <div id="root"></div>
  <script
  async
  src="https://analytics.gitopen.dev/tracker.js?v=1.0.8"
  data-site-key="YOUR_SITE_KEY"
  data-endpoint="https://analytics.gitopen.dev/api/events"
  data-use-cookies="false"
></script>
</body>

Option B — useEffect hook

import { useEffect } from "react";

export default function App() {
  useEffect(() => {
    const s = document.createElement("script");
    s.src = "https://analytics.gitopen.dev/tracker.js?v=1.0.8";
    s.setAttribute("data-site-key", "YOUR_SITE_KEY");
    s.setAttribute("data-endpoint", "https://analytics.gitopen.dev/api/events");
    s.async = true;
    document.head.appendChild(s);
  }, []);

  return <div>{/* your app */}</div>;
}

Vue.js

index.html (simplest)

<!-- public/index.html -->
<body>
  <div id="app"></div>
  <script
  async
  src="https://analytics.gitopen.dev/tracker.js?v=1.0.8"
  data-site-key="YOUR_SITE_KEY"
  data-endpoint="https://analytics.gitopen.dev/api/events"
  data-use-cookies="false"
></script>
  <script type="module" src="/src/main.ts"></script>
</body>

App.vue — onMounted

<script setup>
import { onMounted } from "vue";

onMounted(() => {
  const s = document.createElement("script");
  s.src = "https://analytics.gitopen.dev/tracker.js?v=1.0.8";
  s.setAttribute("data-site-key", "YOUR_SITE_KEY");
  s.setAttribute("data-endpoint", "https://analytics.gitopen.dev/api/events");
  s.async = true;
  document.head.appendChild(s);
});
</script>

<template>
  <RouterView />
</template>

Tip

Open Analytics automatically hooks into history.pushState so Vue Router navigations are tracked without extra setup.

Nuxt.js

nuxt.config.ts (recommended)

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://analytics.gitopen.dev/tracker.js?v=1.0.8",
          "data-site-key": "YOUR_SITE_KEY",
          "data-endpoint": "https://analytics.gitopen.dev/api/events",
          async: true,
        },
      ],
    },
  },
});

SvelteKit

<!-- src/routes/+layout.svelte -->
<svelte:head>
  <script async src="https://analytics.gitopen.dev/tracker.js?v=1.0.8" data-site-key="YOUR_SITE_KEY" data-endpoint="https://analytics.gitopen.dev/api/events"></script>
</svelte:head>

<slot />

Astro

---
// src/layouts/Layout.astro
---
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <slot name="head" />
    <script async src="https://analytics.gitopen.dev/tracker.js?v=1.0.8" data-site-key="YOUR_SITE_KEY" data-endpoint="https://analytics.gitopen.dev/api/events"></script>
  </head>
  <body>
    <slot />
  </body>
</html>

WordPress

Option A — Theme functions.php (recommended for developers)

// functions.php
function open_analytics_script() {
    echo '<script async src="https://analytics.gitopen.dev/tracker.js?v=1.0.8" data-site-key="YOUR_SITE_KEY" data-endpoint="https://analytics.gitopen.dev/api/events"></script>';
}
add_action("wp_head", "open_analytics_script");

Option B — WordPress Admin (no coding)

Go to Appearance → Theme Editor → header.php and paste the script tag just before </head>. Alternatively, install a plugin like Insert Headers and Footers and paste it in the Header section.

Webflow

Open your Webflow project and click Project Settings (gear icon).
Navigate to the Custom Code tab.
Paste the script tag in the Head Code field.
Click Save Changes and republish your site.

<script
  async
  src="https://analytics.gitopen.dev/tracker.js?v=1.0.8"
  data-site-key="YOUR_SITE_KEY"
  data-endpoint="https://analytics.gitopen.dev/api/events"
  data-use-cookies="false"
></script>

Shopify

From your Shopify admin, go to Online Store → Themes.
Click Actions → Edit code next to your active theme.
In the Layout folder, open theme.liquid.
Paste the script tag just before </head>.

<script
  async
  src="https://analytics.gitopen.dev/tracker.js?v=1.0.8"
  data-site-key="YOUR_SITE_KEY"
  data-endpoint="https://analytics.gitopen.dev/api/events"
  data-use-cookies="false"
></script>

Tip

This tracks across all storefront pages including product pages, collection pages, and the cart. It does not track inside Shopify admin itself.