Analytics on a plain HTML site

Installation

1. 1Paste the snippet before </body>

   On every page — if your site has a footer template or include, put it there. Replace YOUR_SITE_KEY with your key.

   <script src="https://cdn.jsdelivr.net/npm/@racoelho/analytics@0.2/dist/index.global.js"></script>
   <script>window.analytics = new Analytics.Analytics({ siteKey: 'YOUR_SITE_KEY' })</script>

   The first line loads the SDK (about 4KB gzipped); the second creates the instance on window.analytics. Pageviews, Web Vitals and JavaScript errors are then sent automatically.

2. 2Double-check the placement

   A full page looks like this. Order matters: the second <script> uses what the first one loaded, so don’t add async or defer to the first.

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8" />
       <title>My site</title>
     </head>
     <body>
       <!-- page content -->
   
       <script src="https://cdn.jsdelivr.net/npm/@racoelho/analytics@0.2/dist/index.global.js"></script>
       <script>window.analytics = new Analytics.Analytics({ siteKey: 'YOUR_SITE_KEY' })</script>
     </body>
   </html>

3. 3Publish

   Upload the files and open your site. There’s nothing else to configure.

Events and goals

Use window.analytics.track(name, properties) for any action. There are ready-made helpers for common cases, such as formSubmit, signup and purchase.

<button id="cta">Get started</button>

<form id="newsletter">…</form>

<script>
  // button click
  document.getElementById('cta').addEventListener('click', function () {
    window.analytics.track('cta_click', { place: 'hero' })
  })

  // form submit (built-in SDK helper)
  document.getElementById('newsletter').addEventListener('submit', function () {
    window.analytics.formSubmit('newsletter', 'Newsletter')
  })
</script>

In the dashboard, create an event goal with the same name (cta_click) to see conversion by source, UTM and country. For thank-you pages, use a path goal (e.g. /thank-you) — no code needed.

Page navigation

On a multi-page site, each page loads the script again and counts its own pageview: nothing to do. If you change the URL without a reload (with history.pushState), call pageview() after the change. Hash routes aren’t told apart: the SDK records the path without the fragment.

// your code changes the URL without a reload…
history.pushState({}, '', '/pricing')
// …then tells the SDK
window.analytics.pageview()

Check that it works

1. Open the published site in a normal window, with no ad blocker.
2. In your browser devtools, Network tab, filter by v1/i: you should see a POST with status 200 within 3 seconds (or when you leave the page).
3. In the dashboard, events show up in about 30 seconds.

Troubleshooting

Analytics is not defined in the console

The second script ran before the first finished loading. Remove async/defer from the SDK tag, or keep both lines together, in that order.

The request returns 403 (origin_not_allowed)

Your domain isn’t in Allowed origins in the site settings. Add the exact origin — with https://, with and without www, plus test addresses like http://localhost:3000 if you want to measure in development.

No request shows up in the Network tab

The SDK honors Do Not Track by default: if your browser sends DNT, nothing is sent. Test in another browser or profile. Ad blockers can also block the script.

Pageviews show up twice

The SDK was initialized twice (for example, pasted in the theme and also added by a plugin). Keep a single instance per page.