Comment intégrer le SDK CMP UniConsent pour React Native

Ce guide explique comment intégrer le SDK CMP UniConsent dans votre application React Native pour la gestion du consentement GDPR IAB TCF 2.3.

Vous trouverez une application de démonstration intégrée avec ce SDK dans le répertoire UniConsentDemo fourni avec le package SDK.

Prérequis

• Un plan UniConsent CMP incluant le support des applications mobiles.
• Le package SDK UniConsent pour React Native (par ex. uniconsent-react-native-sdk-26.2.0.zip), téléchargé depuis votre tableau de bord UniConsent ou obtenu auprès du support.
• Un environnement de développement React Native fonctionnel.

Pour commencer (Installation)

Installer le package SDK

Téléchargez et décompressez le package SDK (par ex. uniconsent-react-native-sdk-26.2.0.zip). À l'intérieur, vous trouverez :

• uniconsent-react-native-sdk-26.2.0.tgz — Package SDK installable via npm
• uniconsent-sdk/ — Fichiers de bibliothèque SDK pré-compilés
• UniConsentDemo/ — Application de démonstration
• README.md — Documentation

Installez le fichier .tgz avec npm ou Yarn :

# Replace <path-to-package-file.tgz> with the actual path to the file
npm install <path-to-package-file.tgz>
# or
yarn add <path-to-package-file.tgz>

Exemple : Si vous placez le fichier .tgz à la racine de votre projet :

npm install ./uniconsent-react-native-sdk-26.2.0.tgz
# or
yarn add file:./uniconsent-react-native-sdk-26.2.0.tgz

Installer les dépendances pairs

Ce SDK nécessite les dépendances pairs suivantes :

npm install react-native-webview react-native-default-preference
# or
yarn add react-native-webview react-native-default-preference

Installer les Pods iOS

Si vous développez pour iOS, accédez au répertoire ios de votre projet et installez les pods :

cd ios
pod install
cd ..

Personnaliser l'interface de consentement

Avant d'intégrer le SDK, personnalisez l'apparence de la bannière de consentement dans le tableau de bord UniConsent pour qu'elle corresponde à votre marque et optimise les taux de consentement.

Étape 1 : Style de marque dans le tableau de bord

Accédez à Projects → Select your Project → Settings → Step 5: UI & Style Settings pour configurer :

• Main Button Colour — Définissez la couleur du bouton d'action principal pour correspondre à votre marque
• Main Button Text Colour — Ajustez la couleur du texte sur le bouton principal pour la lisibilité
• Background Colour — Définissez la couleur de fond de la bannière pour s'harmoniser avec votre application
• Text Colour — Assurez-vous que le texte du corps a un contraste approprié

Étape 2 : Style avancé avec CSS personnalisé (optionnel)

Pour un contrôle plus précis, ajoutez du CSS personnalisé dans le champ CSS Content sous l'étape 5. Ceci est recommandé pour que la bannière s'intègre nativement à votre application et obtienne le meilleur taux de consentement :

/* Example: Style the accept button to match your brand */
.unic-btn-accept {
  background-color: #4CAF50;
  border-radius: 8px;
  font-weight: 600;
}

/* Example: Adjust banner font */
.unic-banner {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Example: Make the reject button less prominent */
.unic-btn-reject {
  background-color: transparent;
  border: 1px solid #ccc;
  color: #666;
}

Astuce : Une interface de consentement bien adaptée à votre marque et qui semble native à votre application obtient généralement de meilleurs taux de consentement. Les utilisateurs sont plus enclins à réagir positivement face à une bannière qui correspond à l'apparence et au style qu'ils attendent.

Utilisation

Initialiser le SDK via Provider

Encapsulez le composant racine de votre application (ou la partie concernée) avec UniConsentProvider. Vous devez fournir votre licenseId (Publisher ID/pid d'UniConsent).

// Your main App file (e.g., App.tsx or index.js)
import React from 'react';
import { UniConsentProvider } from 'uniconsent-sdk';
import YourAppRootComponent from './src/YourAppRootComponent';

const App = () => {
  return (
    <UniConsentProvider licenseId="YOUR_LICENSE_ID">
      <YourAppRootComponent />
    </UniConsentProvider>
  );
};

export default App;

Modes d'affichage

Le SDK prend en charge trois modes d'affichage pour l'interface CMP, configurés via la prop displayMode sur UniConsentProvider :

// Full screen (default — no prop needed)
<UniConsentProvider licenseId="YOUR_LICENSE_ID">

// Bottom sheet
<UniConsentProvider licenseId="YOUR_LICENSE_ID" displayMode="bottomSheet">

// Center dialog
<UniConsentProvider licenseId="YOUR_LICENSE_ID" displayMode="dialog">

Gestionnaire d'événements

Écoutez les événements du cycle de vie du SDK avec la prop onEvent sur UniConsentProvider.

Types d'événements disponibles :

• 'sdkInit' — Initialisation du SDK lancée
• 'ready' — Initialisation du SDK terminée
• 'uiDisplay' — L'interface de consentement est affichée
• 'uiClose' — L'interface de consentement est fermée

<UniConsentProvider
  licenseId="YOUR_LICENSE_ID"
  onEvent={(event) => {
    switch (event.type) {
      case 'ready':
        console.log('SDK ready');
        break;
      case 'uiClose':
        console.log('Consent UI closed');
        break;
    }
  }}
>
  <YourAppRootComponent />
</UniConsentProvider>

Afficher l'interface CMP

Utilisez le hook useConsent dans un composant à l'intérieur du Provider pour obtenir la fonction openCMP, puis appelez-la quand nécessaire (par ex. lors d'un appui sur un bouton).

import React from 'react';
import { View, Text, Button, ActivityIndicator } from 'react-native';
import { useConsent } from 'uniconsent-sdk';

const ConsentInfoComponent = () => {
  const { consentStatus, isLoading, openCMP } = useConsent();

  return (
    <View>
      <Text>Consent Status:</Text>
      {isLoading ? (
        <ActivityIndicator />
      ) : (
        <Text>{consentStatus ?? 'Initializing...'}</Text>
      )}
      <Button
        title="Manage Privacy Settings"
        onPress={openCMP}
        disabled={isLoading}
      />
    </View>
  );
};

Vérifier le consentement par programmation

Utilisez les fonctions utilitaires pour vérifier le statut du consentement directement sans le hook :

import {
  getTCString,
  isEURegion,
  isPurposeConsented,
  isVendorConsented,
  getConsentData,
} from 'uniconsent-sdk';

// Get the full TC String
const tcString = await getTCString();

// Check if user is in EU/EEA region
const inEU = await isEURegion();

// Check if a specific TCF purpose has consent (1-based ID)
const hasPurpose1 = await isPurposeConsented(1);

// Check if a specific vendor has consent (1-based ID)
const hasVendor755 = await isVendorConsented(755);

// Get all consent data as a single object
const consentData = await getConsentData();

Synchroniser le consentement vers WebView

Si votre application ouvre une WebView qui charge une page web avec le tag CMP UniConsent, vous pouvez transmettre le statut de consentement natif afin que le tag CMP reconnaisse le consentement existant et n'affiche pas la bannière à nouveau.

Utilisez getConsentSyncScript() avec injectedJavaScriptBeforeContentLoaded pour injecter le consentement avant l'exécution de tout script de la page :

import React, { useState, useEffect } from 'react';
import { WebView } from 'react-native-webview';
import { getConsentSyncScript } from 'uniconsent-sdk';

const MyWebView = () => {
  const [consentScript, setConsentScript] = useState<string | null>(null);

  useEffect(() => {
    getConsentSyncScript().then(setConsentScript);
  }, []);

  if (!consentScript) return null;

  return (
    <WebView
      source={{ uri: 'https://example.com' }}
      injectedJavaScriptBeforeContentLoaded={consentScript}
    />
  );
};

Utilitaires de débogage

Le SDK fournit des fonctions d'aide pour le développement et le débogage :

import { listKV, clearKV } from 'uniconsent-sdk';

// Log all stored consent keys to console
await listKV();

// Clear all stored consent data
await clearKV();

Configuration

Props de UniConsentProvider

Référence API

Composants et Hooks

Fonctions utilitaires

Types exportés

Champs de ConsentData

Remarques

• Accès aux paramètres de confidentialité : Votre application doit offrir aux utilisateurs un moyen permanent (par ex. un bouton ou un lien « Paramètres de confidentialité », souvent dans un menu de paramètres) pour accéder et mettre à jour leurs choix de consentement. Ce bouton doit appeler la fonction openCMP() obtenue via le hook useConsent.
• Vérification automatique du consentement : Le UniConsentProvider vérifie automatiquement le statut du consentement au démarrage de votre application, y compris si la Global Vendor List (GVL) a été mise à jour depuis le dernier consentement de l'utilisateur. Si la version de la GVL a changé, l'utilisateur sera invité à donner son consentement à nouveau.