# Hugo > Add cookieless product analytics to your Hugo static site import { Steps, Step } from "@/components/docs"; import { Callout } from "@/components/docs"; import { CodeBlock } from "@/components/docs"; import { Card, Cards } from "@/components/docs"; Add Databuddy's cookieless product analytics to your Hugo static site by adding the tracking script to your site's templates. The best way to do this is by creating a partial template for the script and including it in your site's footer. ## How to Add Databuddy to Hugo Get your Databuddy tracking script from your [Databuddy dashboard](https://app.databuddy.cc). It will look like this: `} /> Replace `YOUR_CLIENT_ID` with your actual Client ID from your Databuddy dashboard. 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 `databuddy-analytics.html`. Paste your Databuddy tracking script into this new file: {{ 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 `YOUR_CLIENT_ID` with your actual Client ID. 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 `` tag, add the following line to include your Databuddy Analytics partial: {{ .Site.Title }} {{ block "main" . }}{{ end }} {{/* Other footer content */}} {{ partial "databuddy-analytics.html" . }} `} /> If you named your partial differently, make sure to use that name (e.g., `{{ partial "my-analytics-script.html" . }}`). ## Configure `config.toml` (Recommended) To make your Client ID configurable, you can use Hugo's site parameters. Modify `layouts/partials/databuddy-analytics.html` to use a site parameter: {{ end }}`} /> Open your Hugo configuration file (e.g., `config.toml`) and add: This approach keeps your Client ID out of the templates and makes it easier to manage for different environments if needed. ## Configuration Options Enable additional tracking features by modifying the partial: {{ end }}`} /> ## Custom Event Tracking Track custom events in your Hugo content using data attributes or inline JavaScript. ### Using Data Attributes Enable automatic tracking with data attributes: View Pricing `} /> ### Inline JavaScript Add custom tracking to specific pages or posts: document.addEventListener('DOMContentLoaded', function() { var button = document.getElementById('special-button'); if (button && window.databuddy) { button.addEventListener('click', function() { window.databuddy.track('button_click', { button_id: 'special-button', page_path: window.location.pathname }); }); } }); `} /> ### In Hugo Posts Add tracking to specific blog posts using front matter and shortcodes: }}`} /> Create a shortcode for tracking: if (window.databuddy) { window.databuddy.track('{{ .Get "event" }}', { {{- range $key, $value := .Params }} {{- if ne $key "event" }} '{{ $key }}': '{{ $value }}', {{- end }} {{- end }} page_path: window.location.pathname, page_title: document.title }); } {{ end }}`} /> ## Related Integrations Jekyll integration with include files and GitHub Pages. Plugin or manual setup for WordPress sites. TypeScript support with React hooks and components. Need help with your Hugo integration? Contact us at [support@databuddy.cc](mailto:support@databuddy.cc).