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.

Detta dokument beskriver installationsproceduren och de funktioner som finns tillgängliga för våra kunder som utvecklar appar med React Native för att få tillgång till vårt CMP SDK för samtyckeshantering via vår React Native Native Bridge. För mer information, se vår API-referensdokumentation. 

1.1 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.2 Konfigurations-API i korthet

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 (via 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 och konfiguration

NPM

Vi har publicerat vår React Native-brygga till både NPM (gammal och ny arkitektur) och våra offentliga repos (tarballs för direktlänkning finns för både gammal och ny arkitektur). Kör följande rad i din terminal:

npm install cm-sdk-react-native-v3           // For the old architecture
npm install cm-sdk-react-native-v3-new-arch  // For the new architecture

Länkning (React Native 0.59 och lägre)

Om du använder React Native 0.59 eller lägre måste du länka de inbyggda modulerna manuellt:

react-native link cm-sdk-react-native-v3

1.4 Skapa en instans och visa samtyckeslager

Du måste ställa in din CMP-information via setUrlConfig metoden, som hanterar din CMP-konfiguration, såsom Code-ID och standardspråk, samt setWebViewConfig, som kommer att konfigurera utseendet på WebView som visar samtyckeslagret. Därefter är du redo att använda metoden checkAndOpen(false) 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. boolean bestämmer om samtyckeslagret ska öppnas på inställningssidan (true) där användarna kan anpassa sina val eller om samtyckeslagret ska visas (false) standarddesignsidan för din CMP.  

Exempel:

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

SDK:n visar automatiskt samtyckesskärmen vid detta tillfälle (cookiebanner), via en WebView skapad av vårt SDK, som visar samtyckeslagret med text och knappar enligt dina CMP-konfigurationer (valda via CMP:s Code-ID), samlar in data och lagrar samtyckesinformationen i området NSUserDefaults/UserPreferences på enheten, så att de andra SDK:erna kan läsa dem.

2. Behandling av användarnas samtyckesuppgifter

2.1 Kontrollera användarnas samtycke

Vårt SDK erbjuder olika metoder för att kontrollera och hämta samtyckesinformation. Den viktigaste är getUserStatus, som visas i exemplet nedan. För mer information, 

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

För mer information om de andra metoderna, se vår fullständiga API-dokumentation för de underliggande inbyggda iOS- och Android-SDK:erna. 

2.2 Öppna samtyckeslagret 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 forceOpen()

const buttons = [
	{
      title: 'Force Open Consent Layer',
      onPress: () => handleApiCall(
        () => CmSdkReactNativeV3.forceOpen(false),
        () => 'Consent Layer opened'
      ),
    },
]

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

2.3 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 och undvika dubbla cookie-banners kan du hämta samtyckessträngen med exportCMPInfo. Detta exporterar samtyckessträngen med samtycket 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. För mer information, vänligen se vår särskilda sida för detta användningsfall. 

Ett annat användningsfall är enhetsöverskridande samtycke, där du importerar samtycke från en annan källa till enheten. I det här fallet kan du ersätta checkAndOpen med importCMPInfo med den samtyckessträng som du hämtat från webbplatsen, till exempel. 

2.4 Händelselyssnare

SDK:n tillhandahåller flera händelselyssnare som gör det möjligt för dig att reagera på olika händelser under samtyckesflödet. Dessa lyssnare gör det möjligt för dig att spåra användarinteraktioner, hantera fel och synkronisera din apps status med samtyckeslagrets livscykel.

Alla lyssnare returnerar ett prenumerationsobjekt som kan användas för att ta bort lyssnaren när den inte längre behövs. För att ta bort en lyssnare, anropa .remove() på den returnerade prenumerationen.

Tillgängliga händelselyssnare

addConsentListener(callback)

Denna lyssnar aktiveras när användaren skickar in sina samtyckesval (antingen genom att acceptera, avvisa eller anpassa sina inställningar).

Parametrar:

callback: (consent: string, jsonObject: Object) => void
consent: Samtyckessträngen i IAB TCF-format
jsonObject: Ett JSON-objekt som innehåller detaljerad information om samtycke

Exempel:

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)
Denna lyssnar aktiveras när samtyckeslagret visas för användaren.

Parametrar:

callback: () => void

Exempel:

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)

Denna lyssnare aktiveras när samtyckesfönstret stängs, oavsett om användaren har gjort ett val eller stängt bort det.

Parametrar:

callback: () => void

Exempel:

import { addCloseConsentLayerListener } from 'cm-sdk-react-native-v3';

const closeSubscription = addCloseConsentLayerListener(() => {
    console.log('Consent layer has been closed');
    // Resume normal app flow
});

addErrorListener(callback)

Denna lyssnar aktiveras när ett fel uppstår under samtyckesprocessen, till exempel nätverksfel, timeout-fel eller konfigurationsproblem.

Parametrar:

callback: (error: string) => void
error: En sträng som beskriver det fel som inträffade

Exempel:

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)

Denna lyssnar aktiveras när användaren klickar på en länk inom samtyckeslagret (t.ex. länkar till integritetspolicy eller användarvillkor).

Parametrar:

callback: (url: string) => void
url: Den URL som klickades på

Exempel:

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 med Apple Tracking Transparency (ATT)

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

4. 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)

5. 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.

6. Plattformens begränsningar

• Expo stöds inte
• Android ignorerar för närvarande överskrivningar av backgroundStyle och customRect/custom position; den visar alltid en nedtonad helskärmsbakgrund.
• iOS stöder dimmed/color/blur/none och customRect.