[Flutter] 1. integration av consentmanager SDK

I det här dokumentet hittar du allmän information om hur du integrerar vårt SDK i ditt projekt. För mer information, se vår API-referensdokumentation. 

1. Installation

consentmanager SDK är en heltäckande lösning för hantering av användarens samtycke i mobilapplikationer. Detta SDK är utformat för att hantera GDPR-efterlevnad, användarnas integritetsinställningar och transparens i annonsspårning, och erbjuder en smidig integration för iOS- och Android-plattformar. Dessutom erbjuder det wrapper-plugins/bryggor för React Native, Flutter och Unity, vilket gör det mångsidigt i olika utvecklingsmiljöer.

Steg – Översiktlig beskrivning

  1. Integration och konfiguration:

    • Integrera SDK i din app.
    • Konfigurera SDK-inställningarna efter dina behov.
  2. Skapa en instans och visa samtyckeslagret:

    • När appen startas, skapa en instans av klassen CMPManager klassen. Denna instans hanterar samtyckesprocessen.
    • SDK:n visar automatiskt samtyckesskärmen om det behövs.
  3. Behandling av användarnas samtyckesdata:

    • När samtycken har samlats in lagras informationen och kan hämtas via olika egenskaper och metoder som tillhandahålls av vårt SDK. Du får information om avvisade eller godkända samtycken, leverantörer och syften.

1.1 Integration och konfiguration

Wrapper-biblioteket för Flutter finns tillgängligt på pub.dev. I kommandoraden eller terminalfönstret kör du:

flutter pub add cm_cmp_sdk_v3

Detta lägger till en rad som denna i ditt pakets pubspec.yaml (och kör en implicit flutter pub get):

dependencies:  
	cm_cmp_sdk_v3: ^3.8.0

Alternativt kanske din redigerare stöder flutter pub get. Kolla dokumentationen för din redigerare för att lära dig mer.

Se också till att filen build.gradle i mappen android/app i ditt projekt har rätt beroende deklarerat. Detta är en Flutter/Dart Native Bridge, så alla beroenden måste vara synkroniserade. Detsamma gäller för iOS: se till att filen podspec återspeglar rätt beroende.

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"
Importera

Nu kan du använda följande i din Dart-kod:

import 'package:cm_cmp_sdk_v3/cm_cmp_sdk_v3.dart';

1.2 Skapa en instans och visa samtyckeslager

I din kod måste du skapa en instans av klassen CMPManager. Du måste konfigurera två objekt som ska skickas till metoden getInstance: UrlConfig, som hanterar din CMP-konfiguration, såsom Code-ID och standardspråk, samt ConsentLayerUIConfig. som kommer att konfigurera utseendet på WebView som visar samtyckeslagret. Därefter är du redo att använda metoden checkWithServerAndOpenIfNecessary() för att automatiskt hämta nödvändiga data från vår server och avgöra om samtyckesskärmen behöver visas eller inte. Om så är fallet kommer SDK automatiskt att visa samtyckesskärmen vid denna punkt, via en WebView som skapats av vårt SDK, vilket kommer att visa samtyckeslagret med text och knappar enligt dina CMP-konfigurationer (valda via Code-ID för din CMP), samla in data och spara samtyckesinformationen i området NSUserDefaults/UserPreferences på enheten, så att appen kan visa riktade annonser därefter. 

Observera att funktionerna för att avgöra om samtycke krävs eller inte, liksom visningen av samtyckeslagret, är beroende av en pålitlig nätverksanslutning. Om det inte finns någon anslutning tillgänglig eller om mekanismen för omförsök inte når vår server, kommer händelsen didReceiveError att returnera ett timeout-fel, och därmed kommer SDK:t att vara helt oförmöget att avgöra behovet av samtycke, eftersom det kommer att vara helt oförmöget att visa samtyckeslagret. Se till att din logik tar hänsyn till detta.

Exempel:

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

Om du väljer att använda en visningsmodell skulle det se ut så här:

 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 Behandling av användarnas samtyckesuppgifter

Kontrollera användarnas samtycke

Vårt SDK erbjuder olika metoder för att kontrollera och hämta samtyckesinformation. De viktigaste metoderna visas i exemplet nedan:

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

För mer information om de andra metoderna, se vår fullständiga API-dokumentation

Öppna Consent Layer igen för att kontrollera användarnas val

För att användaren ska kunna kontrollera eller ändra sina val kan du helt enkelt anropa openConsentLayer()

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

Denna metod visar samtyckeslagret via samma WebView-instans som skapades i de föregående stegen. 

Importera/exportera samtyckesinformation till andra källor

I vissa fall kan en native-app innehålla webviews för att visa information, såsom reklam eller innehåll. För att överföra samtyckesinformationen från SDK till webviewen kan du hämta samtyckessträngen med hjälp av:

_cmpSdkPlugin.exportCMPInfo

Detta exporterar samtyckesinformationen och all ytterligare data som behövs av CMP. Du kan sedan vidarebefordra denna information till CMP som finns i din webbvy genom att lägga till den i den URL som anropas i webbvyn.

Om du istället behöver importera samtyckessträngen med hjälp av SDK kan du använda exemplet nedan:

await _cmpSdkPlugin.importCMPInfo(
          'Q1FERkg3QVFERkg3QUFmR01CSVRCQkVnQUFBQUFBQUFBQWlnQUFBQUFBQUEjXzUxXzUyXzUzXzU0XzU1XzU2XyNfczI3ODlfczI3OTBfczI3OTFfczI2OTdfczk3MV9VXyMxLS0tIw'
      )

Integration med Apple Tracking Transparency (ATT)

Om du använder spårning eller analys i din app rekommenderar vi att du läser guiden om ATT-implementering här.

Skapa en anpassad layout

För att skapa en anpassad vy av WKWebView, till exempel genom att ändra dess placering eller bakgrund, kan du ändra konfigurationen som skickas till ConsentLayerUIConfig-objektet enligt nedan:

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

Inloggning

När du använder vårt iOS SDK kan du behöva felsöka eller analysera logginformation för olika ändamål. Loggarna som genereras av vårt SDK är taggade under "CMP", vilket gör att du enkelt kan filtrera och visa endast de relevanta loggarna. För mer information, se detta avsnitt i vår dokumentation.

 

 

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!