[ReactNatief] 1. consentmanager SDK-integratie
In dit document vindt u algemene informatie over hoe u onze SDK in uw project kunt integreren. Voor meer details verwijzen wij u naar onze API-referentie documentatie.
1. Installatie
consentmanager SDK is een uitgebreide oplossing voor het beheren van gebruikerstoestemming in mobiele applicaties. Deze SDK is ontworpen om GDPR-naleving, gebruikersprivacyvoorkeuren en transparantie bij het volgen van advertenties te verwerken en biedt een naadloze integratie voor iOS- en Android-platforms. Daarnaast biedt het wrapper-plugins/bruggen voor React Native, Flutter en Unity, waardoor het veelzijdig is in verschillende ontwikkelomgevingen.
Stappen - Beschrijving op hoog niveau
-
Integratie en configuratie:
- Integreer de SDK in uw app.
- Configureer de SDK-instellingen volgens uw behoeften.
-
Een instantie maken en de toestemmingslaag weergeven:
- Maak bij het opstarten van de app een exemplaar van het
CMPManagerklas. Deze instantie zal het toestemmingsproces afhandelen. - De SDK geeft indien nodig automatisch het toestemmingsscherm weer.
- Maak bij het opstarten van de app een exemplaar van het
-
Verwerking van toestemmingsgegevens van gebruikers:
- Zodra toestemmingen zijn verzameld, wordt informatie opgeslagen en is deze beschikbaar voor query's via verschillende eigenschappen en methoden die door onze SDK worden blootgesteld. U krijgt informatie over afgewezen of geaccepteerde toestemmingen, leveranciers en doeleinden.
1.1 Integratie en configuratie
NPM
Voer deze regel uit op uw terminal:
npm install cmp-sdk-react-native-v3Koppelen (React Native 0.59 en lager)
Als u React Native 0.59 of lager gebruikt, moet u de native modules handmatig koppelen:
react-native link cmp-sdk-react-native-v31.2 Een instantie maken en de toestemmingslaag weergeven
Binnen uw code moet u een instantie van de klasse maken CMPManager. U moet twee objecten instellen die worden doorgegeven aan de getInstance-methode: UrlConfig, die uw CMP-configuratie afhandelt, zoals Code-ID en standaardtaal, en ConsentLayerUIConfig. die de looks van de WebView configureert die de toestemmingslaag zal weergeven. Daarna bent u klaar om de methode te gebruiken checkWithServerAndOpenIfNecessary() om automatisch de benodigde gegevens van onze server op te halen en te bepalen of het toestemmingsscherm getoond moet worden of niet. Als dat zo is, zal de SDK op dit punt automatisch het toestemmingsscherm tonen, via een WebView gemaakt door onze SDK, die de toestemmingslaag weergeeft met de tekst en knoppen volgens uw CMP-configuraties (gekozen via de Code-ID van uw CMP), de gegevens verzamelt en de toestemmingsinformatie opslaat in het NSUserDefaults/UserPreferences-gebied van het apparaat, zodat de app de gerichte advertenties dienovereenkomstig kan weergeven.
Houd er rekening mee dat de functionaliteiten die betrekking hebben op het bepalen of toestemming nodig is of niet, evenals de weergave van de toestemmingslaag, afhankelijk zijn van een betrouwbare netwerkverbinding. Als er geen verbinding beschikbaar is of als het mechanisme van opnieuw proberen onze server niet bereikt, retourneert de gebeurtenis didReceiveError een time-outfout en kan de SDK de noodzaak van toestemming dus helemaal niet bepalen, omdat de toestemmingslaag helemaal niet kan worden weergegeven. Zorg ervoor dat uw logica hiermee rekening houdt.
Voorbeeld:
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 Verwerking van toestemmingsgegevens van gebruikers
Controleren van toestemmingen van gebruikers
Onze SDK biedt verschillende methoden om toestemmingsinformatie te controleren en op te halen. De belangrijkste methoden worden weergegeven in het onderstaande voorbeeld:
// 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}`
),
},
]Voor meer informatie over de andere methoden verwijzen wij u naar onze volledige API-documentatie.
De toestemmingslaag opnieuw openen om de keuzes van de gebruikers te controleren
Om de gebruiker toe te staan zijn keuzes te verifiëren of te wijzigen, kunt u eenvoudig bellen openConsentLayer()
CmSdkReactNativeV3.openConsentLayerMet deze methode wordt de toestemmingslaag weergegeven via hetzelfde WebView-exemplaar dat in de vorige stappen is gemaakt.
Importeren/exporteren van toestemmingsinformatie naar andere bronnen
In sommige gevallen kan een native app webviews bevatten om informatie weer te geven, zoals advertenties of content. Om de toestemmingsinformatie van de SDK naar de webview te verzenden, kunt u de toestemmingsstring ophalen met:
CmSdkReactNativeV3.exportCMPInfoHiermee worden de toestemmingsinformatie en alle verdere gegevens die nodig zijn voor de CMP geëxporteerd. U kunt deze informatie vervolgens doorgeven aan de CMP die zich in uw webview bevindt door deze toe te voegen aan de URL die in de webview wordt aangeroepen.
Als u de toestemmingsreeks anders met behulp van de SDK moet importeren, kunt u het onderstaande voorbeeld gebruiken:
() => CmSdkReactNativeV3.importCMPInfo(
'Q1FERkg3QVFERkg3QUFmR01CSVRCQkVnQUFBQUFBQUFBQWlnQUFBQUFBQUEjXzUxXzUyXzUzXzU0XzU1XzU2XyNfczI3ODlfczI3OTBfczI3OTFfczI2OTdfczk3MV9VXyMxLS0tIw'
)Integratie met Apple Tracking Transparency (ATT)
Als u tracking of analytics in uw app gebruikt, raden we u aan de handleiding te lezen ATT-implementatie hier.
Een aangepaste lay-out maken
Om een aangepaste weergave van de WKWebView te maken, bijvoorbeeld door de positie of achtergrond te wijzigen, kunt u de configuratie die is doorgegeven aan het ConsentLayerUIConfig-object als volgt wijzigen:
ConsentLayerUIConfig(
position: .halfScreenTop,
backgroundStyle: .dimmed(.grey, 0.75),
cornerRadius: 20,
respectsSafeArea: false,
allowsOrientationChanges: true)Logging
Wanneer u onze iOS SDK gebruikt, kan het nodig zijn om loginformatie te debuggen of analyseren voor verschillende doeleinden. De logs die door onze SDK worden gegenereerd, zijn getagd onder "CMP", zodat u eenvoudig de relevante logs kunt filteren en bekijken. Raadpleeg voor meer informatie deze sectie van onze documentatie.
