Informatie
Beschrijving

[fladderen] 1. consentmanager SDK-integratie

In dit document vindt u algemene informatie over hoe u onze SDK in uw project kunt integreren. Voor meer details verwijzen wij u naar onze API-referentie documentatie. 

1. Installatie

consentmanager SDK is een uitgebreide oplossing voor het beheren van gebruikerstoestemming in mobiele applicaties. Deze SDK is ontworpen om GDPR-naleving, gebruikersprivacyvoorkeuren en transparantie bij het volgen van advertenties te verwerken en biedt een naadloze integratie voor iOS- en Android-platforms. Daarnaast biedt het wrapper-plugins/bruggen voor React Native, Flutter en Unity, waardoor het veelzijdig is in verschillende ontwikkelomgevingen.

Stappen - Beschrijving op hoog niveau

  1. Integratie en configuratie:

    • Integreer de SDK in uw app.
    • Configureer de SDK-instellingen volgens uw behoeften.
  2. Een instantie maken en de toestemmingslaag weergeven:

    • Maak bij het opstarten van de app een exemplaar van het CMPManager klas. Deze instantie zal het toestemmingsproces afhandelen.
    • De SDK geeft indien nodig automatisch het toestemmingsscherm weer.
  3. Verwerking van toestemmingsgegevens van gebruikers:

    • Zodra toestemmingen zijn verzameld, wordt informatie opgeslagen en is deze beschikbaar voor query's via verschillende eigenschappen en methoden die door onze SDK worden blootgesteld. U krijgt informatie over afgewezen of geaccepteerde toestemmingen, leveranciers en doeleinden.

1.1 Integratie en configuratie

De wrapperbibliotheek voor Flutter is beschikbaar op pub.devVoer het volgende uit in het opdrachtregel- of terminalvenster:

flutter pub add cm_cmp_sdk_v3

Dit zal een regel als deze toevoegen aan de pubspec.yaml van uw pakket (en een impliciete flutter pub get):

dependencies:  
	cm_cmp_sdk_v3: ^3.2.0

Als alternatief kan uw redacteur dit mogelijk ondersteunen flutter pub get. Bekijk de documenten van uw redacteur voor meer informatie.

Zorg er ook voor dat je build.gradle bestand in de android/app map van uw project heeft de juiste afhankelijkheid gedeclareerd. Dit is een Flutter/Dart Native Bridge, dus alle afhankelijkheden moeten gesynchroniseerd zijn. Hetzelfde geldt voor iOS: zorg ervoor dat uw podspec bestand weerspiegelt de juiste afhankelijkheid.

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

In uw Dart-code kunt u nu het volgende gebruiken:

import 'package:cm_cmp_sdk_v3/cm_cmp_sdk_v3.dart';

1.2 Een instantie maken en de toestemmingslaag weergeven

Binnen uw code moet u een instantie van de klasse maken CMPManager. U moet twee objecten instellen die worden doorgegeven aan de getInstance-methode: UrlConfig, die uw CMP-configuratie afhandelt, zoals Code-ID en standaardtaal, en ConsentLayerUIConfig. die de looks van de WebView configureert die de toestemmingslaag zal weergeven. Daarna bent u klaar om de methode te gebruiken checkWithServerAndOpenIfNecessary() om automatisch de benodigde gegevens van onze server op te halen en te bepalen of het toestemmingsscherm getoond moet worden of niet. Als dat zo is, zal de SDK op dit punt automatisch het toestemmingsscherm tonen, via een WebView gemaakt door onze SDK, die de toestemmingslaag weergeeft met de tekst en knoppen volgens uw CMP-configuraties (gekozen via de Code-ID van uw CMP), de gegevens verzamelt en de toestemmingsinformatie opslaat in het NSUserDefaults/UserPreferences-gebied van het apparaat, zodat de app de gerichte advertenties dienovereenkomstig kan weergeven. 

Houd er rekening mee dat de functionaliteiten die betrekking hebben op het bepalen of toestemming nodig is of niet, evenals de weergave van de toestemmingslaag, afhankelijk zijn van een betrouwbare netwerkverbinding. Als er geen verbinding beschikbaar is of als het mechanisme van opnieuw proberen onze server niet bereikt, retourneert de gebeurtenis didReceiveError een time-outfout en kan de SDK de noodzaak van toestemming dus helemaal niet bepalen, omdat de toestemmingslaag helemaal niet kan worden weergegeven. Zorg ervoor dat uw logica hiermee rekening houdt.

Voorbeeld:

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

Als u besluit om een ​​weergavemodel te gebruiken, ziet het er zo uit:

 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 Verwerking van toestemmingsgegevens van gebruikers

Controleren van toestemmingen van gebruikers

Onze SDK biedt verschillende methoden om toestemmingsinformatie te controleren en op te halen. De belangrijkste methoden worden weergegeven in het onderstaande voorbeeld:

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

Voor meer informatie over de andere methoden verwijzen wij u naar onze volledige API-documentatie

De toestemmingslaag opnieuw openen om de keuzes van de gebruikers te controleren

Om de gebruiker toe te staan ​​zijn keuzes te verifiëren of te wijzigen, kunt u eenvoudig bellen openConsentLayer()

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

Met deze methode wordt de toestemmingslaag weergegeven via hetzelfde WebView-exemplaar dat in de vorige stappen is gemaakt. 

In sommige gevallen kan een native app webviews bevatten om informatie weer te geven, zoals advertenties of content. Om de toestemmingsinformatie van de SDK naar de webview te verzenden, kunt u de toestemmingsstring ophalen met:

_cmpSdkPlugin.exportCMPInfo

Hiermee worden de toestemmingsinformatie en alle verdere gegevens die nodig zijn voor de CMP geëxporteerd. U kunt deze informatie vervolgens doorgeven aan de CMP die zich in uw webview bevindt door deze toe te voegen aan de URL die in de webview wordt aangeroepen.

Als u de toestemmingsreeks anders met behulp van de SDK moet importeren, kunt u het onderstaande voorbeeld gebruiken:

await _cmpSdkPlugin.importCMPInfo(
          'Q1FERkg3QVFERkg3QUFmR01CSVRCQkVnQUFBQUFBQUFBQWlnQUFBQUFBQUEjXzUxXzUyXzUzXzU0XzU1XzU2XyNfczI3ODlfczI3OTBfczI3OTFfczI2OTdfczk3MV9VXyMxLS0tIw'
      )

Integratie met Apple Tracking Transparency (ATT)

Als u tracking of analytics in uw app gebruikt, raden we u aan de handleiding te lezen ATT-implementatie hier.

Een aangepaste lay-out maken

Om een ​​aangepaste weergave van de WKWebView te maken, bijvoorbeeld door de positie of achtergrond te wijzigen, kunt u de configuratie die is doorgegeven aan het ConsentLayerUIConfig-object als volgt wijzigen:

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

Logging

Wanneer u onze iOS SDK gebruikt, kan het nodig zijn om loginformatie te debuggen of analyseren voor verschillende doeleinden. De logs die door onze SDK worden gegenereerd, zijn getagd onder "CMP", zodat u eenvoudig de relevante logs kunt filteren en bekijken. Raadpleeg voor meer informatie deze sectie van onze documentatie.

 

 

Terug naar boven