Consent Management

Overview

The Storefront Application provides a flexible consent management abstraction that allows you to integrate any Consent Management Platform (CMP) while maintaining a consistent API for checking user consent across your application. This abstraction ensures compliance with privacy regulations like GDPR and CCPA by giving users control over which third-party services can collect and process their data.

The consent management system relies on four main components to function:

1. Consent Manager Plugin: This plugin injects the $consent context into the Nuxt applications. This context serves as a general interface within the application to interact with a CMP.
2. CMP Adapter Plugin: This plugin handles the necessary translation, adapting the API of your chosen CMP to a unified Storefront interface provided by the consent manager plugin.
3. useConsent Composable: Provides a reactive and simplified way to check the consent status for specific vendors.
4. Vendor Mapping Configuration: A centralized file that maps readable, consistent service identifiers (used in the Storefront) to the proprietary service IDs used by the CMP.

When consent management is enabled for a shop, third-party services (such as payment providers or analytics tools) will only be loaded or initialized after the user has given explicit consent. If consent management is disabled for a shop, all services default to opt-in, and consent checks automatically resolve to true.

Google Tag Manager and Consent Mode v2

When using Google Tag Manager (GTM) in your Storefront Application, it is essential to integrate consent checks with Google Consent Mode v2. This is Google's framework for managing user consent across its services and third-party tags managed through GTM.

All GTM tags that collect user data must respect consent status through Google Consent Mode v2. This ensures that:

• Tags only fire when appropriate consent has been given.
• Consent signals are properly communicated to Google services.
• Your implementation remains compliant with privacy regulations.

To integrate consent with GTM, you must:

• Configure your CMP adapter to update Google Consent Mode v2 signals when consent changes.
• Ensure GTM tags are configured to check consent mode before firing.
• Use the useConsent composable to conditionally load or initialize tracking scripts.

For detailed information about Google Consent Mode v2, refer to Google's official documentation.

Configuration

Configuring Consent Vendors

Consent vendors are configured in config/consent-vendor.config.json. This file maps the service IDs used by your CMP to consistent Storefront Vendor Keys used in your application code.

json

Copy

To create a new entry in the config/consent-vendor.config.json , add your vendor identifier as the key and the CMP service ID as the value:

json

Copy

The vendor identifier (the key in the configuration file) should be:

• Descriptive and clearly indicate what service it represents.
• Unique within your configuration.

The CMP service ID (the value) must match the service ID provided by your CMP platform.

Shop Configuration

Consent management can be enabled or disabled per shop using the requiresConsentManagement flag in the shop configuration.

In config/shops.ts, add the requiresConsentManagement property to your shop configuration:

typescript

Copy

Runtime Configuration

To make the requiresConsentManagement flag available on the client-side for dynamic checks, it must be explicitly included in the publicShopData array within nuxt.config.ts.

typescript

Copy

Using the useConsent Composable

The useConsent composable provides a reactive way to check if a user has given consent for a specific third-party service, and also exposes a function to open the consent manager UI.

Basic Usage

You access the consent state by passing the Storefront Vendor Key defined in your mapping file.

typescript

Copy

Example: Conditional Component Rendering

The composable can be used to conditionally render components based on consent status:

vue

Copy

Example: Multi-Vendor Feature Consent

For features that depend on consent from multiple vendors (e.g., an express checkout button), the composable can be used multiple times:

vue

Copy

Opening the Consent Manager

You can programmatically open the CMP's UI using the openConsentManager function:

vue

Copy

Behavior

• When consent management is disabled: The composable always returns consent: true and openConsentManager resolves immediately without action.
• When consent management is enabled: The composable reactively returns the actual consent state from the CMP, and openConsentManager opens the CMP's consent UI.
• When vendor is not configured: If a vendor key doesn't exist in the configuration, consent defaults to false and a warning is logged.

Integrating a different CMP

The consent management system is designed to be CMP-agnostic. To integrate a different platform (e.g., Consentmanager, OneTrust, Cookiebot, etc.), you must include the script tag of your CMP and modify the app/plugins/consentManagerAdapter.client.ts plugin.

Loading the CMP Script

Use the useConsentManagementPlatform composable within app/app.vue to load the CMP script dynamically. This ensures the script only loads when consent management is actually required by the shop. To switch CMPs, update the src property with the URL of the new script and adjust the script tag attributes to meet the new CMP's requirements.

vue

Copy

The $consent Nuxt Context Bridge

The Storefront Application injects a $consent object into the Nuxt context. This object acts as the bridge between the application's state and the active CMP.

The $consent object exposes the following for your custom adapter:

• state: A reactive object where the keys are the Storefront Vendor Keys (must match the ID defined in config/consent-vendor.config.json) and the values are boolean flags (true/false) indicating consent.
• openConsentManager: A function reference that, when called, should trigger the display of the CMP's user interface.

Adjusting the Consent Manager Adapter

To adapt the application for a different CMP (e.g., Consentmanager, Cookiebot, OneTrust), you must replace the default adapter plugin.

1. Locate and replace the existing plugin: app/plugins/userCentricsAdapter.client.ts.
2. Create a new plugin specific to your CMP.
3. Inside the new plugin, update nuxt.$consent.state and nuxt.$consent.openConsentManager to interface with the third-party CMP API.

The following example demonstrates how to create an adapter for Consentmanager:

typescript

Copy