Skip to main content

Integrating Consent Manager with Gatsby

This guide demonstrates how to effectively integrate the Consent Manager into a Gatsby project, ensuring GDPR compliance and a smooth user experience.

Example

A tested implementation is available in our example repository.

Installation

Begin by installing @consent-manager/core, its default interface, and use-persistent-state:

npm install @consent-manager/core @consent-manager/interface-default use-persisted-state

Step 1: Create Configuration File

Create a consent-manager.js file in your project. This file configures and exports the ConsentManagerWrapper component:

import React from 'react';
import { ConsentManagerDefaultInterface } from '@consent-manager/interface-default';
import '@consent-manager/interface-default/dist/default.min.css';
import createPersistedState from 'use-persisted-state';

const useConsentStateStore = createPersistedState('consent-manager');

const config = {
// ... your configuration options ...
};

export const ConsentManagerWrapper = ({ children }) => {
const storage = useConsentStateStore();

return (
<ConsentManagerDefaultInterface store={storage} config={config}>
{children}
</ConsentManagerDefaultInterface>
);
};

This configuration file sets up the core elements of the Consent Manager, including storage and customization options.

Step 2: Wrap Your Gatsby Application

In Gatsby, you can wrap your application with the ConsentManagerWrapper in two specific files: gatsby-browser.js and gatsby-ssr.js.

gatsby-browser.js

import React from 'react';
import { ConsentManagerWrapper } from './src/consent-manager';

export const wrapRootElement = ({ element }) => (
<ConsentManagerWrapper>{element}</ConsentManagerWrapper>
);

This file ensures that the Consent Manager wraps around your application during client-side rendering.

gatsby-ssr.js

import React from 'react';
import { ConsentManagerWrapper } from './src/consent-manager';

export const wrapRootElement = ({ element }) => (
<ConsentManagerWrapper>{element}</ConsentManagerWrapper>
);

Similarly, gatsby-ssr.js wraps your application during server-side rendering, maintaining consistency across both rendering methods.