Skip to main content

Quick Start Guide

Welcome to the Quick Start Guide for Consent Manager. This guide will help you swiftly integrate Consent Manager into your React project, aligning with GDPR requirements while enhancing user privacy.

Let's dive in to understand how to install Consent Manager, set it up in your app, integrate a third-party service like Matomo, and track events efficiently.

Installation Instructions​

To start, you need to install Consent Manager along with its default interface. Run the following command in your project directory:

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

Create a file named consent-manager.js in your project. This file will configure and export the ConsentManagerWrapper component. Add the following code to this file:

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'

// We store our consent information in localStorage
const useConsentStateStore = createPersistedState('consent-manager')

// Add your configuration here if necessary
const config = {
  // ... your configuration options ...
}

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

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

In your main index.js (or layout.js, depending on your project structure), import and use the ConsentManagerWrapper to wrap your application:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { ConsentManagerWrapper } from './consent-manager'

ReactDOM.render(
  <ConsentManagerWrapper>
    <App />
  </ConsentManagerWrapper>,
  document.getElementById('root')
)

Your application now includes Consent Manager, displaying the shield 🛡️ icon at the bottom left. Next, let's incorporate some integrations into your page, enabling users to provide their consent.

Integrating Matomo for Tracking Page Views and Events​

Matomo is a robust, open-source alternative to SAAS tracking solutions, offering full data control and GDPR-friendly implementation.

Installing Matomo Integration​

First, add the Matomo integration to your project:

npm install @consent-manager/integration-matomo

Update consent-manager.js to include Matomo in the integrations:

// Add this to your consent-manager.js imports
import { matomoIntegration } from '@consent-manager/integration-matomo'

// Update your configuration
const consentManagerConfig = {
  integrations: [
    matomoIntegration({
      matomoURL: 'https://statistics.yourdomain.com/',
      siteID: 'YOUR_SITE_ID',
    }),
  ],
}

// Include in ConsentManagerDefaultInterface
;<ConsentManagerDefaultInterface config={consentManagerConfig} store={storage}>
  {children}
</ConsentManagerDefaultInterface>

Note: For React Router or similar setups, see our client-side routing documentation to ensure proper page view tracking.

Tracking Events with Matomo​

All integrations, including Matomo, follow a similar interface for event tracking:

import { getMatomoTracker } from '@consent-manager/integration-matomo'

const SomeComponent = () => {
  const { trackEvent } = getMatomoTracker()

  const onTrack = useCallback(() => {
    trackEvent('Example', 'Button', 'Pressed')
  }, [trackEvent])

  return <button onClick={onTrack}>Track Event</button>
}

Learn more about Matomo integration.

Integrating Iframe Services like YouTube​

For embedding services like YouTube, obtain user consent before loading iframes that may share data with third-party services.

Installing YouTube Integration​

First, integrate YouTube into your project. Note that in this demo we're using react-youtube for rendering, but it's not a mandatory requirement!

npm install @consent-manager/integration-youtube react-youtube

Configuring YouTube Integration​

Add YouTube to your integrations in consent-manager.js:

// Import YouTube integration
import { youtubeIntegration } from '@consent-manager/integration-youtube'

// Update your consent manager configuration
const consentManagerConfig = {
  integrations: [
    // ... other integrations
    youtubeIntegration(),
  ],
}

// The rest of the file remains unchanged

Use the PrivacyShield component to wrap YouTube embeds:

import React from 'react'
import ReactYouTube from 'react-youtube'
import { PrivacyShield } from '@consent-manager/core'

const YouTube = ({ id, ...props }) => {
  return (
    <PrivacyShield id="youtube">
      <ReactYouTube videoid={id} {...props} />
    </PrivacyShield>
  )
}

export default YouTube

Explore more about YouTube integration.

Fin​

You now have the fundamental knowledge to integrate Consent Manager into your React application. For more detailed guides, please refer to the sidebar on the left.

Further guides​