1. Installation

consentmanager SDK est une solution complète pour la gestion du consentement des utilisateurs dans les applications mobiles. Conçu pour gérer la conformité au RGPD, les préférences de confidentialité des utilisateurs et la transparence du suivi publicitaire, ce SDK offre une intégration transparente pour les plateformes iOS et Android. De plus, il propose des plugins/ponts d'encapsulation pour React Native, Flutter et Unity, ce qui le rend polyvalent dans divers environnements de développement.

Étapes – Description générale

1. Intégration et configuration :

   • Intégrez le SDK dans votre application.
   • Configurez les paramètres du SDK en fonction de vos besoins.

2. Création d'une instance et affichage de la couche de consentement :

   • Au démarrage de l'application, créez une instance de la CMPManager classe. Cette instance gérera le processus de consentement.
   • Le SDK affichera automatiquement l'écran de consentement si nécessaire.

3. Traitement des données de consentement des utilisateurs :

   • Une fois les consentements recueillis, les informations sont stockées et peuvent être consultées via différentes propriétés et méthodes exposées par notre SDK. Vous disposerez d'informations sur les consentements refusés ou acceptés, les fournisseurs et les finalités.

1.1 Intégration et configuration

La bibliothèque wrapper pour Flutter est disponible sur pub.dev. Dans la ligne de commande ou dans une fenêtre de terminal, exécutez :

flutter pub add cm_cmp_sdk_v3

Cela ajoutera une ligne comme celle-ci au fichier pubspec.yaml de votre package (et lancera une commande implicite flutter pub get):

dependencies:  
	cm_cmp_sdk_v3: ^3.8.0

Sinon, votre éditeur prend peut-être en charge flutter pub get. Consultez la documentation de votre éditeur pour en savoir plus.

Android

dependencies {
    implementation "net.consentmanager.sdkv3:cmsdkv3:3.8.0" // Make sure this line is inserted
}

iOS

  s.dependency "cm-sdk-ios-v3", "3.8.0"

Importer

Dans votre code Dart, vous pouvez désormais utiliser :

import 'package:cm_cmp_sdk_v3/cm_cmp_sdk_v3.dart';

1.2 Création d'une instance et affichage de la couche de consentement

Dans votre code, vous devez créer une instance de la classe CMPManager. Vous devrez configurer deux objets qui seront transmis à la méthode getInstance : UrlConfig, qui gère votre configuration CMP, comme l'identifiant de code et la langue par défaut, et ConsentLayerUIConfig. qui configurera l'apparence de la WebView qui affichera la couche de consentement. Après cela, vous êtes prêt à utiliser la méthode checkWithServerAndOpenIfNecessary() pour récupérer automatiquement les données nécessaires depuis notre serveur et déterminer si l'écran de consentement doit s'afficher ou non. Si c'est le cas, le SDK affichera automatiquement l'écran de consentement à ce stade, via une WebView créée par notre SDK, qui affichera la couche de consentement avec le texte et les boutons correspondant à vos configurations CMP (choisies via le Code-ID de votre CMP), collectera les données et enregistrera les informations de consentement dans la zone NSUserDefaults/UserPreferences de l'appareil, afin que l'application puisse afficher les publicités ciblées en conséquence. 

Exemple :

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CMP SDK Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final CMPmanager _cmpManager = CMPmanager.instance;
  String _lastAction = '';

  @override
  void initState() {
    super.initState();
    _initializeCMP();
  }

  Future<void> _initializeCMP() async {
    try {
      await _cmpManager.setUrlConfig(
        id: "YOUR-CODE-ID-GOES-HERE",
        domain: "delivery.consentmanager.net", // or any other domain from your CMP dashboard
        appName: "CMDemoAppFlutter", // or any other app name, according to 
        language: "EN",
      );

      _cmpManager.addEventListeners(
        didReceiveConsent: (consent, jsonObject) {
          setState(() => _lastAction = 'Received consent: $consent');
        },
        didShowConsentLayer: () {
          setState(() => _lastAction = 'Consent layer shown');
        },
        didCloseConsentLayer: () {
          setState(() => _lastAction = 'Consent layer closed');
        },
        didReceiveError: (error) {
          setState(() => _lastAction = 'Error: $error');
        },
      );
    } catch (e) {
      setState(() => _lastAction = 'Initialization error: $e');
    }
  }
}

Si vous décidez d'utiliser un modèle de vue, voici à quoi cela ressemblerait :

 class CmpViewModel extends ChangeNotifier {
  static final CmpViewModel _instance = CmpViewModel._internal();
  static CmpViewModel get instance => _instance;

  late CMPmanager _cmpSdkPlugin;
  String _callbackLogs = '';

  CmpViewModel._internal();

  Future<void> initCmp() async {
    try {
      _cmpSdkPlugin = CMPmanager.instance;

      await CMPmanager.instance.setUrlConfig(
        appName: "CMDemoAppFlutter",
        id: "YOUR-CODE-ID-GOES-HERE",
        language: "EN",
        domain: "delivery.consentmanager.net",
      );

      _addEventListeners();
      await _cmpSdkPlugin.checkAndOpen();

    } catch (e) {
      _logCallback('Initialization error: $e');
      rethrow;
    }
  }

  void _addEventListeners() {
    _cmpSdkPlugin.addEventListeners(
      didShowConsentLayer: () => _logCallback('Consent layer opened'),
      didCloseConsentLayer: () => _logCallback('Consent layer closed'),
      didReceiveError: (error) => _logCallback('Error: $error'),
      didReceiveConsent: (consent, jsonObject) =>
          _logCallback('Consent: $consentnData: $jsonObject'),
      didChangeATTStatus: (oldStatus, newStatus, last) =>
          _logCallback('ATT Status changed: $oldStatus -> $newStatus'),
    );
  }

  void _logCallback(String message) {
    _callbackLogs = "$messagen$_callbackLogs";
    notifyListeners();
  }

  Future<void> forceOpen() async {
    try {
      await _cmpSdkPlugin.forceOpen();
      Fluttertoast.showToast(msg: 'Opening consent layer');
    } catch (e) {
      Fluttertoast.showToast(msg: 'Error opening consent layer: $e');
    }
  }

  Future<void> getGoogleConsentStatus() async {
    try {
      final settings = await _cmpSdkPlugin.getGoogleConsentModeStatus();
      final message = settings.entries.map((e) => '${e.key}: ${e.value}').join('n');
      _logCallback('Google Consent Mode Settings:n$message');
      Fluttertoast.showToast(msg: 'Check logs for Google Consent Mode settings');
    } catch (e) {
      Fluttertoast.showToast(msg: 'Error getting Google Consent Mode status: $e');
    }
  }
  // .
  // .
  // .
  // all the other method's implementations. 
}

1.3 Traitement des données relatives au consentement des utilisateurs

Vérification des consentements des utilisateurs

Notre SDK propose différentes méthodes pour vérifier et récupérer les informations de consentement. Les principales méthodes sont présentées dans l'exemple ci-dessous :

// On the example below retrieved from our Demo App, we have some examples 
// of how to check consents from the user, either accepted or rejected. 

  Future<void> getUserStatus() async {
    try {
      final status = await _cmpSdkPlugin.getUserStatus();
      final message = '''
User Choice: ${status.hasUserChoice}
TCF: ${status.tcf}
Additional Consent: ${status.addtlConsent}
Regulation: ${status.regulation}

Vendors Status:
${status.vendors.entries.map((e) => '${e.key}: ${e.value}').join('n')}

Purposes Status:
${status.purposes.entries.map((e) => '${e.key}: ${e.value}').join('n')}
''';
      _logCallback(message);
      Fluttertoast.showToast(msg: 'Check logs for User Status details');
    } catch (e) {
      Fluttertoast.showToast(msg: 'Error getting user status: $e');
    }
  }

Pour plus d'informations sur les autres méthodes, veuillez consulter notre documentation API complète. 

Réouverture de la fenêtre de consentement pour vérifier les choix des utilisateurs

Afin de permettre à l'utilisateur de vérifier ou de modifier ses choix, vous pouvez simplement appeler openConsentLayer()

void openConsentLayer() async {
  await _cmpSdkPlugin.forceOpen();
  notifyListeners();
}

Cette méthode affichera la couche de consentement via la même instance WebView créée lors des étapes précédentes. 

Importation/exportation des informations de consentement vers d'autres sources

Dans certains cas, une application native peut contenir des webviews afin d'afficher des informations, telles que des publicités ou du contenu. Afin de transmettre les informations de consentement du SDK vers la webview, vous pouvez récupérer la chaîne de consentement à l'aide de :

_cmpSdkPlugin.exportCMPInfo

Cela permettra d'exporter les informations de consentement et toutes les autres données requises par le CMP. Vous pouvez ensuite transmettre ces informations au CMP présent dans votre webview en les ajoutant à l'URL appelée dans la webview.

Si, par ailleurs, vous devez importer la chaîne de consentement à l'aide du SDK, vous pouvez utiliser l'exemple ci-dessous :

await _cmpSdkPlugin.importCMPInfo(
          'Q1FERkg3QVFERkg3QUFmR01CSVRCQkVnQUFBQUFBQUFBQWlnQUFBQUFBQUEjXzUxXzUyXzUzXzU0XzU1XzU2XyNfczI3ODlfczI3OTBfczI3OTFfczI2OTdfczk3MV9VXyMxLS0tIw'
      )

Intégration avec Apple Tracking Transparency (ATT)

Si vous utilisez des outils de suivi ou d'analyse dans votre application, nous vous recommandons de lire le guide sur la mise en œuvre de l'ATT ici.

Créer une mise en page personnalisée

Pour créer une vue personnalisée de WKWebView, par exemple en modifiant son positionnement ou son arrière-plan, vous pouvez modifier la configuration transmise à l'objet ConsentLayerUIConfig comme indiqué ci-dessous :

ConsentLayerUIConfig(
    position: .halfScreenTop,
    backgroundStyle: .dimmed(.grey, 0.75),
    cornerRadius: 20,
    respectsSafeArea: false,
    allowsOrientationChanges: true)

Connexion

Lorsque vous utilisez notre SDK iOS, vous pouvez avoir besoin de déboguer ou d'analyser les informations de journal à diverses fins. Les journaux générés par notre SDK sont classés sous « CMP », ce qui vous permet de filtrer et d'afficher facilement uniquement les journaux pertinents. Pour plus d'informations, veuillez vous reporter à cette section de notre documentation.