Getting Started

One script tag. No cookies. No consent banners. You'll have privacy-friendly analytics on your site in under 60 seconds.

1. Create an account

2. Add your website

After signing up you'll land on the onboarding page. Enter your domain (e.g. example.com) and LiteStats will generate a unique tracking snippet for you.

3. Install the tracking script

Copy the snippet and paste it into the <head> section of your website:

<script
  async
  src="https://litestats.io/track.js"
  data-site="YOUR_SITE_ID"
  crossorigin="anonymous"
></script>

That's it — one line. The script is under 1 KB, loads asynchronously, and will not affect your page speed.

4. Verify it's working

Simply open your website in a browser after adding the script. LiteStats will automatically detect the first pageview and verify your site — no manual step needed.

You can also confirm data is flowing by opening DevTools → Network and looking for a request to litestats.io/api/collect. A 204 response means everything is working.

5. View your dashboard

Navigate to your overview to see all your sites at a glance, or click into any site to view the full analytics dashboard.

Framework-specific guides

The tracking script works with any website. Here are quick tips for popular frameworks:

Next.js (App Router)

Use the Script component from next/script in your root layout.tsx:

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script
        src="https://litestats.io/track.js"
        data-site="YOUR_SITE_ID"
        strategy="afterInteractive"
      />
    </html>
  );
}

WordPress

Go to Appearance → Theme Editor → header.php (or use a plugin like "Insert Headers and Footers") and paste the script tag before the closing </head> tag.

Shopify

Go to Online Store → Themes → Edit Code → theme.liquid and paste the script inside the <head> section.

Static HTML

Simply paste the <script> tag into the <head> of every HTML page, or in a shared header include.

Gatsby

Add the script to your gatsby-ssr.js (or gatsby-ssr.tsx) file using the onRenderBody API:

// gatsby-ssr.js
export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="litestats"
      async
      src="https://litestats.io/track.js"
      data-site="YOUR_SITE_ID"
      crossOrigin="anonymous"
    />,
  ]);
};

Astro

Add the script to your base layout (e.g. src/layouts/Layout.astro) inside the <head>:

<!-- src/layouts/Layout.astro -->
<head>
  <script
    is:inline
    async
    src="https://litestats.io/track.js"
    data-site="YOUR_SITE_ID"
    crossorigin="anonymous"
  ></script>
</head>

Hugo

Add the script to your layouts/partials/head.html (or your theme's equivalent head partial):

<!-- layouts/partials/head.html -->
<script
  async
  src="https://litestats.io/track.js"
  data-site="YOUR_SITE_ID"
  crossorigin="anonymous"
></script>

Need help? Email us at support@litestats.io and we'll get you set up.