Cookies, Analytics & Custom Scripts

Files: src/config/config.toml, src/content/sections/english/cookie-consent.md · Skill level: Beginner (you paste your analytics snippet)

Add Analytics Or Any Script

Everything in [head] content is added to the <head> of every page. Paste the snippet your analytics tool gives you (Plausible, Umami, Fathom, Google Analytics, a verification tag, and so on):

[head]
  content = """
  <script defer src="https://analytics.example.com/script.js" data-site="example.com"></script>
  """

The Cookie Banner

Kivo ships a cookie banner (bottom right) with Accept all, Reject all, and Customize. Visitors can choose three categories: Necessary (always on), Analytics, and Marketing. Their choice is saved in their browser.

[settings.cookieConsent]
  enable   = true   # false removes the banner
  revision = 1      # raise by 1 when your cookie use changes, to ask everyone again

The banner’s text, button labels, categories, and the link to your cookie policy are in src/content/sections/english/cookie-consent.md (and french/).

Make Scripts Wait For Consent

With the banner on, mark each tracking script with the category it belongs to. It then runs only after the visitor accepts that category:

1. Change <script to <script type="text/plain".
2. Add data-consent="analytics" (or "marketing").
3. Keep every other attribute (src, defer, data-...) as it is.

[head]
  content = """
  <script type="text/plain" data-consent="analytics" defer src="https://analytics.example.com/script.js" data-site="example.com"></script>
  """

• Inline scripts work the same way: add the two attributes to the <script> tag.
• To require two categories, list both: data-consent="analytics marketing".
• For a module script, also add data-type="module".

Reopen The Preferences

Any link with href="#cookie-settings" (or the data-cookie-settings attribute) reopens the preferences. The footer’s Cookie settings link in the Legal column does this. If you turn the banner off, set that link’s "enable": false in src/config/menu.en.json and menu.fr.json.

For Developers

• window.cookieConsent.get() returns the saved choice (or null), and window.cookieConsent.open() opens the preferences.
• A consentchange event fires on document after each choice, and on every later page load once a choice is saved:

document.addEventListener("consentchange", (event) => {
  if (event.detail.analytics) {
    // load your analytics
  }
});

Do It With AI

Add my analytics to the site: [PASTE SNIPPET]. Put it in [head] content in src/config/config.toml.
The cookie banner is on, so gate it on the "analytics" category: type="text/plain" and
data-consent="analytics", keeping all other attributes. Update the cookie policy in
src/content/pages/english/cookie-policy.md to mention [TOOL NAME].