Manual Installation

Manual installation works on any site where you can edit the HTML: static sites, frameworks like Next.js or Laravel, and most website builders.

Step 1: Copy your tracking code

Open your site in Sonar and copy the snippet from the installation panel. It looks like this:

<script async src="https://sonar-app.co.uk/tracker.js" data-site-key="YOUR_SITE_KEY"></script>

Step 2: Add it to the <head>

Paste the snippet just before the closing </head> tag, on every page you want to track. On most sites, that means a shared layout or header template.

<!doctype html>
<html>
  <head>
    <title>My site</title>
    <script async src="https://sonar-app.co.uk/tracker.js" data-site-key="YOUR_SITE_KEY"></script>
  </head>
  ...

The async attribute means Sonar never blocks your page from loading.

Step 3: Publish and verify

Deploy your changes, visit the site, then reload the Sonar dashboard. You should see your own visit within a minute.

Single-page apps

Sonar tracks client-side route changes automatically. When a single-page app (React Router, Next.js, Vue Router and so on) changes the URL, it's recorded as a new pageview, with the previous page as the referrer. Changes to only the #hash aren't counted.

Content Security Policy

If your site sends a CSP header, allow Sonar's origin in script-src and connect-src.