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

To add a custom category, append its name to categories and override assets/cookie-translations/[LANG].json to provide the corresponding i18n fields.

Preferences Button

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

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

Manage preferences Cookie Settings

Examples

Scripts Management

Add type="text/plain" and data-category to any <script> tag to gate its execution behind consent. The browser skips scripts with type="text/plain", so the script stays inert until the visitor accepts the specified category. Once accepted, vanilla-cookieconsent restores the original type and runs the script.

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

See How to manage scripts for all available script attributes.

Execute code on consent

Use event listeners when you need more control than script attributes allow, such as tearing down a service when the user withdraws consent.

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
  }
});

window.addEventListener('cc:onChange', ({ detail }) => {
  if (detail.changedCategories.includes('analytics')) {
    if (window.CookieConsent.acceptedCategory('analytics')) {
      // re-enabled
    } else {
      // disabled
    }
  }
});

See the vanilla-cookieconsent event reference for all available events.

Advanced

API

Yore detects assets/js/cookie-consent-config.js and calls the exported function before CookieConsent.run(). Use this file to register additional categories without replacing the theme's full cookie consent setup.

export default function ({ addCategory }) {
  // register additional categories here
}

addCategory

Registers a consent category with vanilla-cookieconsent.

Example: Register a custom category

export default function ({ addCategory }) {
  addCategory(
    'advertising',
    {
      autoClear: {
        cookies: [{ name: /^(_fbp|_gcl)/ }],
      },
    },
    {
      title: 'Advertising',
      description: 'Cookies used to deliver personalized ads.',
    },
  );
}

Override Template

Create assets/js/cookie-consent.js in your project to override the theme's file entirely and call CookieConsent.run() directly. Refer to the vanilla-cookieconsent documentation for the full API.