Cookie Consent

Yore integrates vanilla-cookieconsent for GDPR-compliant cookie management. Built-in categories are necessary, functional, analytics, and advertising.

Configuration

Set enable: true and list the categories you want to expose to visitors.

params:
  cookieConsent:
    enable: true
    categories:
      - necessary
      - functional
      - analytics
      - advertising

Preferences Button

The cookie-settings shortcode renders a button that opens the preferences modal.

{{< cookie-settings >}}
{{< cookie-settings title="Cookie Settings" >}}

Manage preferences Cookie Settings

Examples

Once your categories are configured, you need to put your scripts under consent management. There are two ways to do this:

1. Script Management: manage inline scripts.
2. Event listeners: listen for consent events to run or tear down code programmatically.

These examples are simplified from How to manage scripts.

Scripts Management

Add type="text/plain" and data-category to any <script> tag to gate its execution behind consent.

Before:

<!-- Google tag, always executed -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'TAG_ID');
</script>

After:

<script
  type="text/plain"
  data-category="analytics"
  data-src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"
></script>
<script type="text/plain" data-category="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'TAG_ID');
</script>

Execute code on consent

Use event listeners when you need more control. cc:onConsent fires on every page load once consent has been given. cc:onChange fires when the user updates their preferences after consent was already expressed.

window.addEventListener('cc:onConsent', () => {
  if (window.CookieConsent.acceptedCategory('analytics')) {
    // initialize analytics
  }
});

See Callbacks and Events for all available events.

Advanced

Category creation falls into three types: a simple category defined in configuration, a category registered with detailed control using Yore's addCategory API, or a full JS override for complete control.

hugo.yaml determines which categories are enabled and in what order; the JSON translation files define the display text. Both are required. JS configuration files are optional and intended for advanced use.

Create a Simple Category

To create a new category called foo, follow these steps:

1. Append foo to the categories field in hugo.yaml.

   hugo.yaml

   params:
     cookieConsent:
       enable: true
       categories:
         - necessary
         - functional
         - analytics
         - foo

2. Override the theme's assets/cookies/translations/[LANG].json and add a new entry to the sections array.

   assets/cookies/translations/[LANG].json

   {
     // ...
     "preferencesModal": {
       "sections": [
         // new "foo" category
         {
           "title": "Category Foo",
           "description": "A custom category. Provides a minimal entry point for adding categories beyond the defaults.",
           "linkedCategory": "foo"
         }
       ]
     }
     // ...
   }

3. Use the category in your JS, for example:

   if (window.CookieConsent.acceptedCategory('foo')) {
     // ...
   }

   Or use an inline script:

   <script type="text/plain" data-category="foo">
     // ...
   </script>

API

This API is provided by Yore for advanced control. You still need to set up hugo.yaml and [LANG].json to create a new category.

addCategory

vanilla-cookieconsent's CookieConsent.run() accepts a single config object. addCategory is a helper provided by Yore that registers a category and its corresponding preferences modal section into that config object before CookieConsent.run() is called.

Example: Register a custom category

export default function ({ addCategory }) {
  addCategory({
    name: 'analytics',

    categoryConfig: {
      autoClear: {
        cookies: [
          { name: /^_ga/ },  // matches _ga, _ga_XXXXXXX, etc.
          { name: '_gid' },
        ],
      },
    },

    section: {
      title: 'Analytics Cookies',
      description: 'Help us understand how visitors interact with the site. All data is anonymous.',
    },
  });
}