Leading Consent Management Platform

Compliant with GDPR, CCPA, COPPA, LGPD, PECR, PDPA, PIPEDA, and more.

Theme

So integrieren Sie das UniConsent CMP SDK für React Native

Diese Anleitung erklärt, wie Sie das UniConsent CMP SDK in Ihre React Native-Anwendung integrieren, um das GDPR IAB TCF 2.3 Consent Management zu handhaben.

Eine Demo-App mit integriertem SDK finden Sie im Verzeichnis UniConsentDemo, das zusammen mit dem SDK-Paket bereitgestellt wird.

Voraussetzungen

Ein UniConsent CMP-Plan, der Mobile App-Unterstützung beinhaltet.
Das UniConsent SDK-Paket für React Native (z. B. uniconsent-react-native-sdk-26.2.0.zip), heruntergeladen aus Ihrem UniConsent-Dashboard oder vom Support erhalten.
Eine funktionierende React Native-Entwicklungsumgebung.

Erste Schritte (Installation)

SDK-Paket installieren

Laden Sie das SDK-Paket herunter und entpacken Sie es (z. B. uniconsent-react-native-sdk-26.2.0.zip). Darin finden Sie:

uniconsent-react-native-sdk-26.2.0.tgz — Per npm installierbares SDK-Paket
uniconsent-sdk/ — Vorkompilierte SDK-Bibliotheksdateien
UniConsentDemo/ — Demo-Anwendung
README.md — Dokumentation

Installieren Sie die .tgz-Datei mit npm oder Yarn:

# Replace <path-to-package-file.tgz> with the actual path to the file
npm install <path-to-package-file.tgz>
# or
yarn add <path-to-package-file.tgz>

Beispiel: Wenn Sie die .tgz-Datei im Stammverzeichnis Ihres Projekts ablegen:

npm install ./uniconsent-react-native-sdk-26.2.0.tgz
# or
yarn add file:./uniconsent-react-native-sdk-26.2.0.tgz

Peer-Abhängigkeiten installieren

Dieses SDK erfordert die folgenden Peer-Abhängigkeiten:

npm install react-native-webview react-native-default-preference
# or
yarn add react-native-webview react-native-default-preference

iOS Pods installieren

Wenn Sie für iOS entwickeln, navigieren Sie zum ios-Verzeichnis Ihres Projekts und installieren Sie die Pods:

cd ios
pod install
cd ..

Einwilligungsoberfläche anpassen

Bevor Sie das SDK integrieren, passen Sie das Erscheinungsbild des Consent-Banners im UniConsent Dashboard an Ihre Marke an und optimieren Sie die Einwilligungsraten.

Schritt 1: Marken-Styling im Dashboard

Gehen Sie zu Projects → Wählen Sie Ihr Projekt → Settings → Step 5: UI & Style Settings, um Folgendes zu konfigurieren:

Main Button Colour — Setzen Sie die Farbe der primären Aktionsschaltfläche passend zu Ihrer Marke
Main Button Text Colour — Passen Sie die Textfarbe auf der primären Schaltfläche für bessere Lesbarkeit an
Background Colour — Legen Sie die Hintergrundfarbe des Banners fest, damit es sich in Ihre App einfügt
Text Colour — Stellen Sie sicher, dass der Fließtext einen angemessenen Kontrast aufweist

Schritt 2: Erweitertes Styling mit benutzerdefiniertem CSS (optional)

Für eine präzisere Kontrolle fügen Sie benutzerdefiniertes CSS im Feld CSS Content unter Step 5 hinzu. Dies wird empfohlen, damit sich das Banner nativ in Ihre App einfügt und die beste Einwilligungsrate erzielt wird:

/* Example: Style the accept button to match your brand */
.unic-btn-accept {
  background-color: #4CAF50;
  border-radius: 8px;
  font-weight: 600;
}

/* Example: Adjust banner font */
.unic-banner {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Example: Make the reject button less prominent */
.unic-btn-reject {
  background-color: transparent;
  border: 1px solid #ccc;
  color: #666;
}

Tipp: Eine markengerechte Einwilligungsoberfläche, die sich nativ in Ihre App einfügt, erzielt in der Regel höhere Einwilligungsraten. Benutzer reagieren eher positiv auf ein Banner, das dem erwarteten Erscheinungsbild entspricht.

Verwendung

SDK über Provider initialisieren

Umschließen Sie die Wurzelkomponente Ihrer Anwendung (oder den relevanten Teil) mit UniConsentProvider. Sie müssen Ihre licenseId (Publisher-ID/pid von UniConsent) angeben.

// Your main App file (e.g., App.tsx or index.js)
import React from 'react';
import { UniConsentProvider } from 'uniconsent-sdk';
import YourAppRootComponent from './src/YourAppRootComponent';

const App = () => {
  return (
    <UniConsentProvider licenseId="YOUR_LICENSE_ID">
      <YourAppRootComponent />
    </UniConsentProvider>
  );
};

export default App;

Anzeigemodi

Das SDK unterstützt drei Anzeigemodi für die CMP-Oberfläche, die über die Eigenschaft displayMode am UniConsentProvider konfiguriert werden:

Modus	Beschreibung
`'fullScreen'`	Vollbild-Ansicht (Standard)
`'bottomSheet'`	Modales Sheet am unteren Bildschirmrand
`'dialog'`	Zentrierter modaler Dialog

// Full screen (default — no prop needed)
<UniConsentProvider licenseId="YOUR_LICENSE_ID">

// Bottom sheet
<UniConsentProvider licenseId="YOUR_LICENSE_ID" displayMode="bottomSheet">

// Center dialog
<UniConsentProvider licenseId="YOUR_LICENSE_ID" displayMode="dialog">

Event-Handler

Überwachen Sie SDK-Lebenszyklus-Events mit der Eigenschaft onEvent am UniConsentProvider.

Verfügbare Event-Typen:

'sdkInit' — SDK-Initialisierung gestartet
'ready' — SDK-Initialisierung abgeschlossen
'uiDisplay' — Einwilligungsoberfläche wird angezeigt
'uiClose' — Einwilligungsoberfläche wird geschlossen

<UniConsentProvider
  licenseId="YOUR_LICENSE_ID"
  onEvent={(event) => {
    switch (event.type) {
      case 'ready':
        console.log('SDK ready');
        break;
      case 'uiClose':
        console.log('Consent UI closed');
        break;
    }
  }}
>
  <YourAppRootComponent />
</UniConsentProvider>

CMP-Oberfläche anzeigen

Verwenden Sie den useConsent-Hook innerhalb einer Komponente im Provider, um die Funktion openCMP zu erhalten, und rufen Sie sie bei Bedarf auf (z. B. bei einem Tastendruck).

import React from 'react';
import { View, Text, Button, ActivityIndicator } from 'react-native';
import { useConsent } from 'uniconsent-sdk';

const ConsentInfoComponent = () => {
  const { consentStatus, isLoading, openCMP } = useConsent();

  return (
    <View>
      <Text>Consent Status:</Text>
      {isLoading ? (
        <ActivityIndicator />
      ) : (
        <Text>{consentStatus ?? 'Initializing...'}</Text>
      )}
      <Button
        title="Manage Privacy Settings"
        onPress={openCMP}
        disabled={isLoading}
      />
    </View>
  );
};

Einwilligung programmatisch prüfen

Verwenden Sie die Hilfsfunktionen, um den Einwilligungsstatus direkt ohne den Hook zu prüfen:

import {
  getTCString,
  isEURegion,
  isPurposeConsented,
  isVendorConsented,
  getConsentData,
} from 'uniconsent-sdk';

// Get the full TC String
const tcString = await getTCString();

// Check if user is in EU/EEA region
const inEU = await isEURegion();

// Check if a specific TCF purpose has consent (1-based ID)
const hasPurpose1 = await isPurposeConsented(1);

// Check if a specific vendor has consent (1-based ID)
const hasVendor755 = await isVendorConsented(755);

// Get all consent data as a single object
const consentData = await getConsentData();

Einwilligung mit WebView synchronisieren

Wenn Ihre App ein WebView öffnet, das eine Webseite mit dem UniConsent CMP-Tag lädt, können Sie den nativen Einwilligungsstatus übergeben, damit das CMP-Tag die bestehende Einwilligung erkennt und das Banner nicht erneut anzeigt.

Verwenden Sie getConsentSyncScript() mit injectedJavaScriptBeforeContentLoaded, um die Einwilligung zu injizieren, bevor Seitenskripte ausgeführt werden:

import React, { useState, useEffect } from 'react';
import { WebView } from 'react-native-webview';
import { getConsentSyncScript } from 'uniconsent-sdk';

const MyWebView = () => {
  const [consentScript, setConsentScript] = useState<string | null>(null);

  useEffect(() => {
    getConsentSyncScript().then(setConsentScript);
  }, []);

  if (!consentScript) return null;

  return (
    <WebView
      source={{ uri: 'https://example.com' }}
      injectedJavaScriptBeforeContentLoaded={consentScript}
    />
  );
};

Debug-Hilfsmittel

Das SDK bietet Hilfsfunktionen für Entwicklung und Debugging:

import { listKV, clearKV } from 'uniconsent-sdk';

// Log all stored consent keys to console
await listKV();

// Clear all stored consent data
await clearKV();

Konfiguration

`UniConsentProvider`-Eigenschaften

Eigenschaft	Typ	Erforderlich	Standard	Beschreibung
`licenseId`	`string`	Ja	—	Ihre UniConsent Publisher-ID (pid).
`displayMode`	`CMPDisplayMode`	Nein	`'fullScreen'`	CMP-Anzeigestil: `'fullScreen'`, `'bottomSheet'` oder `'dialog'`.
`onEvent`	`CMPEventCallback`	Nein	—	Callback für SDK-Lebenszyklus-Events (`sdkInit`, `ready`, `uiDisplay`, `uiClose`).

API-Referenz

Komponenten & Hooks

Export	Beschreibung
`UniConsentProvider`	React-Komponente zum Umschließen Ihrer Anwendung. Erfordert die Eigenschaft `licenseId`.
`useConsent()`	Hook, der `{ consentStatus, isLoading, openCMP }` zurückgibt.

Hilfsfunktionen

Funktion	Rückgabe	Beschreibung
`getTCString()`	`Promise<string>`	IAB TCF Consent-String abrufen.
`isEURegion()`	`Promise<boolean>`	Prüfen, ob sich der Benutzer in einer EU/EWR-Region befindet.
`isPurposeConsented(purposeId)`	`Promise<boolean>`	Einwilligung für einen bestimmten TCF-Zweck prüfen (1-basierte ID).
`isVendorConsented(vendorId)`	`Promise<boolean>`	Einwilligung für einen bestimmten TCF-Anbieter prüfen (1-basierte ID).
`getConsentData()`	`Promise<ConsentData>`	Umfassendes Einwilligungsdatenobjekt abrufen.
`getConsentSyncScript()`	`Promise<string>`	JS-Snippet zum Injizieren der Einwilligung in ein WebView abrufen.
`listKV()`	`Promise<void>`	Debug: Alle gespeicherten Einwilligungsschlüssel in der Konsole ausgeben.
`clearKV()`	`Promise<void>`	Debug: Alle gespeicherten Einwilligungsdaten löschen.

Exportierte Typen

Typ	Beschreibung
`CMPDisplayMode`	`'fullScreen' \| 'bottomSheet' \| 'dialog'`
`CMPEventType`	`'sdkInit' \| 'ready' \| 'uiDisplay' \| 'uiClose'`
`CMPEventCallback`	`(event: { type: CMPEventType }) => void`
`ConsentContextValue`	Form des Rückgabewerts von `useConsent()`.
`ConsentData`	Form des Rückgabewerts von `getConsentData()`.

`ConsentData`-Felder

Feld	Typ	Beschreibung
`tcString`	`string`	Vollständiger IAB TCF Consent-String.
`isEURegion`	`boolean`	Ob sich der Benutzer in einer EU/EWR-Region befindet.
`gdprApplies`	`boolean`	Flag, ob die DSGVO gilt.
`cmpSdkId`	`number`	Registrierte CMP SDK-ID (68 für UniConsent).
`cmpSdkVersion`	`number`	CMP SDK-Version.
`policyVersion`	`number`	TCF-Richtlinienversion.
`purposeConsents`	`string`	Binärstring der eingewilligten Zwecke (z. B. `"10110"`).
`vendorConsents`	`string`	Binärstring der eingewilligten Anbieter.
`additionalConsent`	`string`	Google Additional Consent (AC)-String.
`gvlVersion`	`number`	Verwendete Version der Global Vendor List.

Hinweise

Zugang zu Datenschutzeinstellungen: Ihre Anwendung sollte Benutzern eine dauerhafte Möglichkeit bieten (z. B. eine Schaltfläche oder einen Link „Datenschutzeinstellungen", häufig in einem Einstellungsmenü), um ihre Einwilligungsentscheidungen einzusehen und zu aktualisieren. Diese Schaltfläche sollte die Funktion openCMP() aufrufen, die über den useConsent-Hook bezogen wird.
Automatische Einwilligungsprüfung: Der UniConsentProvider prüft automatisch den Einwilligungsstatus beim Start Ihrer App, einschließlich der Frage, ob die Global Vendor List (GVL) seit der letzten Einwilligung des Benutzers aktualisiert wurde. Wenn sich die GVL-Version geändert hat, wird der Benutzer erneut aufgefordert.

Einwilligungsverwaltung für das Web

Mobile App CMP

Google Consent Mode

Google Tag Gateway

IAB TCF v2 CMP

Cookie-Scanner

Für Publisher

Für Werbetreibende

Für Shopify

Für WordPress

Leading Consent Management Platform

So integrieren Sie das UniConsent CMP SDK für React Native

So integrieren Sie das UniConsent CMP SDK für React Native

Voraussetzungen

Erste Schritte (Installation)

SDK-Paket installieren

Peer-Abhängigkeiten installieren

iOS Pods installieren

Einwilligungsoberfläche anpassen

Schritt 1: Marken-Styling im Dashboard

Schritt 2: Erweitertes Styling mit benutzerdefiniertem CSS (optional)

Verwendung

SDK über Provider initialisieren

Anzeigemodi

Event-Handler

CMP-Oberfläche anzeigen

Einwilligung programmatisch prüfen

Einwilligung mit WebView synchronisieren

Debug-Hilfsmittel

Konfiguration

`UniConsentProvider`-Eigenschaften

API-Referenz

Komponenten & Hooks

Hilfsfunktionen

Exportierte Typen

`ConsentData`-Felder

Hinweise