Hugo

Hugo generates static pages, which is the easiest case for analytics: put the snippet in the template that renders your <head> and every generated page is tracked. No plugins, no build integration.

Install the snippet

This is the line to add, with your own domain:

<script defer data-domain="yoursite.com"
  src="https://clickport.io/tracker.js"></script>

Where to put it depends on your theme:

  • Theme with a head hook. Many themes provide an override partial for exactly this, commonly named extend_head.html, custom-head.html, or similar. Create it under your site's own layouts/partials/ directory (not inside the theme) and paste the snippet there.
  • No hook available. Copy the theme's head partial (or layouts/_default/baseof.html) into your site's layouts/ directory, keeping the same relative path, and add the snippet before </head>. Your copy overrides the theme's version and survives theme updates.

Rebuild and deploy, then check the realtime view for your own visit.

Track production builds only

If you deploy staging builds of your site, wrap the snippet so it only ships in production:

{{ if hugo.IsProduction }}
<script defer data-domain="yoursite.com"
  src="https://clickport.io/tracker.js"></script>
{{ end }}

Local preview needs no guard either way: hugo server runs on localhost, and the tracker ignores localhost by design.

Good to know

  • Static pages mean full page loads, so there is nothing SPA-specific to configure.
  • Outbound links, file downloads, and scroll depth are tracked automatically on every page the snippet reaches.
  • Hugo 404 pages (layouts/404.html) usually carry a "404" title and are picked up by 404 Tracking automatically; add window.cpConfig = { is_404: true } to that template if yours uses a custom title.
  • Exclude yourself before long writing sessions with the live site open. See Exclude Your Visits.

Related