HomeEngagementContentDiscoveryOther Resources

## Introduction

### Goal

Implement cookie consent in a Bloomreach SPA SDK-based frontend application.

### Background

Several Bloomreach Commerce Experience Cloud features, including the [Discovery Pixel](🔗) and [Content Personalization](🔗), use cookies to store information about users. In many jurisdictions, this requires explicit consent from the user.

It is up to the frontend development team to implement cookie consent in their application. This page provides an example implementation for React frontends using the popular [Osano Cookie Consent](🔗) Javascript library.

**Tip:**

A slightly different implementation using the [react-cookie-consent](🔗) library can be found in the [Reference SPA](🔗).

## Implementation

### Add the Osano Cookie Consent Library

Install the [cookieconsent](🔗) library in your application:


Add the Osano Cookie Consent CSS and Javascript to `public/index.html` (just before the closing `</head>` element):

### Create a Cookie Consent Utility Library
Create a cookie consent utility library in `src/utils/cookieconsent.ts`:

Notes:
  • Use the [Osana Cookie Consent configuration wizard](🔗) to create your own custom configuration for the cookie consent popup. See the [Osano Cookie Consent Javascript API](🔗) for advanced options.
  • You can add any code that depends on cookie consent and should run on the cookie consent library's initialization to the `onInitialise` callback hook. From the [Osano Cookie Consent Javascript API](🔗):
    • _"This is called on start up, with the current chosen compliance. It can be used to tell you if the user has already consented or not as soon as you initialise the tool."_
  • You can add any code that depends on cookie consent and should run when the cookie consent status changes to the `onStatusChange` callback hook. From the [Osano Cookie Consent Javascript API](🔗):
    • _"This is called any time the status is changed. This can be used to react to changes that are made to the compliance level. You can use the popup instance functions from within these callbacks too. I.E. ‘this.hasAnswered()’ and ‘this.hasConsented()’."_
  • See the [example implementation](🔗) for details on how [segment-based content personalization](🔗) can integrate cookie consent.
  • You can import `isConsentReceived` elsewhere in your code and use it to conditionally render cookie content dependent components like `BrPixel` (see [below](🔗)).
### Create a CookieConsent Component
Create a `CookieConsent` component in `src/components/CookieConsent.tsx`:

Note:
  • You can add any code that depends on cookie consent and should run each time the page is rendered within the `if (!isPreview && isConsentReceived()) { }` condition inside `CookieConsent`.
In `src/components/index.ts`, add:

### Add the Cookie Consent Popup to Your App
In `src/App.tsx`, add `CookieConsent` to the list of components imported from './components':

Then add the following somewhere within you `<BrPage>` element to render the cookie consent popup:

### Conditional Rendering of Components Depending on Cookie Consent
Optionally, also add to `src/App.tsx`:

Then use `isConsentReceived()` to toggle cookie consent dependent components like `BrPixel`. For example:

## Summary
The example implementation presented on this page provided four ways to handle code that requires cookie consent:
  • Code depending on cookie consent that should run on the cookie consent library's initialization → place in the [cookieconsent utility library](🔗) inside the `onInitialise` callback hook.
  • Code depending on cookie consent that should run when the cookie consent status changes → place in the [cookieconsent utility library](🔗) inside the `onStatusChange` callback hook.
  • Code depending on cookie consent that should run each time a page is rendered → place in the [CookieConsent component](🔗) inside the `if (!isPreview && isConsentReceived()) { }` condition.
  • Frontend components that should only be rendered if cookie consent is accepted → import `isConsentReceived` from the [cookieconsent utility library](🔗) and use as [condition for rendering](🔗).