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.