Hark.
← Install guides

Add Hark to a React, Vue or Svelte app

For a single-page app, the script goes in the HTML page that loads your app. Route changes are counted as pageviews.

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

  1. 1

    Vite: add it to index.html

    For React, Vue or Svelte apps built with Vite, add it to the <head> of the index.html at your project's root.

    index.html

    <head>
  <!-- your existing tags -->
  <script defer data-domain="example.com" src="https://harkstats.com/js/script.js"></script>
</head>
  2. 2

    SvelteKit: add it to src/app.html

    SvelteKit's page template is src/app.html.

    src/app.html

    <head>
  %sveltekit.head%
  <script defer data-domain="example.com" src="https://harkstats.com/js/script.js"></script>
</head>
  3. 3

    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.

Hash routing

Routers that use the history API (React Router, Vue Router, SvelteKit) are counted per page. Hash-based routes (/#/about) all count as one page.

Custom events

Call window.analytics from your code:

window.analytics?.("Signup", { props: { plan: "pro" } })

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