1. Installation

Das ConsentManager SDK ist eine umfassende Lösung zur Verwaltung der Nutzerzustimmung in mobilen Anwendungen. Dieses SDK wurde entwickelt, um die Einhaltung der DSGVO, die Datenschutzpräferenzen der Nutzer und die Transparenz beim Ad-Tracking zu gewährleisten, und bietet eine nahtlose Integration für iOS- und Android-Plattformen. Darüber hinaus bietet es Wrapper-Plugins/Bridges für React Native, Flutter und Unity, wodurch es in verschiedenen Entwicklungsumgebungen vielseitig einsetzbar ist.

Schritte – Allgemeine Beschreibung

1. Integration und Konfiguration:

   • Integrieren Sie das SDK in Ihre App.
   • Konfigurieren Sie die SDK-Einstellungen entsprechend Ihren Anforderungen.

2. Erstellen einer Instanz und Anzeigen der Einwilligungsschicht:

   • Erstellen Sie beim Start der App eine Instanz der CMPManager Klasse. Diese Instanz übernimmt den Einwilligungsprozess.
   • Das SDK zeigt den Einwilligungsbildschirm bei Bedarf automatisch an.

3. Verarbeitung der Einwilligungsdaten der Nutzer:

   • Sobald Einwilligungen erfasst wurden, werden die Informationen gespeichert und können über verschiedene Eigenschaften und Methoden, die unser SDK bereitstellt, abgefragt werden. Du erhältst Informationen über abgelehnte oder akzeptierte Einwilligungen, Anbieter und Zwecke.

1.1 Integration und Konfiguration

Die Wrapper-Bibliothek für Flutter ist auf pub.dev verfügbar. Führen Sie in der Befehlszeile oder im Terminalfenster folgenden Befehl aus:

flutter pub add cm_cmp_sdk_v3

Dadurch wird eine Zeile wie diese zur pubspec.yaml Ihres Pakets hinzugefügt (und ein impliziter flutter pub get):

dependencies:  
	cm_cmp_sdk_v3: ^3.8.0

Alternativ unterstützt Ihr Editor möglicherweise flutter pub get. Weitere Informationen finden Sie in der Dokumentation Ihres Editors.

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"

Importieren

In Ihrem Dart-Code können Sie nun Folgendes verwenden:

import 'package:cm_cmp_sdk_v3/cm_cmp_sdk_v3.dart';

1.2 Instanz erstellen und Einwilligungslayer anzeigen

In Ihrem Code müssen Sie eine Instanz der Klasse CMPManager. Du musst zwei Objekte einrichten, die an die getInstance-Methode übergeben werden: UrlConfig, das Ihre CMP-Konfiguration wie Code-ID und Standardsprache verwaltet, und ConsentLayerUIConfig. das das Aussehen des WebViews konfiguriert, in dem die Einwilligungsmaske angezeigt wird. Danach kannst du die Methode checkWithServerAndOpenIfNecessary() verwenden, um automatisch die erforderlichen Daten von unserem Server abzurufen und festzustellen, ob der Einwilligungsbildschirm angezeigt werden muss oder nicht. Ist dies der Fall, zeigt das SDK an dieser Stelle automatisch den Einwilligungsbildschirm über eine WebView , das von unserem SDK erstellt wird. Dieses zeigt die Einwilligungsseite mit dem Text und den Schaltflächen gemäß Ihren CMP-Konfigurationen an (ausgewählt über die Code-ID Ihres CMP), erfasst die Daten und speichert die Einwilligungsinformationen im Bereich NSUserDefaults/UserPreferences des Geräts, damit die App die zielgerichteten Anzeigen entsprechend anzeigen kann. 

Beispiel:

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');
    }
  }
}

Falls du dich für ein View-Modell entscheidest, würde das so aussehen:

 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 Verarbeitung der Einwilligungsdaten der Nutzer

Überprüfung der Einwilligungen der Nutzer

Unser SDK bietet verschiedene Methoden zur Überprüfung und Abfrage von Einwilligungsinformationen. Die wichtigsten Methoden sind im folgenden Beispiel aufgeführt:

// 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');
    }
  }

Weitere Informationen zu den anderen Methoden finden Sie in unserer vollständigen API-Dokumentation. 

Erneutes Öffnen der Einwilligungsschicht, um die Auswahl der Nutzer zu überprüfen

Damit der Nutzer seine Auswahl überprüfen oder ändern kann, können Sie einfach openConsentLayer()

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

Diese Methode zeigt die Einwilligungsschicht über dieselbe WebView-Instanz an, die in den vorherigen Schritten erstellt wurde. 

Importieren/Exportieren von Einwilligungsinformationen in andere Quellen

In einigen Fällen kann eine native App Webviews enthalten, um Informationen wie Werbung oder Inhalte anzuzeigen. Um die Einwilligungsinformationen vom SDK an den Webview zu übermitteln, kannst du die Einwilligungszeichenfolge wie folgt abrufen:

_cmpSdkPlugin.exportCMPInfo

Dadurch werden die Einwilligungsinformationen und alle weiteren Daten exportiert, die von der CMP benötigt werden. Du kannst diese Informationen dann an die CMP in deiner Webview weiterleiten, indem du sie der URL hinzufügst, die in der Webview aufgerufen wird.

Falls du die Einwilligungszeichenfolge stattdessen über das SDK importieren musst, kannst du das folgende Beispiel verwenden:

await _cmpSdkPlugin.importCMPInfo(
          'Q1FERkg3QVFERkg3QUFmR01CSVRCQkVnQUFBQUFBQUFBQWlnQUFBQUFBQUEjXzUxXzUyXzUzXzU0XzU1XzU2XyNfczI3ODlfczI3OTBfczI3OTFfczI2OTdfczk3MV9VXyMxLS0tIw'
      )

Integration mit Apple Tracking Transparency (ATT)

Falls Sie Tracking oder Analysen in Ihrer App verwenden, empfehlen wir Ihnen, den Leitfaden zur ATT-Implementierung hier zu lesen.

Erstellen eines benutzerdefinierten Layouts

Um eine angepasste Ansicht des WKWebView zu erstellen, beispielsweise durch Ändern der Positionierung oder des Hintergrunds, können Sie die an das ConsentLayerUIConfig-Objekt übergebene Konfiguration wie folgt ändern:

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

Anmeldung

Wenn Sie unser iOS-SDK verwenden, kann es vorkommen, dass Sie aus verschiedenen Gründen Log-Informationen debuggen oder analysieren müssen. Die von unserem SDK generierten Logs sind mit dem Tag „CMP“ versehen, sodass Sie die relevanten Logs leicht filtern und anzeigen können. Weitere Informationen finden Sie in diesem Abschnitt unserer Dokumentation.