Consent Manager
Features
🛡️ React Consent Manager: Manages consent logic and state, including displaying consent-related UI elements.
📊 Google Analytics 4: Tracks and reports website traffic with advanced features like event-based tracking and cross-platform analytics.
🏷️ Google Tag Manager: Manages tracking codes and related code fragments on your website or app from a web-based interface.
💰 Paid Ads Conversion Tracking: - 📉 Facebook Pixel: Tracks advertising effectiveness by understanding user actions on your website. - 📈 Google Ads Conversion Tracking: Tracks actions taken by users after interacting with Google Ads. - 🔗 LinkedIn Insight Tag: Provides campaign reporting and insights about website visitors for LinkedIn ads.
What's Included
< Banner />
The Banner component, based on the @start-base/react-consent-manager library, renders a consent banner with options to accept or decline optional cookies. It includes a settings modal for detailed preferences and uses a custom Switch component for toggling options.
< ConsentProvider />
The ConsentProvider component, also from the @start-base/react-consent-manager library, manages user consent for cookies and services such as necessary, analytics, and marketing cookies. It handles the loading and execution of scripts based on user consent, ensuring compliance with data privacy regulations.
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | null | Your application's components that should respect the user's consent preferences. |
options | object | {} | Defines the services for which consent is managed. Includes details about services like necessary, analytics, and marketing. |
options.services | Array<Service> | [] | An array of service objects, each representing a different category of cookies or tracking scripts. |
options.services[].id | string | '' | A unique identifier for the service. |
options.services[].name | string | '' | The display name of the service. |
options.services[].description | string | '' | A detailed explanation of what the service does and why it is used. |
options.services[].scripts | Array<Script> | [] | An array of script objects that define external scripts or inline code to be executed if consent is given. |
options.services[].scripts[].id | string | '' | A unique identifier for the script. |
options.services[].scripts[].src | string | '' | The URL of the external script to be loaded (optional). |
options.services[].scripts[].code | string | '' | Inline JavaScript code to be executed (optional). |
options.services[].mandatory | boolean | false | A flag indicating whether the service is mandatory (true) or optional (false). Mandatory services cannot be opted out of by the user. |
Set Up Component's Needs
Configure the environment variables to ensure proper functioning of the Consent Management system and related services:
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-your_google_analytics_id
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=your_google_tag_manager_id- Locate or create your
.env.localfile: This file should be in the root directory of your Next.js project. - Copy the example variables provided above into your
.env.localfile and replace the placeholder values with your actual service IDs.
Setting Up Google Analytics 4 Tracking ID
- Log in to your Google Analytics account.
- Navigate to the property settings of the property you want to track and copy the "Measurement ID".
Setting Up Google Tag Manager ID
- Log in to your Google Tag Manager account.
- Select the container you want to use and copy the container ID.