Sanity

Sanity is a headless CMS that provides content management for your applications. Since Sanity is headless, you'll add analytics-tube Analytics to your frontend application rather than to Sanity itself.

Sanity only manages your content - it doesn't serve your website directly. The tracking script goes in your frontend framework (Next.js, Gatsby, Nuxt, etc.).

How to Add analytics-tube with Sanity

Choose the guide that matches your frontend framework:

React-based Frontends

Next.js - Most common choice with Sanity
Gatsby - Popular for static sites
Remix
Vite + React

Vue-based Frontends

Nuxt
Vite + Vue

Other Frontends

Astro - Great for content-heavy sites
SvelteKit

Quick Example: Next.js with Sanity

If you're using Next.js (the most common Sanity frontend), add the tracking script to your root layout:

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://app.analytics.tube/api/script.js"
          data-site-id="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Replace YOUR_SITE_ID with your actual Site ID from your analytics-tube dashboard.

Sanity Studio

If you want to track usage of Sanity Studio itself (your content editing interface), you can add the script to your studio's root:

// sanity.config.ts
import { defineConfig } from 'sanity'

export default defineConfig({
  // ... your config
  document: {
    // Add custom studio plugins if needed
  }
})

However, most users only want to track their public-facing website, not their internal Studio usage.