Frameworks

Hugo

Hugo analytics with Stickybeak starts by adding its script to your rendered pages; this guide shows you where it belongs and how to track page views, goals and purchase revenue. It is a lighter alternative to Google Analytics for Hugo, with live visitors, goals and revenue attribution in one script.

#Add the script

#Add the script

1. #Add your site ID to the config

   [params]
     stickybeakSiteId = "YOUR_SITE_ID"

2. #Add the tag to your head partial

   Create a partial for it:

   {{ with site.Params.stickybeakSiteId }}
     {{ if hugo.IsProduction }}
       <script
         defer
         data-site="{{ . }}"
         data-domain="example.com"
         src="https://app.usestickybeak.com/_cfw/s.js"
       ></script>
     {{ end }}
   {{ end }}

   Hugo 0.146 and later uses layouts/_partials/. On an older Hugo release, create the file in layouts/partials/ instead.

3. #Include it in the head

   Add {{ partial "stickybeak.html" . }} inside <head> in your base template. Current Hugo uses layouts/baseof.html; releases before 0.146 usually use layouts/_default/baseof.html.

4. #Build and deploy

   hugo builds for production by default, so the tag is included; hugo server runs in development, so it isn't.

#Using a theme

Do not edit themes/. Add {{ partial "stickybeak.html" . }} through the theme's custom-head hook, or override its head/base template under your project's layouts/.

#Check it's working

Test the deployed site, then verify your install.

#Track goals

Add data-goal in templates or shortcode HTML. See Custom goals.

<a href="/contact/" data-goal="contact_click" data-goal-from="footer">Get in touch</a>

#Track purchases

After confirming an order in the browser, send:

window.stickybeak?.("purchase", { revenue: 49, currency: "USD", order_id: "ORDER_ID" });

Use real values; see Revenue.

#If it isn't working

Check the production site ID and domain, then see Troubleshooting.