Installing the tag

Add the Analytics tag to plain HTML, Next.js, React, WordPress or Tag Manager, track custom events, and check your install.

Every site has its own tag. Find yours under the site's Settings, Install in the dashboard, or on the waiting screen right after you add the site.

The tag#

<script async src="https://api.hep.gg/v1/hp/p.js" data-site="YOUR_SITE_ID"></script>

Put it in the <head> of every page. It is a few kilobytes, loads async so it never holds up your page, and if our servers are ever slow or unreachable your site carries on exactly as before. Visits that could not be sent are kept in the visitor's browser for up to a day and sent with their next page view.

Frameworks#

import Script from "next/script"
 
// app/layout.tsx, inside <body>
<Script src="https://api.hep.gg/v1/hp/p.js" data-site="YOUR_SITE_ID" strategy="afterInteractive" />

<!-- index.html, inside <head> -->
<script async src="https://api.hep.gg/v1/hp/p.js" data-site="YOUR_SITE_ID"></script>

<?php
// functions.php of your theme, or a code snippets plugin
add_action('wp_head', function () {
  echo '<script async src="https://api.hep.gg/v1/hp/p.js" data-site="YOUR_SITE_ID"></script>';
});

With Google Tag Manager, add a Custom HTML tag containing the plain HTML tag and trigger it on All Pages.

Single-page apps#

Page changes made with the History API (React Router, Next.js, Vue Router and similar) are counted automatically, and so are pages restored from the browser's back-forward cache. If your app routes with the # part of the address, add data-hash to the tag:

<script async src="https://api.hep.gg/v1/hp/p.js" data-site="YOUR_SITE_ID" data-hash></script>

Custom events (Prime)#

Count things that are not page views, like a signup, a download or a purchase:

window.hepgg && window.hepgg("signup", { plan: "pro" })

The name can be up to 64 characters and you can attach up to 10 properties with short text, number or true/false values. Each site keeps up to 50 different event names. If you might call it before the tag has loaded, add this line before the tag and calls are queued until it is ready:

<script>window.hepgg=window.hepgg||function(){(window.hepgg.q=window.hepgg.q||[]).push(arguments)}</script>

Other addresses for the same site#

Visits are accepted from your domain and its www address. If the same site is also served somewhere else, such as a staging address or a second domain, add it under Settings, General, Allowed hostnames (a *.example.com entry covers every subdomain). Visits from addresses you have not listed are ignored, so nobody can send fake traffic to your stats from another site.

Checking the install#

• Check my install (on the waiting screen) loads your home page and tells you whether the tag is there and has the right site id. A site that renders in the browser may only show the tag once its JavaScript runs, so opening the site yourself is the real test.
• Visits from localhost and from automated browsers are never counted.
• An ad blocker in your own browser may block the tag. Try a private window.

Leaving out your own visits#

Run this once in your browser's console on your site:

localStorage.hepgg_ignore = "1"

Remove it with localStorage.removeItem("hepgg_ignore").