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();

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.