[ReactNative] 1. consentmanager SDK-Integration
Bitte beachten Sie, dass diese Version des CMP SDK von Grund auf neu erstellt wurde und daher eine Wesentliche Änderung im Vergleich zu Version 2, da alle Methoden umbenannt wurden, ebenso wie die Signaturen, und jetzt auch Rückrufe für fast alle Methoden angeboten werden. Auf alle FälleSie müssen Ihren Code anpassen und Ihre Abhängigkeiten aktualisieren, um sicherzustellen, dass Ihre mobile App wie erwartet funktioniert. Darüber hinaus ist zu beachten, dass dies von der in Ihre App integrierten Version von v2 abhängt. Alle Daten, die von der vorherigen Version unseres SDK auf den Geräten der Benutzer gespeichert wurden, werden gelöscht., wodurch die App gezwungen wird, Erneutes Anzeigen der Einwilligungsebene.
Aufgrund der Beschaffenheit von React Native als Framework und der ständigen, teils widersprüchlichen Anforderungen und Sonderfälle unserer Kundenbasis bieten wir die React Native Bridge zu den zugrunde liegenden nativen SDKs als Ausgangspunkt an, der versucht, alle Anforderungen so umfassend wie möglich zu erfüllen. Sollten Sie aus irgendeinem Grund eine bestimmte Anforderung benötigen, empfehlen wir Ihnen, unsere Repositories zu forken und an Ihre eigenen Bedürfnisse anzupassen. Wir bieten zwei Repositories an, eines für die alte Architektur, und noch einer für den neue Architektur.
Unser React Native SDK ist in Wirklichkeit eine Brücke zur zugrunde liegenden nativen Technologie. iOS kombiniert mit einem nachhaltigen Materialprofil. Android SDKs. Weitere Informationen zu unseren APIs finden Sie in den jeweiligen Plattformversionen.
In diesem Dokument finden Sie allgemeine Informationen zur Integration unseres SDKs in Ihr Projekt. Weitere Details finden Sie in unserer API-Referenzdokumentation. iOS kombiniert mit einem nachhaltigen Materialprofil. Android.
1. Installation
consentmanager SDK ist eine umfassende Lösung für die Verwaltung von Benutzereinwilligungen in mobilen Anwendungen. Dieses SDK wurde für die Einhaltung der DSGVO, die Berücksichtigung von Datenschutzeinstellungen und die Transparenz des Anzeigen-Trackings 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.
Dieses Dokument beschreibt das Installationsverfahren und die Funktionen, die unseren Kunden zur Verfügung gestellt werden, die Apps mit React Native entwickeln, um über unsere React Native Native Bridge auf unser Consent Management CMP SDK zuzugreifen.Weitere Einzelheiten finden Sie in unserer API-Referenz Dokumentation.
1.1 Schritte – Übersicht
-
Integration und Konfiguration:
- Integrieren Sie das SDK in Ihre App.
- Konfigurieren Sie die SDK-Einstellungen entsprechend Ihren Anforderungen.
-
Erstellen einer Instanz und Anzeigen des Consent Layers:
- Erstellen Sie beim Start der App eine Instanz von
CMPManagerKlasse. Diese Instanz übernimmt den Einwilligungsprozess. - Das SDK zeigt bei Bedarf automatisch den Zustimmungsbildschirm an.
- Erstellen Sie beim Start der App eine Instanz von
-
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.2 Konfigurations-API im Überblick
setUrlConfig({ id, domain, language, appName, noHash? = false })
setWebViewConfig({
position? = fullScreen,
customRect? (required when position = custom),
cornerRadius? = 5,
respectsSafeArea? = true,
allowsOrientationChanges? = true,
backgroundStyle? = dimmed(black, 0.5)
})
setATTStatus(status) // iOS only; ATTStatus enum (0–3)WebViewPosition:FullScreen|HalfScreenTop|HalfScreenBottom|Custom-
BackgroundStyleType(über den BackgroundStyle-Helper):dimmed(color?, opacity?)color(color)blur(blurEffectStyle: light | dark | extraLight)none
ATTStatus: NotDetermined (0), Restricted (1), Denied (2), Authorized (3)
1.3 Integration und Konfiguration
NPM
Wir haben unsere React Native Bridge sowohl auf NPM als auch auf (alt kombiniert mit einem nachhaltigen Materialprofil. neuer Bogen) und unsere öffentlichen Repositories (Tarballs zum direkten Verlinken finden Sie hier) alt kombiniert mit einem nachhaltigen Materialprofil. neuer BogenFühren Sie diese Zeile in Ihrem Terminal aus:
npm install cm-sdk-react-native-v3 // For the old architecture
npm install cm-sdk-react-native-v3-new-arch // For the new architectureVerlinkung (React Native 0.59 und niedriger)
Wenn Sie React Native 0.59 oder niedriger verwenden, müssen Sie die nativen Module manuell verknüpfen:
react-native link cm-sdk-react-native-v31.4 Erstellen einer Instanz und Anzeigen der Zustimmungsebene
Sie müssen Ihre CMP-Informationen über die setUrlConfig Methode, die Ihre CMP-Konfiguration, wie Code-ID und Standardsprache, verwaltet, und setWebViewConfig, Dadurch wird das Aussehen der WebView konfiguriert, die die Zustimmungsschicht anzeigt. Danach können Sie die Methode verwenden. checkAndOpen(false) um die notwendigen Daten automatisch von unserem Server abzurufen und zu bestimmen, ob der Einwilligungsbildschirm angezeigt werden muss oder nicht. boolean Der Parameter bestimmt, ob die Zustimmungsebene auf der Einstellungsseite geöffnet wird (true) die es den Nutzern ermöglicht, ihre Auswahl anzupassen, oder ob die Zustimmungsebene angezeigt wird (false) die Standard-Designseite Ihres CMP.
Bitte beachten Sie, dass die Funktionalitäten im Zusammenhang mit der Feststellung, ob eine Einwilligung erforderlich ist oder nicht, sowie der Anzeige der Einwilligungsebene, abhängig von einer zuverlässigen Netzwerkverbindung. Wenn keine Verbindung verfügbar ist oder der Wiederholungsmechanismus unseren Server nicht erreicht, didReceiveError Das Ereignis wird einen Timeout-Fehler zurückgeben. und somit wird das SDK überhaupt nicht in der Lage sein, die Notwendigkeit einer Einwilligung festzustellen. da es nicht in der Lage sein wird, die Zustimmungsebene anzuzeigen. Bitte stellen Sie sicher, dass Ihre Logik dies berücksichtigt.
Ejemplo:
import {
setUrlConfig,
setWebViewConfig,
setATTStatus,
BackgroundStyle,
BackgroundStyleType,
BlurEffectStyle,
WebViewPosition,
ATTStatus,
} from 'cm-sdk-react-native-v3';
const HomeScreen: React.FC = () => {
const [isLoading, setIsLoading] = useState(true);
const [toastMessage, setToastMessage] = useState<string | null>(null);
useEffect(() => {
initializeConsent();
}, []);
const initializeConsent = async () => {
try {
await setWebViewConfig({
position: WebViewPosition.HalfScreenBottom,
backgroundStyle: BackgroundStyle.blur(BlurEffectStyle.Dark),
cornerRadius: 25,
respectsSafeArea: true,
allowsOrientationChanges: true,
// customRect is required if you pick WebViewPosition.Custom (iOS only;
// Android falls back)
});
await setUrlConfig({
id: '<your-Code-id>',
domain: 'delivery.consentmanager.net',
language: 'EN',
appName: 'MyApp',
noHash: true, // optional; defaults to false
});
await CmSdkReactNativeV3.checkAndOpen(false);
console.log('CMPManager initialized and open consent layer opened if necessary');
} catch (error) {
console.error('Error initializing consent:', error);
} finally {
setIsLoading(false);
}
};Das SDK zeigt an dieser Stelle automatisch den Einwilligungsbildschirm (Cookie-Banner) über einen WebView Erstellt von unserem SDK, das die Einwilligungsebene mit dem Text und den Schaltflächen gemäß Ihren CMP-Konfigurationen (ausgewählt über die Code-ID Ihres CMP) anzeigt, die Daten sammelt und die Einwilligungsinformationen im Bereich NSUserDefaults/UserPreferences des Geräts speichert, damit die anderen SDKs sie lesen können.
2. Verarbeitung der Einwilligungsdaten der Nutzer
2.1 Überprüfung der Einwilligungen der Nutzer
Unser SDK bietet verschiedene Methoden zum Prüfen und Abrufen von Einwilligungsinformationen. Die wichtigste Methode ist: getUserStatuswie im folgenden Beispiel dargestellt. Weitere Informationen finden Sie hier:
// 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.
const buttons = [
{
title: 'Get User Status',
onPress: () => handleApiCall(
CmSdkReactNativeV3.getUserStatus,
(result) => `User Status: ${JSON.stringify(result).substring(0, 100)}...`,
'Failed to get user status',
'getUserStatus'
),
},Weitere Informationen zu den anderen Methoden finden Sie in unserer vollständigen API-Dokumentation der zugrunde liegenden nativen Schnittstelle. iOS kombiniert mit einem nachhaltigen Materialprofil. Android SDKs.
2.2 Erneutes Öffnen der Einwilligungsschicht zur Überprüfung der Nutzerauswahl
Um dem Benutzer die Möglichkeit zu geben, seine Auswahl zu überprüfen oder zu ändern, können Sie einfach anrufen forceOpen()
const buttons = [
{
title: 'Force Open Consent Layer',
onPress: () => handleApiCall(
() => CmSdkReactNativeV3.forceOpen(false),
() => 'Consent Layer opened'
),
},
]Diese Methode zeigt die Zustimmungsebene über dieselbe WebView-Instanz an, die in den vorherigen Schritten erstellt wurde.
2.3 Import/Export von Einwilligungsinformationen an andere Quellen
In manchen Fällen kann eine native App Webviews enthalten, um Informationen wie Werbung oder Inhalte anzuzeigen. Um die Einwilligungsinformationen vom SDK an die Webview zu übertragen und doppelte Cookie-Banner zu vermeiden, können Sie die Einwilligungszeichenfolge wie folgt abrufen: exportCMPInfoDadurch wird die Einwilligungszeichenfolge zusammen mit der Einwilligung und allen weiteren vom CMP benötigten Daten exportiert. Sie können diese Informationen dann an den in Ihrer Webansicht verwendeten CMP übergeben, indem Sie sie der in der Webansicht aufgerufenen URL hinzufügen. Weitere Informationen finden Sie in unserer Datenschutzerklärung. dedizierte Seite für diesen Anwendungsfall.
Ein weiterer Anwendungsfall ist die geräteübergreifende Einwilligung, bei der Sie die Einwilligung aus einer anderen Quelle auf das Gerät importieren. In diesem Fall ersetzen Sie die Einwilligung. checkAndOpen by importCMPInfo mit der Einwilligungszeichenfolge, die Sie beispielsweise von der Website abgerufen haben.
2.4 Ereignis-Listener
Das SDK stellt mehrere Ereignis-Listener bereit, mit denen Sie auf verschiedene Ereignisse während des Einwilligungsprozesses reagieren können. Mithilfe dieser Listener können Sie Benutzerinteraktionen verfolgen, Fehler behandeln und den Status Ihrer App mit dem Lebenszyklus der Einwilligungsschicht synchronisieren.
Alle Listener geben ein Abonnementobjekt zurück, mit dem der Listener entfernt werden kann, sobald er nicht mehr benötigt wird. Um einen Listener zu entfernen, rufen Sie die Methode `.remove()` des zurückgegebenen Abonnements auf.
Verfügbare Zuhörer für die Veranstaltung
addConsentListener(callback)
Dieser Listener wird ausgelöst, wenn der Benutzer seine Einwilligungsentscheidungen übermittelt (entweder durch Akzeptieren, Ablehnen oder Anpassen seiner Präferenzen).
Parameter:
callback: (consent: string, jsonObject: Object) => voidconsentDie Einwilligungszeichenfolge im IAB-TCF-FormatjsonObjectEin JSON-Objekt mit detaillierten Einwilligungsinformationen
Ejemplo:
import { addConsentListener } from 'cm-sdk-react-native-v3';
const consentSubscription = addConsentListener((consent, jsonObject) => {
console.log('Consent received:', consent);
console.log('Consent details:', jsonObject);
// Handle the consent data in your app
});
// To remove the listener later:
// consentSubscription.remove();
addShowConsentLayerListener(callback)
Dieser Listener wird ausgelöst, wenn dem Benutzer die Zustimmungsebene angezeigt wird.
Parameter:
callback: () => void
Ejemplo:
import { addShowConsentLayerListener } from 'cm-sdk-react-native-v3';
const showSubscription = addShowConsentLayerListener(() => {
console.log('Consent layer is now visible');
// Pause analytics or other tracking activities
});
addCloseConsentLayerListener(callback)
Dieser Listener wird ausgelöst, wenn die Zustimmungsschicht geschlossen wird, unabhängig davon, ob der Benutzer eine Auswahl getroffen oder sie verworfen hat.
Parameter:
callback: () => void
Ejemplo:
import { addCloseConsentLayerListener } from 'cm-sdk-react-native-v3';
const closeSubscription = addCloseConsentLayerListener(() => {
console.log('Consent layer has been closed');
// Resume normal app flow
});
addErrorListener(callback)
Dieser Listener wird ausgelöst, wenn während des Zustimmungsprozesses ein Fehler auftritt, z. B. Netzwerkfehler, Timeout-Fehler oder Konfigurationsprobleme.
Parameter:
callback: (error: string) => voiderrorEine Zeichenkette, die den aufgetretenen Fehler beschreibt.
Ejemplo:
import { addErrorListener } from 'cm-sdk-react-native-v3';
const errorSubscription = addErrorListener((error) => {
console.error('CMP Error:', error);
// Handle the error appropriately in your app
// For example, show a fallback UI or retry logic
});
addClickLinkListener(callback)
Dieser Listener wird ausgelöst, wenn der Benutzer auf einen Link innerhalb der Einwilligungsschicht klickt (z. B. auf Links zur Datenschutzerklärung oder zu den Nutzungsbedingungen).
Parameter:
callback: (url: string) => voidurlDie angeklickte URL
Ejemplo:
import { addClickLinkListener } from 'cm-sdk-react-native-v3';
const linkSubscription = addClickLinkListener((url) => {
console.log('User clicked link:', url);
// Optionally handle the link in a custom way
// For example, open in an in-app browser
});3. 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.
4. 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)5. 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.
6. Einschränkungen der Plattform
- AAndroid ignoriert derzeit backgroundStyle-Überschreibungen und customRect/custom Position; es wird immer ein abgedunkelter Vollbildhintergrund angezeigt.
- iOS unterstützt die Modi „dimmed“, „color“, „blur“, „none“ und „customRect“.
