1. Instalacja

consentmanager SDK to kompleksowe rozwiązanie do zarządzania zgodą użytkownika w aplikacjach mobilnych. Zaprojektowany z myślą o zgodności z RODO, preferencjach użytkowników dotyczących prywatności oraz przejrzystości śledzenia reklam, ten SDK zapewnia płynną integrację z platformami iOS i Android. Dodatkowo oferuje wtyczki/mostki dla React Native, Flutter i Unity, dzięki czemu jest wszechstronny w różnych środowiskach programistycznych.

Kroki – ogólny opis

1. Integracja i konfiguracja:

   • Zintegruj SDK ze swoją aplikacją.
   • Skonfiguruj ustawienia SDK zgodnie ze swoimi potrzebami.

2. Tworzenie instancji i wyświetlanie warstwy zgody:

   • Po uruchomieniu aplikacji utwórz instancję klasy CMPManager klasy. Instancja ta będzie obsługiwać proces uzyskiwania zgody.
   • W razie potrzeby SDK automatycznie wyświetli ekran zgody.

3. Przetwarzanie danych dotyczących zgody użytkownika:

   • Po zebraniu zgód informacje są przechowywane i dostępne do wyszukiwania za pomocą różnych właściwości i metod udostępnianych przez nasz SDK. Będziesz mieć informacje o odrzuconych lub zaakceptowanych zgodach, dostawcach i celach.

1.1 Integracja i konfiguracja

Biblioteka opakowująca dla Fluttera jest dostępna na pub.dev. W wierszu poleceń lub oknie terminala uruchom:

flutter pub add cm_cmp_sdk_v3

Spowoduje to dodanie linii takiej jak ta do pliku pubspec.yaml Twojego pakietu (i uruchomienie niejawnego flutter pub get):

dependencies:  
	cm_cmp_sdk_v3: ^3.8.0

Alternatywnie, Twój edytor może obsługiwać flutter pub get. Sprawdź dokumentację swojego edytora, aby dowiedzieć się więcej.

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"

Importuj

Teraz w kodzie Dart możesz użyć:

import 'package:cm_cmp_sdk_v3/cm_cmp_sdk_v3.dart';

1.2 Tworzenie instancji i wyświetlanie warstwy zgody

W swoim kodzie musisz utworzyć instancję klasy CMPManager. Musisz skonfigurować dwa obiekty, które zostaną przekazane do metody getInstance: UrlConfig, która obsługuje konfigurację CMP, taką jak identyfikator kodu i domyślny język, oraz ConsentLayerUIConfig, która skonfiguruje wygląd WebView, w którym wyświetlona zostanie warstwa zgody. Następnie możesz użyć metody checkWithServerAndOpenIfNecessary() , aby automatycznie pobrać niezbędne dane z naszego serwera i ustalić, czy ekran zgody musi zostać wyświetlony, czy nie. Jeśli tak, SDK automatycznie wyświetli w tym momencie ekran zgody za pośrednictwem WebView utworzonego przez nasz SDK, który wyświetli warstwę zgody z tekstem i przyciskami zgodnie z konfiguracjami CMP (wybranymi za pomocą identyfikatora Code-ID Twojego CMP), zbierze dane i zapisze informacje o zgodzie w obszarze NSUserDefaults/UserPreferences urządzenia, dzięki czemu aplikacja będzie mogła odpowiednio wyświetlać reklamy ukierunkowane. 

Przykład:

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

Jeśli zdecydujesz się użyć modelu widoku, będzie to wyglądało następująco:

 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 Przetwarzanie danych dotyczących zgody użytkowników

Sprawdzanie zgód użytkowników

Nasze SDK oferuje różne metody sprawdzania i pobierania informacji o zgodzie. Główne metody przedstawiono w poniższym przykładzie:

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

Aby uzyskać więcej informacji na temat innych metod, zapoznaj się z naszą pełną dokumentacją API. 

Ponowne otwarcie warstwy zgody w celu sprawdzenia wyborów użytkowników

Aby umożliwić użytkownikowi sprawdzenie lub zmianę swoich wyborów, wystarczy po prostu wywołać openConsentLayer()

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

Ta metoda wyświetli warstwę zgody za pośrednictwem tej samej instancji WebView utworzonej w poprzednich krokach. 

Importowanie/eksportowanie informacji o zgodzie do innych źródeł

W niektórych przypadkach aplikacja natywna może zawierać widoki internetowe w celu wyświetlania informacji, takich jak reklamy lub treści. Aby przesłać informacje o zgodzie z SDK do widoku internetowego, możesz pobrać ciąg znaków zgody za pomocą:

_cmpSdkPlugin.exportCMPInfo

Spowoduje to wyeksportowanie informacji o zgodzie oraz wszystkich dalszych danych potrzebnych CMP. Następnie możesz przekazać te informacje do CMP znajdującego się w Twoim widoku internetowym, dodając je do adresu URL wywoływanego w widoku internetowym.

Jeśli natomiast musisz zaimportować ciąg znaków zgody za pomocą SDK, możesz skorzystać z poniższego przykładu:

await _cmpSdkPlugin.importCMPInfo(
          'Q1FERkg3QVFERkg3QUFmR01CSVRCQkVnQUFBQUFBQUFBQWlnQUFBQUFBQUEjXzUxXzUyXzUzXzU0XzU1XzU2XyNfczI3ODlfczI3OTBfczI3OTFfczI2OTdfczk3MV9VXyMxLS0tIw'
      )

Integracja z Apple Tracking Transparency (ATT)

Jeśli w swojej aplikacji korzystasz z narzędzi do śledzenia lub analityki, zalecamy zapoznanie się z przewodnikiem dotyczącym wdrażania ATT, dostępnym tutaj.

Tworzenie niestandardowego układu

Aby stworzyć spersonalizowany widok WKWebView, na przykład zmieniając jego położenie lub tło, możesz zmodyfikować konfigurację przekazaną do obiektu ConsentLayerUIConfig w następujący sposób:

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

Logowanie

Korzystając z naszego SDK dla iOS, możesz potrzebować debugowania lub analizy informacji z logów w różnych celach. Logi generowane przez nasze SDK są oznaczone tagiem „CMP”, co pozwala łatwo filtrować i wyświetlać tylko te logi, które są istotne. Więcej informacji znajdziesz w tej sekcji naszej dokumentacji.