Comment intégrer le SDK CMP UniConsent pour Flutter avec les applications mobiles

UniConsent CMP est un package pour la gestion du consentement RGPD IAB TCF 2.3 dans les applications Flutter. Vous pouvez trouver une application de démonstration intégrée avec UniConsent CMP dans le répertoire "uniconsent_demo".

Prérequis

• Abonnement UniConsent CMP avec prise en charge des applications mobiles
• Package SDK UniConsent CMP (à demander auprès du support)

Pour commencer

Pour inclure le package UniConsent dans votre projet Flutter, ajoutez-le en tant que dépendance dans votre fichier pubspec.yaml :

dependencies:
  uniconsent:
    path: ../uniconsent

Ensuite, synchronisez la dépendance en exécutant la commande suivante :

flutter pub get

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 correspondre à votre marque et optimiser les taux de consentement.

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

Accédez à Projects → Sélectionnez votre projet → 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 un contraste approprié pour le texte du corps

É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. Cela est recommandé pour donner à la bannière un aspect natif dans votre application et obtenir 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;
}

Conseil : Une interface de consentement bien adaptée à votre marque et à l'aspect natif de votre application obtient généralement des taux de consentement plus élevés. Les utilisateurs sont plus enclins à réagir positivement à une bannière qui correspond à l'apparence et au ressenti qu'ils attendent.

Utilisation

Pour utiliser la CMP UniConsent dans votre application, suivez ces étapes :

Initialisez la CMP avec un App ID fourni par votre gestionnaire de compte :

// Init CMP with appId
UniConsent.instance.setAppId("YOUR_APP_ID_CHANGE_THIS");
// Set language (Optional)
UniConsent.instance.setLanguage("EN");

Affichez l'interface de la CMP :

// Display CMP as full-screen page (default)
UniConsent.instance.launchCMP(context);

// Display CMP as a modal bottom sheet
UniConsent.instance.launchCMP(context, displayMode: CMPDisplayMode.modalSheet);

// Display CMP as a center dialog
UniConsent.instance.launchCMP(context, displayMode: CMPDisplayMode.dialog);

Gestionnaire d'événements

Écoutez les événements du cycle de vie du SDK avec subscribe(). C'est la méthode recommandée pour savoir quand l'interface est affichée et quand elle est fermée.

Événements disponibles (CMPEventType) :

• CMPEventType.uiDisplay — L'interface de consentement est affichée
• CMPEventType.uiClose — L'interface de consentement est fermée

UniConsent.instance.subscribe((event) {
  switch (event.type) {
    case CMPEventType.uiDisplay:
      print('CMP UI displayed');
      break;
    case CMPEventType.uiClose:
      print('CMP UI closed');
      break;
    default:
      break;
  }
});

Écoutez les changements de consentement avec un callback optionnel :

// Display CMP UI with consent change callback
UniConsent.instance.launchCMP(context, onConsentChanged: (info) {
  // Called when the user saves consent choices
  print('Consent updated: ${info?.tcString}');
});

Pour un contrôle total, utilisez buildCMPWidget() pour intégrer la CMP dans votre propre mise en page :

// Embed in your own widget tree
UniConsent.instance.buildCMPWidget(
  onConsentChanged: (info) { /* ... */ },
  onClose: () { /* dismiss your custom UI */ },
);

Vérifier automatiquement si le consentement est nécessaire au lancement de l'application :

// Check if consent should be requested (e.g. first visit, or vendor list updated)
final shouldRequest = await UniConsent.instance.shouldRequestConsent();
if (shouldRequest) {
  UniConsent.instance.launchCMP(context);
}

Obtenir le tcString si nécessaire :

// Get tcString
final info = await UniConsent.instance.getConsentInfo();
print(info?.tcString);

Lire le statut du consentement :

// Read consent status
final info = await UniConsent.instance.getConsentInfo();
if (info is ConsentInfo &&
    info.purposeConsents.contains(DataUsagePurpose.useLimitedDataToSelectAds)) {
  // do something
}

Réinitialiser le statut du consentement si nécessaire :

// Clear all consent data
await UniConsent.instance.clearAll();

Premier niveau personnalisé (Tout accepter / Tout refuser)

Disponible à partir de la version 26.7.0 du SDK. Si vous créez votre propre interface de consentement de premier niveau au lieu d'afficher la webview du CMP, vous pouvez enregistrer le consentement directement :

// Grant consent for all purposes, special features and vendors
final saved = await UniConsent.instance.agreeAll();

// Reject all purposes, special features and vendors
final saved = await UniConsent.instance.rejectAll();

Ces deux API enregistrent les mêmes valeurs de consentement que le flux de l'interface CMP (clés IAB TCF, consentement additionnel et signaux de consent mode) et déclenchent le même événement de fermeture pour les abonnés.

Remarque : Ces API récupèrent la liste des fournisseurs et la configuration du projet via le réseau et renvoient false si le consentement n'a pas pu être enregistré (par exemple hors ligne).

Important : Votre premier niveau personnalisé doit toujours respecter les exigences de l'IAB TCF (divulguer les finalités et les fournisseurs, et proposer l'acceptation et le refus avec la même visibilité). Les utilisateurs doivent toujours pouvoir ouvrir l'interface CMP complète (launchCMP()) pour effectuer des choix granulaires.

Synchroniser le consentement avec une 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 à nouveau la bannière.

import 'package:webview_flutter/webview_flutter.dart';
import 'package:uniconsent/uniconsent.dart';

final controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setNavigationDelegate(NavigationDelegate(
    onPageStarted: (url) async {
      // Inject consent at page start, before CMP tag runs
      await UniConsent.instance.syncConsent(controller);
    },
  ))
  ..loadRequest(Uri.parse('https://example.com'));

Types exportés

Les types suivants sont disponibles lors de l'import de package:uniconsent/uniconsent.dart :

• UniConsent — singleton principal du SDK
• UniConsentInfo — données de consentement de base (sdkId, tcString, gdprApplies, vendorListVersion, etc.)
• ConsentInfo — étend UniConsentInfo avec les listes de consentement par finalité
• DataUsagePurpose — enum des identifiants de finalité IAB TCF 2.3
• KVDBKeys — constantes de clés de stockage IAB TCF (par ex. KVDBKeys.tcString, KVDBKeys.purposeConsents)
• CMPDisplayMode — enum pour le style d'affichage (page, modalSheet, dialog)
• CMPEventType — enum pour les événements du cycle de vie (sdkInit, ready, uiDisplay, uiClose)
• CMPEvent — objet événement avec une propriété type
• CMPEventCallback — typedef pour le callback de subscribe()
• LogLevel — debug / prod
• ConsentCallback — typedef pour le callback onConsentChanged
• UniConsentCMPContent — le widget CMP principal pour les mises en page personnalisées

Remarques

1. Les utilisateurs doivent avoir la possibilité d'accéder à un bouton ou un lien « Paramètres de confidentialité » dans la section des paramètres de votre application afin d'ouvrir l'interface de la CMP.
2. Vous pouvez utiliser la fonction shouldRequestConsent() pour vérifier si vous devez demander un nouveau consentement en fonction du statut. Affichez l'interface de la CMP si nécessaire lorsqu'un utilisateur ouvre l'application.