How to Add Cookie-Free Analytics to Any Website in 5 Minutes

Why You Need Analytics at All

If you run a website, you need a reliable answer to a few simple questions: which pages get attention, where visitors come from, and whether new content or launches actually create momentum. Without analytics, every change becomes guesswork. You publish a post, ship a feature, or share a link on social media, then hope something happened.

The problem is that traditional analytics stacks often create more friction than insight. They are heavy, overbuilt, and tied to cookie consent flows that suppress a big portion of your traffic. For a personal site, SaaS landing page, documentation portal, or indie product, you usually do not need attribution modeling and advertising integrations. You need a fast answer to "what are people actually doing on my site?".

What Makes Google Analytics a Poor Fit for Many Sites

Google Analytics is powerful, but it is also optimized for Google's ecosystem and enterprise-style event complexity. That means more configuration, bigger scripts, and privacy trade-offs that many small teams never wanted in the first place. In practice, that often turns into a consent banner, lower data coverage, and a dashboard that takes too much effort to interpret.

A cookie-free setup is usually a better fit when your goal is product decisions, content decisions, and simple traffic measurement. You get pageviews, referrers, countries, browsers, and device trends without identifying people. That keeps the implementation light and the compliance story much cleaner. If you are comparing options, the trade-offs are clearer on Beam's Google Analytics alternative page and Plausible comparison page.

Step 1: Sign Up and Create Your Site

Start by creating a free account at Beam signup. Once you are in the dashboard, add the domain you want to track. Beam will generate a site ID and show you the exact tracking snippet for that site.

This step takes less than a minute. There is no SDK to install, no npm package to version, and no dashboard wizard to click through for half an hour. The product is built around a single script tag because that is what most sites actually need.

Step 2: Copy the Tracking Snippet

Every Beam site gets a snippet like this. Replace YOUR_SITE_ID with the real value from your dashboard:

<script
  defer
  src="https://beam.keylightdigital.dev/js/beam.js"
  data-site-id="YOUR_SITE_ID">
</script>

Put it in the global layout or the shared HTML head for your site. The script sends lightweight pageview beacons to Beam. It does not set cookies, it respects Do Not Track, and it keeps the payload intentionally small.

Step 3: Install It on Your Stack

The exact placement depends on your framework, but the integration pattern is the same: include the script once in the document head so it loads on every page.

Plain HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Site</title>
    <script
      defer
      src="https://beam.keylightdigital.dev/js/beam.js"
      data-site-id="YOUR_SITE_ID">
    </script>
  </head>
  <body>...</body>
</html>

React

import { useEffect } from 'react'

export function AppShell() {
  useEffect(() => {
    const script = document.createElement('script')
    script.defer = true
    script.src = 'https://beam.keylightdigital.dev/js/beam.js'
    script.dataset.siteId = 'YOUR_SITE_ID'
    document.head.appendChild(script)

    return () => {
      script.remove()
    }
  }, [])

  return <App />
}

Next.js

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://beam.keylightdigital.dev/js/beam.js"
          strategy="afterInteractive"
          data-site-id="YOUR_SITE_ID"
        />
      </body>
    </html>
  )
}

WordPress

function beam_analytics_script() {
  ?>
  <script
    defer
    src="https://beam.keylightdigital.dev/js/beam.js"
    data-site-id="YOUR_SITE_ID">
  </script>
  <?php
}
add_action('wp_head', 'beam_analytics_script');

Static Site Generators

<!-- Hugo, Eleventy, Astro, Jekyll, etc. -->
<!-- Add this to your shared head partial or base layout -->
<script
  defer
  src="https://beam.keylightdigital.dev/js/beam.js"
  data-site-id="YOUR_SITE_ID">
</script>

Step 4: Verify That Data Is Arriving

After you install the script, open your site in a new tab and load a few pages. Then return to Beam and open your site analytics view. You should see pageviews appear quickly, along with top pages, referrers, countries, browsers, and device breakdowns.

If nothing appears, the usual causes are straightforward: the snippet is missing from the rendered page, the data-site-id is wrong, or the script is only included on one template instead of the shared layout. A quick browser source check usually catches the problem in under a minute.

What You Get Once It Is Live

The immediate value is clarity. You can see whether your launch post is working, which docs page attracts attention, which referrers actually send traffic, and whether your free-to-paid funnel is improving over time. You do not need a warehouse project to get that signal. For most teams, a focused dashboard is a better operational tool than a sprawling analytics suite.

Beam's free tier covers one site and up to 50,000 pageviews per month, which is enough for many small products, blogs, and portfolios. If you outgrow that, Pro is $5 per month. That keeps the tool accessible for developers who care about privacy but do not want to self-host or justify a much higher SaaS bill.

Install analytics without cookies

Create your site, copy one snippet, and verify your first pageview in a few minutes.

Start with Beam Compare alternatives