Hugo

Get Your Tracking Script

First, you'll need your OnyxMetric tracking script. You can find this in your OnyxMetric dashboard under Site Settings > Tracking Code. It will look something like this:

<script defer src="https://app.onyxmetric.com/api/script.js" data-site-id="YOUR_SITE_ID"></script>

Replace YOUR_SITE_ID with your actual Site ID from your OnyxMetric dashboard.

Create a Partial Template

In your Hugo project, navigate to the layouts/partials/ directory. If it doesn't exist, create it.

Inside layouts/partials/, create a new file named onyxmetric-analytics.html (or a similar name).

Paste your OnyxMetric tracking script into this new file:

{{/* layouts/partials/onyxmetric-analytics.html */}}
{{ if not hugo.IsServer }} {{/* Only include in production builds */}}
  <script defer src="https://app.onyxmetric.com/api/script.js" data-site-id="YOUR_SITE_ID"></script>
{{ end }}

Explanation:

• {{ if not hugo.IsServer }}: This Hugo condition ensures that the tracking script is only included when you build your site for production (hugo) and not during local development (hugo server). This prevents tracking your own local page views.
• Replace https://app.onyxmetric.com and YOUR_SITE_ID with your actual details.

Include the Partial in Your Footer

Now, you need to include this partial in your site's main footer template. This is typically located in layouts/_default/baseof.html or a theme-specific footer partial (e.g., layouts/partials/footer.html or themes/your-theme/layouts/partials/footer.html).

Open your main base template or footer partial file. Just before the closing </body> tag, add the following line to include your OnyxMetric Analytics partial:

{{/* ... other footer content ... */}}

{{ partial "onyxmetric-analytics.html" . }}

</body>
</html>

If you named your partial differently, make sure to use that name (e.g., {{ partial "my-analytics-script.html" . }}).

Update onyxmetric-analytics.html

Modify layouts/partials/onyxmetric-analytics.html to use a site parameter:

{{/* layouts/partials/onyxmetric-analytics.html */}}
{{ if and (not hugo.IsServer) .Site.Params.onyxmetricSiteID }}
  <script defer src="{{ .Site.Params.onyxmetricInstanceURL | default "https://app.onyxmetric.com" }}/api/script.js" data-site-id="{{ .Site.Params.onyxmetricSiteID }}"></script>
{{ end }}

Add parameters to config.toml

Open your Hugo configuration file (e.g., config.toml) and add:

[params]
  onyxmetricInstanceURL = "https://app.onyxmetric.com" # Your OnyxMetric instance URL
  onyxmetricSiteID = "YOUR_SITE_ID" # Your OnyxMetric Site ID

This approach keeps your specific IDs out of the templates and makes it easier to manage for different environments if needed.

Build your Hugo site

Rebuild your Hugo site:

hugo

Deploy

Deploy the generated public/ directory to your web server.

Verify Integration

• Open your live Hugo website in a browser.
• Navigate through a few pages.
• Check your OnyxMetric dashboard for incoming data. It might take a few minutes for the first events to appear.