Info
Inhalt

[Flattern] 1. consentmanager SDK-Integration

In diesem Dokument finden Sie allgemeine Informationen zur Integration unseres SDK in Ihr Projekt. Weitere Einzelheiten entnehmen Sie bitte unserer API-Referenz Dokumentation. 

1. Installation

consentmanager SDK ist eine umfassende Lösung für die Verwaltung der Benutzereinwilligung in mobilen Anwendungen. Dieses SDK wurde für die Einhaltung der DSGVO, die Berücksichtigung von Benutzerdatenschutzeinstellungen und die Transparenz der Anzeigenverfolgung entwickelt 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 – Beschreibung auf hoher Ebene

  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 des Consent Layers:

    • Erstellen Sie beim Start der App eine Instanz von CMPManager Klasse. Diese Instanz übernimmt den Einwilligungsprozess.
    • Das SDK zeigt bei Bedarf automatisch den Zustimmungsbildschirm an.
  3. Verarbeitung der Einwilligungsdaten des Benutzers:

    • Sobald die Einwilligungen eingeholt wurden, werden die Informationen gespeichert und stehen für Abfragen über verschiedene Eigenschaften und Methoden zur Verfügung, die unser SDK bereitstellt. Sie erhalten Informationen über abgelehnte oder akzeptierte Einwilligungen, Anbieter und Zwecke.

1.1 Integration und Konfiguration

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

flutter pub add cm_cmp_sdk_v3

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

dependencies:  
	cm_cmp_sdk_v3: ^3.2.0

Alternativ könnte Ihr Herausgeber Sie unterstützen flutter pub get. Weitere Informationen finden Sie in den Dokumenten Ihres Redakteurs.

Stellen Sie außerdem sicher, dass Sie build.gradle Datei in der android/app Ordner Ihres Projekts die richtige Abhängigkeit deklariert hat. Da es sich um eine Flutter/Dart Native Bridge handelt, müssen alle Abhängigkeiten synchron sein. Dasselbe gilt für iOS: Stellen Sie sicher, dass Ihr podspec Die Datei spiegelt die richtige Abhängigkeit wider.

Android

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

iOS

  s.dependency "cm-sdk-ios-v3", "3.2.0"
Import

Jetzt können Sie in Ihrem Dart-Code Folgendes verwenden:

import 'package:cm_cmp_sdk_v3/cm_cmp_sdk_v3.dart';

1.2 Erstellen einer Instanz und Anzeigen der Zustimmungsebene

Innerhalb Ihres Codes müssen Sie eine Instanz der Klasse erstellen CMPManagerSie müssen zwei Objekte einrichten, die an die Methode getInstance übergeben werden: UrlConfig, das Ihre CMP-Konfiguration verwaltet, wie Code-ID und Standardsprache, und ConsentLayerUIConfig. Dadurch wird das Aussehen der WebView konfiguriert, die die Zustimmungsebene anzeigt. Danach können Sie die Methode verwenden checkWithServerAndOpenIfNecessary() um automatisch die erforderlichen Daten von unserem Server abzurufen und zu bestimmen, ob der Zustimmungsbildschirm angezeigt werden muss oder nicht. Wenn ja, zeigt das SDK den Zustimmungsbildschirm an dieser Stelle automatisch an, und zwar über einen WebView Erstellt durch unser SDK, das die Zustimmungsebene mit dem Text und den Schaltflächen entsprechend Ihren CMP-Konfigurationen anzeigt (ausgewählt über die Code-ID Ihres CMP), die Daten sammelt und die Zustimmungsinformationen im Bereich NSUserDefaults/UserPreferences des Geräts speichert, damit die App die zielgerichteten Anzeigen entsprechend anzeigen kann. 

Bitte beachten Sie, dass die Funktionen zur Bestimmung, ob eine Zustimmung erforderlich ist oder nicht, sowie die Anzeige der Zustimmungsebene von einer zuverlässigen Netzwerkverbindung abhängen. Wenn keine Verbindung verfügbar ist oder der Wiederholungsmechanismus unseren Server nicht erreichen kann, gibt das Ereignis didReceiveError einen Timeout-Fehler zurück. Das SDK kann daher überhaupt nicht feststellen, ob eine Zustimmung erforderlich ist, da es die Zustimmungsebene überhaupt nicht anzeigen kann. Bitte stellen Sie sicher, dass Ihre Logik dies berücksichtigt.

Ejemplo:

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 Sie sich für die Verwendung eines Ansichtsmodells entscheiden, würde es 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: $consent\nData: $jsonObject'),
      didChangeATTStatus: (oldStatus, newStatus, last) =>
          _logCallback('ATT Status changed: $oldStatus -> $newStatus'),
    );
  }

  void _logCallback(String message) {
    _callbackLogs = "$message\n$_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 von Einwilligungsdaten der Nutzer

Überprüfung der Einwilligungen der Benutzer

Unser SDK bietet verschiedene Methoden zum Überprüfen und Abrufen von Einwilligungsinformationen. Die wichtigsten Methoden werden im folgenden Beispiel angezeigt:

// 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 unserem ausführlichen API-Dokumentation

Erneutes Öffnen des Consent Layers, um die Auswahl der Benutzer zu überprüfen

Um dem Benutzer die Möglichkeit zu geben, seine Auswahl zu überprüfen oder zu ändern, können Sie einfach anrufen openConsentLayer()

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

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

In einigen Fällen kann eine native App Webviews enthalten, um Informationen wie Werbung oder Inhalte anzuzeigen. Um die Zustimmungsinformationen vom SDK an die Webview zu übertragen, können Sie die Zustimmungszeichenfolge wie folgt abrufen:

_cmpSdkPlugin.exportCMPInfo

Dadurch werden die Einwilligungsinformationen und alle weiteren Daten exportiert, die das CMP benötigt. Sie können diese Informationen dann an das CMP weitergeben, das sich in Ihrer Webansicht befindet, indem Sie sie der URL hinzufügen, die in der Webansicht aufgerufen wird.

Wenn Sie die Zustimmungszeichenfolge andernfalls mithilfe des SDK importieren müssen, können Sie 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, die Anleitung auf zu lesen ATT-Implementierung hier.

Erstellen eines benutzerdefinierten Layouts

Um eine benutzerdefinierte Ansicht der WKWebView zu erstellen, z. B. indem Sie ihre Positionierung oder ihren Hintergrund ändern, 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)

Protokollierung

Wenn Sie unser iOS SDK verwenden, müssen Sie möglicherweise Protokollinformationen für verschiedene Zwecke debuggen oder analysieren. Die von unserem SDK generierten Protokolle sind unter „CMP“ gekennzeichnet, sodass Sie einfach nur die relevanten Protokolle filtern und anzeigen können. Weitere Informationen finden Sie unter In diesem Abschnitt unserer Dokumentation.

 

 

Nach oben