Hark.
← Install guides

Add Hark to a Phoenix app

Hark is built with Phoenix LiveView itself. Add the script to your root layout; live navigation between pages is counted with no hooks.

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

  1. 1

    Add it to your root layout

    In the <head> of root.html.heex, next to your app.js tag.

    lib/my_app_web/components/layouts/root.html.heex

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

    Deploy, then visit your app

    Hark ignores localhost, so it won't count your development server. Your site's settings page in Hark shows "Receiving events" when the first pageview arrives.

LiveView navigation

push_navigate, push_patch and <.link navigate> or patch add a history entry, so each new path is a pageview. Navigation with replace: true, or a patch that only changes the query string, isn't counted again.

Content Security Policy

If you set a content-security-policy header, allow harkstats.com in script-src (to load the script) and connect-src (to send events).

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