# Cookies, Analytics & Custom Scripts

## 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 (a privacy-friendly analytics tool, a tag manager, a site verification tag, and so on):

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

The theme ships with an empty `<script></script>` there. Replace it or leave it.

### The Cookie Banner
Consultiz ships a cookie banner (bottom left) with **Accept all**, **Reject all**, and **Customize**. Visitors can choose three categories: **Necessary** (always on), **Analytics**, and **Marketing**. Rejecting is as easy as accepting: both buttons have the same size and style. The choice is saved in the visitor's browser.

```toml
[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 privacy policy are in `src/content/sections/english/cookie-consent.md` (and `french/`):

```yaml
title: "We use cookies"
description: "Necessary cookies keep this site working. ..."
link:
  enable: true
  label: "Privacy policy"
  url: "/privacy-policy/"
acceptLabel: "Accept all"
rejectLabel: "Reject all"
customizeLabel: "Customize"
categories:
  - id: "necessary"     # necessary | analytics | marketing
    title: "Necessary"
    description: "Security, form protection, and your language choice."
```

Keep the three `id` values as they are; change the titles and descriptions to match the cookies your site really uses.

### 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:

<Steps>

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

</Steps>

```toml
[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"`.
- If a visitor withdraws consent, the change applies from the next page load.

<Aside type="caution">
  Scripts marked `type="text/plain"` **never run** when the banner is off. If
  you turn the banner off, change them back to plain `<script>` tags.
</Aside>

<Aside type="tip" title="Do you need the banner?">
  Privacy-friendly analytics tools that don't use cookies may not require a
  consent banner in many regions. If that's all you use, you can set
  `enable = false` and add the script normally. Check the rules that apply to
  your business.
</Aside>

### Reopen The Preferences
Any link with `href="#cookie-settings"` (or the `data-cookie-settings` attribute) reopens the preferences. Every footer has one:

- the **Cookie Settings** link in `footerLegal` (`src/config/menu.en.json`), in the standard and corporate footers
- the **Cookie settings** item in `bottomLinks` of `src/content/sections/english/footer-newsletter-grid.md`, in the homepage footer

```yaml
bottomLinks:
  - { label: "Cookie settings", url: "#cookie-settings" }
```

Both hide themselves while the banner is off, so you don't need to remove them.

### Update Your Privacy Policy
The banner links to `/privacy-policy/`. Its text is in `src/content/pages/english/privacy-policy.md` (`legalPage.sections`). Describe the cookies and tools you actually use, and have the page reviewed for your business.

### 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:

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