[Trzepotanie] 1. consentmanager Integracja SDK
W tym dokumencie znajdziesz ogólne informacje na temat integracji naszego SDK z Twoim projektem. Więcej szczegółów znajdziesz w naszym Dokumentacja API dokumentacja.
1. Instalacja
consentmanager SDK to kompleksowe rozwiązanie do zarządzania zgodą użytkownika w aplikacjach mobilnych. Zaprojektowany do obsługi zgodności z GDPR, preferencji prywatności użytkownika i przejrzystości śledzenia reklam, ten SDK zapewnia bezproblemową integrację z platformami iOS i Android. Ponadto oferuje wtyczki/mostki wrapper dla React Native, Flutter i Unity, co czyni go wszechstronnym w różnych środowiskach programistycznych.
Kroki — opis wysokiego poziomu
-
Integracja i konfiguracja:
- Zintegruj pakiet SDK ze swoją aplikacją.
- Skonfiguruj ustawienia SDK zgodnie ze swoimi potrzebami.
-
Tworzenie instancji i wyświetlanie warstwy zgody:
- Podczas uruchamiania aplikacji utwórz instancję
CMPManagerklasa. Ta instancja będzie obsługiwać proces wyrażania zgody. - W razie potrzeby zestaw SDK automatycznie wyświetli ekran zgody.
- Podczas uruchamiania aplikacji utwórz instancję
-
Przetwarzanie danych zgody użytkownika:
- Po zebraniu zgód informacje są przechowywane i dostępne do zapytania za pośrednictwem różnych właściwości i metod udostępnianych przez nasz zestaw SDK. Będziesz mieć informacje o odrzuconych lub zaakceptowanych zgodach, dostawcach i celach.
1.1 Integracja i konfiguracja
Biblioteka wrapperów dla Fluttera jest dostępna na pub.dev. W wierszu poleceń lub oknie terminala uruchom:
flutter pub add cm_cmp_sdk_v3Spowoduje to dodanie takiej linii do pliku pubspec.yaml pakietu (i uruchomienie implicit flutter pub get):
dependencies:
cm_cmp_sdk_v3: ^3.2.0Alternatywnie, Twój edytor może obsługiwać flutter pub get. Aby dowiedzieć się więcej, przejrzyj dokumentację swojego edytora.
Upewnij się również, że build.gradle plik wewnątrz android/app folder twojego projektu ma zadeklarowaną właściwą zależność. Jest to Flutter/Dart Native Bridge, więc wszystkie zależności muszą być zsynchronizowane. To samo dotyczy iOS: upewnij się, że twój podspec plik odzwierciedla właściwą zależność.
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
Teraz w swoim 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 kodzie musisz utworzyć instancję klasy CMPManager. Musisz skonfigurować dwa obiekty, które zostaną przekazane do metody getInstance: UrlConfig, który obsługuje konfigurację CMP, taką jak Code-ID i domyślny język, i ConsentLayerUIConfig. który skonfiguruje wygląd WebView, który wyświetli warstwę zgody. Następnie możesz użyć metody checkWithServerAndOpenIfNecessary() aby automatycznie pobrać niezbędne dane z naszego serwera i określić, czy ekran zgody musi zostać wyświetlony, czy nie. Jeśli tak, SDK automatycznie wyświetli ekran zgody w tym momencie, za pośrednictwem WebView utworzony przez nasz zestaw SDK, który wyświetli warstwę zgody z tekstem i przyciskami zgodnie z konfiguracją CMP (wybraną za pomocą identyfikatora kodu CMP), zbierze dane i zapisze informacje o zgodzie w obszarze NSUserDefaults/UserPreferences urządzenia, dzięki czemu aplikacja będzie mogła wyświetlać odpowiednie reklamy.
Należy pamiętać, że funkcjonalności związane z określeniem, czy zgoda jest potrzebna, czy nie, a także wyświetlanie warstwy zgody zależą od niezawodnego połączenia sieciowego. Jeśli nie ma dostępnego połączenia lub jeśli mechanizm ponownej próby nie dotrze do naszego serwera, zdarzenie didReceiveError zwróci błąd limitu czasu, a zatem SDK nie będzie w stanie określić potrzeby zgody, ponieważ nie będzie w stanie wyświetlić warstwy zgody. Upewnij się, że Twoja logika to uwzględnia.
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ę na użycie modelu widoku, będzie on wyglądał 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: $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 Przetwarzanie danych zgody użytkowników
Sprawdzanie zgód użytkowników
Nasz SDK oferuje różne metody sprawdzania i pobierania informacji o zgodzie. Główne metody są wyświetlane 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ą wersją Dokumentacja 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 zadzwonić pod numer openConsentLayer()
void openConsentLayer() async {
await _cmpSdkPlugin.forceOpen();
notifyListeners();
}
Ta metoda wyświetli warstwę zgody za pośrednictwem tej samej instancji WebView, która została utworzona w poprzednich krokach.
Importowanie/eksportowanie informacji o zgodzie do innych źródeł
W niektórych przypadkach aplikacja natywna może zawierać webviews w celu wyświetlania informacji, takich jak reklamy lub treści. Aby przesłać informacje o zgodzie z SDK do webview, możesz pobrać ciąg zgody za pomocą:
_cmpSdkPlugin.exportCMPInfoSpowoduje to wyeksportowanie informacji o zgodzie i wszystkich dalszych danych, które są potrzebne CMP. Następnie możesz przekazać te informacje do CMP, który znajduje się w Twoim widoku internetowym, dodając je do adresu URL, który jest wywoływany w widoku internetowym.
Jeśli w przeciwnym razie musisz zaimportować ciąg zgody za pomocą zestawu SDK, możesz skorzystać z poniższego przykładu:
await _cmpSdkPlugin.importCMPInfo(
'Q1FERkg3QVFERkg3QUFmR01CSVRCQkVnQUFBQUFBQUFBQWlnQUFBQUFBQUEjXzUxXzUyXzUzXzU0XzU1XzU2XyNfczI3ODlfczI3OTBfczI3OTFfczI2OTdfczk3MV9VXyMxLS0tIw'
)Integracja z Apple Tracking Transparency (ATT)
Jeśli korzystasz ze śledzenia lub analityki w swojej aplikacji, zalecamy zapoznanie się z przewodnikiem Implementacja ATT tutaj.
Tworzenie niestandardowego układu
Aby utworzyć niestandardowy widok WKWebView, na przykład zmienić jego położenie lub tło, możesz zmienić 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
Podczas korzystania z naszego zestawu SDK dla systemu iOS może zaistnieć potrzeba debugowania lub analizowania informacji z dziennika w różnych celach. Dzienniki generowane przez nasz zestaw SDK są oznaczone jako „CMP”, co pozwala na łatwe filtrowanie i przeglądanie tylko odpowiednich dzienników. Aby uzyskać więcej informacji, zapoznaj się z w tej sekcji naszej dokumentacji.
