Cookie Consent

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

Configuration

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

categories defines the available consent categories. To create a new category, add NEW_CATEGORY to categories and override assets/cookie-translations/[LANG].json to define 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

Setting type="text/plain" on a script tag prevents it from executing. Adding data-category tells vanilla-cookieconsent to execute it when the user accepts that category.

<!-- 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>

Execute code on consent

cc:onConsent fires on every page load once consent is valid. cc:onChange fires when the user modifies their preferences.

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

Advanced

API

Yore detects assets/js/cookie-consent-config.js and calls the exported function before CookieConsent.run().

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

addCategory

addCategory provide an advanced way to register and manage cookies. It registers a category. For example, you can register set autoClear to clear cookies when the user rejects the cookie category.

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, this is useful when you need full access to vanilla-cookieconsent hooks. Refer to the vanilla-cookieconsent documentation for all available options.