Hark.
← Install guides

Add Hark to an Astro site

Add the script to the layout every page uses, with is:inline so Astro leaves it exactly as written instead of bundling it.

The code below is for example.com. Replace it with your site's domain.

  1. 1

    Add it to your layout's <head>

    Usually src/layouts/Layout.astro, or whichever layout wraps every page. If different pages use different layouts, add it to each.

    src/layouts/Layout.astro

    <html lang="en">
  <head>
    <!-- your existing tags -->
    <script is:inline defer data-domain="example.com" src="https://harkstats.com/js/script.js"></script>
  </head>
  <body>
    <slot />
  </body>
</html>
  2. 2

    Build, deploy, then visit your site

    Hark ignores localhost, so check the deployed site. Your site's settings page in Hark shows "Receiving events" when the first pageview arrives.

View transitions

With <ClientRouter />, navigations change the page through the browser's history, and Hark counts each one. Keep the snippet identical on every page so it carries across.

Not seeing visits?

  • Your site's settings page in Hark says "Receiving events" once the first pageview arrives. It updates by itself, so keep it open while you visit your site.
  • data-domain must be the domain you added to Hark, without https:// or www.
  • Visits from localhost aren't counted. Add a data-local attribute to the tag to test on your machine.
  • Check your published page's source for the tag: caching plugins and CDNs can serve an old copy.
  • Some ad blockers block analytics scripts, including this one; try another browser to rule that out.
  • To leave your own visits out, run localStorage.analytics_ignore = "true" in your browser's console on your site.

No site yet? The trial is free, with no card.

Start your free trial