[ReactNative] 1. consentmanager SDK-integration
Var medveten om att den här versionen av CMP SDK byggdes om helt från grunden, och därför representerar den en större avbrytande förändring i förhållande till v2, eftersom alla metoder döptes om, liksom signaturerna, och erbjuder nu återuppringningar till nästan alla metoder. I samtliga fall, måste du ändra din kod och uppdatera dina beroenden för att säkerställa att din mobilapp fungerar som förväntat. Dessutom är det värt att nämna att beroende på vilken version av v2 som integrerats i din app, all data som finns kvar av den tidigare versionen av vår SDK på användarnas enheter kommer att raderas, vilket kommer att tvinga appen att visa samtyckesskiktet igen.
På grund av React Natives natur som ramverk och de ständigt motstridiga förfrågningarna och edge-fall från vår kundbas, erbjuder vi React Native-bryggan till de underliggande native SDK:erna som en utgångspunkt som försöker uppfylla alla förfrågningar i så stor utsträckning som möjligt. Om du av någon anledning behöver en förfrågan, uppmuntrar vi dig att forka våra repos och anpassa dem till dina egna behov. Vi erbjuder två repos, ett för gammal arkitektur, och en till för ny arkitektur.
Vårt React Native SDK är i själva verket en brygga till den underliggande nativa iOS och Android SDK:er. Så, för mer information om våra API:er, kontrollera de specifika plattformsversionerna.
I det här dokumentet hittar du allmän information om hur du integrerar vårt SDK i ditt projekt. För mer information, se vår API-referensdokumentation för iOS och Android.
1. Installation
consentmanager SDK är en heltäckande lösning för att hantera användarsamtycke i mobilapplikationer. Designad för att hantera GDPR-efterlevnad, användarnas integritetspreferenser och insyn i annonsspårning, ger denna SDK en sömlös integration för iOS- och Android-plattformar. Dessutom erbjuder den wrapper plugins/bryggor för React Native, Flutter och Unity, vilket gör den mångsidig i olika utvecklingsmiljöer.
Det här dokumentet täcker installationsproceduren och funktioner som görs tillgängliga för våra kunder som utvecklar appar med React Native för att få tillgång till vår samtyckeshantering CMP SDK via vår React Native Native Bridge. För ytterligare information, se vår API-referens dokumentation.
1.1 Steg - Övergripande beskrivning
-
Integration och konfiguration:
- Integrera SDK:n i din app.
- Konfigurera SDK-inställningarna efter dina behov.
-
Skapa en instans och visa samtyckeslagret:
- Vid appstart skapar du en instans av
CMPManagerklass. Denna instans kommer att hantera samtyckesprocessen. - SDK:n visar automatiskt samtyckesskärmen vid behov.
- Vid appstart skapar du en instans av
-
Bearbetar användarens samtyckesdata:
- När samtycken har samlats in lagras informationen och är tillgänglig för frågor genom olika egenskaper och metoder som exponeras av vår SDK. Du kommer att ha information om avvisade eller accepterade 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-hjälpen):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åda NPM (gamla och ny båge) och våra offentliga repos (tarballs för direktlänkning finns för gamla och ny bågeKör den här raden 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 architectureLä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-v31.4 Skapa en instans och visa samtyckeslager
Du måste konfigurera din CMP-information via setUrlConfig metod, som hanterar din CMP-konfiguration, som kod-ID och standardspråk, och setWebViewConfig, vilket konfigurerar utseendet på WebView som visar samtyckeslagret. Efter det ä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 parametern avgör om samtyckeslagret ska öppnas på inställningssidan (true) som gör det möjligt för användare att anpassa sina val eller om samtyckeslagret kommer att visas (false) standarddesignsidan för din CMP.
Observera att funktionerna relaterat till att avgöra om samtycket behövs eller inte, samt visningen av samtyckeslagret, beroende av en pålitlig nätverksanslutning. Om det inte finns någon anslutning tillgänglig eller om mekanismen för återförsök misslyckas med att nå vår server, didReceiveError händelsen returnerar ett timeout-fel, och därför kommer SDK:t helt och hållet inte att kunna avgöra behovet av ett samtycke, eftersom den helt och hållet inte kommer att kunna visa samtyckeslagret. Se till att din logik tar hänsyn till detta.
Exempelvis:
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:et visar automatiskt samtyckesskärmen vid denna tidpunkt (cookie-banner), via en WebView skapad av vårt SDK, som visar samtyckeslagret med text och knappar enligt dina CMP-konfigurationer (valda via kod-ID för din CMP), samlar in data och sparar samtyckesinformationen i området NSUserDefaults/UserPreferences på enheten, så att andra SDK:er kan läsa dem.
2. Behandling av användarnas samtyckesuppgifter
2.1 Kontroll av 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, vänligen se vår fullständiga API-dokumentation för den underliggande nativa versionen. iOS och Android SDK:er.
2.2 Återöppna samtyckeslagret för att kontrollera användarnas val
För att tillåta användaren att verifiera eller ändra sina val kan du helt enkelt ringa forceOpen()
const buttons = [
{
title: 'Force Open Consent Layer',
onPress: () => handleApiCall(
() => CmSdkReactNativeV3.forceOpen(false),
() => 'Consent Layer opened'
),
},
]Den här metoden kommer att visa 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 webbvyer för att visa information, som reklam eller innehåll. För att överföra samtyckesinformationen från SDK:n till webbvyn och undvika dubbla cookiebanners kan du hämta samtyckessträngen med hjälp av exportCMPInfoDetta exporterar samtyckessträngen med samtycket och all ytterligare data som CMP:n behöver. Du kan sedan skicka denna information till CMP:n som finns i din webbvy genom att lägga till den i URL:en som anropas i webbvyn. För mer information, vänligen se vår dedikerad sida för detta användningsfall.
Ett annat användningsfall är samtycke över flera enheter, där du importerar samtycke från en annan källa till enheten. I det här fallet ersätter du checkAndOpen by importCMPInfo med samtyckessträngen som du hämtade från webbplatsen, till exempel.
2.4 Händelselyssnare
SDK:et tillhandahåller flera händelselyssnare som låter dig reagera på olika händelser under samtyckesflödet. Dessa lyssnare gör att du kan spåra användarinteraktioner, hantera fel och synkronisera din apps tillstånd 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 lyssnare utlöses när användaren skickar sina samtyckesval (antingen genom att acceptera, avvisa eller anpassa sina inställningar).
Parametrar:
callback: (consent: string, jsonObject: Object) => voidconsentSamtyckessträngen i IAB TCF-formatjsonObjectEtt JSON-objekt som innehåller detaljerad samtyckesinformation
Exempelvis:
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 lyssnare utlöses när samtyckeslagret visas för användaren.
Parametrar:
callback: () => void
Exempelvis:
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 utlöses när samtyckeslagret stängs, oavsett om användaren gjorde ett val eller avfärdade det.
Parametrar:
callback: () => void
Exempelvis:
import { addCloseConsentLayerListener } from 'cm-sdk-react-native-v3';
const closeSubscription = addCloseConsentLayerListener(() => {
console.log('Consent layer has been closed');
// Resume normal app flow
});
addErrorListener(callback)
Den här lyssnaren utlöses när ett fel uppstår under samtyckesprocessen, till exempel nätverksfel, timeout-fel eller konfigurationsproblem.
Parametrar:
callback: (error: string) => voiderrorEn sträng som beskriver felet som uppstod
Exempelvis:
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 lyssnare utlöses när användaren klickar på en länk inom samtyckeslagret (t.ex. länkar till integritetspolicy eller användarvillkor).
Parametrar:
callback: (url: string) => voidurl: URL:en som klickades på
Exempelvis:
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 på ATT-implementering här.
4. Skapa en anpassad layout
För att skapa en anpassad vy av WKWebView, som att ändra dess placering eller bakgrund, till exempel, 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. Loggning
När du använder vår iOS SDK kan du behöva felsöka eller analysera logginformation för olika ändamål. Loggarna som genereras av vår SDK är taggade under "CMP", vilket gör att du enkelt kan filtrera och bara visa relevanta loggar. För ytterligare information, se Den här delen av vår dokumentation.
6. Plattformsförbehåll
- Expo stöds inte
- Aandroid ignorerar för närvarande backgroundStyle-overrides och customRect/custom position; den visar alltid en nedtonad helskärmsbakgrund.
- iOS stöder nedtonad/färg/oskärpa/ingen och anpassad rektangulär.
