[ReactNative] 1. consentmanager SDK-Integration
In diesem Dokument finden Sie allgemeine Informationen zur Integration unseres SDK in Ihr Projekt. Weitere Einzelheiten entnehmen Sie bitte unserer API-Referenz Dokumentation.
1. Installation
consentmanager SDK ist eine umfassende Lösung für die Verwaltung der Benutzereinwilligung in mobilen Anwendungen. Dieses SDK wurde für die Einhaltung der DSGVO, die Berücksichtigung von Benutzerdatenschutzeinstellungen und die Transparenz der Anzeigenverfolgung 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.
Schritte – Beschreibung auf hoher Ebene
-
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
CMPManager
Klasse. 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.1 Integration und Konfiguration
NPM
Führen Sie diese Zeile auf Ihrem Terminal aus:
npm install cmp-sdk-react-native-v3
Verlinkung (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 cmp-sdk-react-native-v3
1.2 Erstellen einer Instanz und Anzeigen der Zustimmungsebene
Innerhalb Ihres Codes müssen Sie eine Instanz der Klasse erstellen CMPManager
Sie müssen zwei Objekte einrichten, die an die Methode getInstance übergeben werden: UrlConfig
, das Ihre CMP-Konfiguration verwaltet, wie Code-ID und Standardsprache, und ConsentLayerUIConfig
. Dadurch wird das Aussehen der WebView konfiguriert, die die Zustimmungsebene anzeigt. Danach können Sie die Methode verwenden checkWithServerAndOpenIfNecessary()
um automatisch die erforderlichen Daten von unserem Server abzurufen und zu bestimmen, ob der Zustimmungsbildschirm angezeigt werden muss oder nicht. Wenn ja, zeigt das SDK den Zustimmungsbildschirm an dieser Stelle automatisch an, und zwar über einen WebView
Erstellt durch unser SDK, das die Zustimmungsebene mit dem Text und den Schaltflächen entsprechend Ihren CMP-Konfigurationen anzeigt (ausgewählt über die Code-ID Ihres CMP), die Daten sammelt und die Zustimmungsinformationen im Bereich NSUserDefaults/UserPreferences des Geräts speichert, damit die App die zielgerichteten Anzeigen entsprechend anzeigen kann.
Bitte beachten Sie, dass die Funktionen zur Bestimmung, ob eine Zustimmung erforderlich ist oder nicht, sowie die Anzeige der Zustimmungsebene von einer zuverlässigen Netzwerkverbindung abhängen. Wenn keine Verbindung verfügbar ist oder der Wiederholungsmechanismus unseren Server nicht erreichen kann, gibt das Ereignis didReceiveError einen Timeout-Fehler zurück. Das SDK kann daher überhaupt nicht feststellen, ob eine Zustimmung erforderlich ist, da es die Zustimmungsebene überhaupt nicht anzeigen kann. Bitte stellen Sie sicher, dass Ihre Logik dies berücksichtigt.
Ejemplo:
const HomeScreen: React.FC = () => {
const [isLoading, setIsLoading] = useState(true);
const [toastMessage, setToastMessage] = useState<string | null>(null);
useEffect(() => {
initializeConsent();
}, []);
const initializeConsent = async () => {
try {
await CmSdkReactNativeV3.setUrlConfig({
id: '09cb5dca91e6b',
domain: 'delivery.consentmanager.net',
language: 'EN',
appName: 'CMDemoAppReactNative',
});
await CmSdkReactNativeV3.setWebViewConfig({
position: 'fullScreen',
backgroundStyle: { type: 'dimmed', color: 'black', opacity: 0.5 },
cornerRadius: 5,
respectsSafeArea: true,
allowsOrientationChanges: true,
});
await CmSdkReactNativeV3.checkWithServerAndOpenIfNecessary();
console.log('CMPManager initialized and open consent layer opened if necessary');
} catch (error) {
console.error('Error initializing consent:', error);
} finally {
setIsLoading(false);
}
};
1.3 Verarbeitung von Einwilligungsdaten der Nutzer
Überprüfung der Einwilligungen der Benutzer
Unser SDK bietet verschiedene Methoden zum Überprüfen und Abrufen von Einwilligungsinformationen. Die wichtigsten Methoden werden im folgenden Beispiel angezeigt:
// 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.
// Helper function
const handleApiCall = async (
apiCall: () => Promise<any>,
successMessage: (result: any) => string,
errorMessage: string = 'An error occurred'
) => {
try {
const result = await apiCall();
showToast(successMessage(result));
} catch (error) {
showToast(`${errorMessage}: ${error}`);
}
};
const buttons = [
{
title: 'Has User Choice?',
onPress: () => handleApiCall(
CmSdkReactNativeV3.hasUserChoice,
(result) => `Has User Choice: ${result}`
),
},
{
title: 'Has Purpose ID c53?',
onPress: () => handleApiCall(
() => CmSdkReactNativeV3.hasPurposeConsent('c53'),
(result) => `Has Purpose: ${result}`
),
},
{
title: 'Has Vendor ID s2789?',
onPress: () => handleApiCall(
() => CmSdkReactNativeV3.hasVendorConsent('s2789'),
(result) => `Has Vendor: ${result}`
),
},
]
Weitere Informationen zu den anderen Methoden finden Sie in unserem ausführlichen API-Dokumentation.
Erneutes Öffnen des Consent Layers, um die Auswahl der Benutzer zu überprüfen
Um dem Benutzer die Möglichkeit zu geben, seine Auswahl zu überprüfen oder zu ändern, können Sie einfach anrufen openConsentLayer()
CmSdkReactNativeV3.openConsentLayer
Diese Methode zeigt die Zustimmungsebene über dieselbe WebView-Instanz an, die in den vorherigen Schritten erstellt wurde.
Importieren/Exportieren von Einwilligungsinformationen in andere Quellen
In einigen Fällen kann eine native App Webviews enthalten, um Informationen wie Werbung oder Inhalte anzuzeigen. Um die Zustimmungsinformationen vom SDK an die Webview zu übertragen, können Sie die Zustimmungszeichenfolge wie folgt abrufen:
CmSdkReactNativeV3.exportCMPInfo
Dadurch werden die Einwilligungsinformationen und alle weiteren Daten exportiert, die das CMP benötigt. Sie können diese Informationen dann an das CMP weitergeben, das sich in Ihrer Webansicht befindet, indem Sie sie der URL hinzufügen, die in der Webansicht aufgerufen wird.
Wenn Sie die Zustimmungszeichenfolge andernfalls mithilfe des SDK importieren müssen, können Sie das folgende Beispiel verwenden:
() => CmSdkReactNativeV3.importCMPInfo(
'Q1FERkg3QVFERkg3QUFmR01CSVRCQkVnQUFBQUFBQUFBQWlnQUFBQUFBQUEjXzUxXzUyXzUzXzU0XzU1XzU2XyNfczI3ODlfczI3OTBfczI3OTFfczI2OTdfczk3MV9VXyMxLS0tIw'
)
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.
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)
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.