This component is one of the most basic implementations of the cookie consent banner.

How It Works

The script differentiates two types of action at the consent banner:

  • accept all types of cookies,
  • decline them.

We place a session cookie when you decline them and ask for permission (again) next time.

If you accept them, we place the category cookie(s). In this case, spruce-demo-cookie-law-analytics. We use this cookie to identify if we should load analytics-related cookies (like Google Analytics). You can set up any category.

To load your tracking codes, use the following snippet:

scss
if (
Cookie.isset('spruce-demo-cookie-law-analytics')
&& Cookie.get('spruce-demo-cookie-law-analytics') === 'accepted'
) {
console.log('ANALYTICS');
}

Technical Details

  • As you see in the example, we also included an opt-out button; this is just a button to turn on or off any cookie type. You usually want to place it on your privacy policy page.
  • We handle everything from JS because, in some cases, the back-end cache can kill the cookies.
  • We reload the page after an opt-in or opt-out action because this is the simplest way to load (or turn off) the related scripts.
  • We insert the consent banner right after the opening body and set a focus on it.

Dependencies

  • cookie.js - We store the settings in cookies, so we use these simple helpers to control them. You can use localStorage too.