Hugo

Get Your Tracking Script

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

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

Replace YOUR_SITE_ID with your actual Site ID from your AddonPulse 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 addonpulse-analytics.html (or a similar name).

Paste your AddonPulse tracking script into this new file:

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

Explanation:

• {{ if not .Site.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.addonpulse.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 AddonPulse Analytics partial:

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

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

</body>
</html>

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

Update addonpulse-analytics.html

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

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

Add parameters to config.toml

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

[params]
  addonpulseInstanceURL = "https://app.addonpulse.com" # Your AddonPulse instance URL
  addonpulseSiteID = "YOUR_SITE_ID" # Your AddonPulse 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 AddonPulse dashboard for incoming data. It might take a few minutes for the first events to appear.