[RéagirNative] 1. consentmanager Intégration SDK
Veuillez noter que cette version du SDK CMP a été entièrement reconstruite à partir de zéro et représente donc une Changement majeur concernant la v2, comme toutes les méthodes ont été renommées, tout comme les signatures, offrant désormais également des rappels à presque toutes les méthodes. Dans tous les casVous devrez modifier votre code et mettre à jour vos dépendances pour garantir le bon fonctionnement de votre application mobile. De plus, il convient de noter que selon la version de v2 intégrée à votre application, toutes les données conservées par la version précédente de notre SDK sur les appareils des utilisateurs seront effacées, ce qui forcera l'application à réafficher la couche de consentement.
En raison de la nature de React Native en tant que framework et des demandes contradictoires et cas particuliers constamment rencontrés par nos clients, nous proposons le pont React Native vers les SDK natifs sous-jacents comme point de départ. Ce pont tente de répondre à la plupart des demandes. Si, pour une raison quelconque, vous avez besoin d'une solution spécifique, nous vous encourageons à dupliquer nos dépôts et à les adapter à vos besoins. Nous proposons deux dépôts, l'un pour… architecture ancienne, et un autre pour le nouvelle architecture.
Notre SDK React Native est en réalité un pont vers le système natif sous-jacent. iOS et Android Kits de développement logiciel (SDK). Pour plus d'informations sur nos API, veuillez consulter les versions spécifiques à chaque plateforme.
Ce document contient des informations générales sur l'intégration de notre SDK à votre projet. Pour plus de détails, veuillez consulter notre documentation de référence API. iOS et Android.
1. Installation
consentmanager Le SDK est une solution complète pour la gestion du consentement des utilisateurs dans les applications mobiles. Conçu pour assurer la conformité au RGPD, les préférences de confidentialité des utilisateurs et la transparence du suivi publicitaire, ce SDK offre une intégration transparente aux plateformes iOS et Android. Il offre également des fonctionnalités supplémentaires. plugins/ponts wrapper pour React Native, Flutter et Unity, ce qui le rend polyvalent dans divers environnements de développement.
Ce document couvre la procédure d'installation et les fonctionnalités mises à disposition de nos clients développant des applications avec React Native pour avoir accès à notre SDK CMP de gestion du consentement via notre React Native Native BridgePour plus de détails, veuillez consulter notre Référence de l'API Documentation.
1.1 Étapes - Description générale
-
Intégration et configuration:
- Intégrez le SDK dans votre application.
- Configurez les paramètres du SDK en fonction de vos besoins.
-
Créer une instance et afficher la couche de consentement:
- Au démarrage de l'application, créez une instance du
CMPManagerclasse. Cette instance gérera le processus de consentement. - Le SDK affichera automatiquement l'écran de consentement si nécessaire.
- Au démarrage de l'application, créez une instance du
-
Traitement des données de consentement de l'utilisateur:
- Une fois les consentements recueillis, les informations sont stockées et peuvent être interrogées via différentes propriétés et méthodes exposées par notre SDK. Vous disposerez d'informations sur les consentements rejetés ou acceptés, les fournisseurs et les finalités.
1.2 Aperçu de l'API de configuration
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 l'assistant BackgroundStyle) :dimmed(color?, opacity?)color(color)blur(blurEffectStyle: light | dark | extraLight)none
ATTStatus: NotDetermined (0), Restricted (1), Denied (2), Authorized (3)
1.3 Intégration et configuration
NPM
Nous avons publié notre pont React Native sur NPM (et les sites anciens et nouvelle arche) et nos dépôts publics (des archives tar pour la liaison directe sont disponibles pour le et les sites anciens et nouvelle archeExécutez cette ligne dans votre terminal :
npm install cm-sdk-react-native-v3 // For the old architecture
npm install cm-sdk-react-native-v3-new-arch // For the new architectureLiaison (React Native 0.59 et versions antérieures)
Si vous utilisez React Native 0.59 ou une version antérieure, vous devez lier les modules natifs manuellement :
react-native link cm-sdk-react-native-v31.4 Création d'une instance et affichage de la couche de consentement
Vous devrez configurer vos informations CMP via le setUrlConfig méthode, qui gère la configuration de votre CMP, comme le Code-ID et la langue par défaut, et setWebViewConfig, qui configurera l'apparence de la WebView affichant la couche de consentement. Ensuite, vous pourrez utiliser la méthode. checkAndOpen(false) pour récupérer automatiquement les données nécessaires depuis notre serveur et déterminer si l'écran de consentement doit être affiché ou non. boolean ce paramètre détermine si la couche de consentement sera ouverte dans la page des paramètres (true) qui permettra aux utilisateurs de personnaliser leurs choix ou si la couche de consentement s'affichera (false) la page de conception par défaut de votre CMP.
Veuillez noter que les fonctionnalités concernant la détermination de la nécessité ou non du consentement, ainsi que l'affichage de la couche de consentement, dépendent d'une connexion réseau fiable. S'il n'y a pas de connexion disponible ou si le mécanisme de nouvelle tentative ne parvient pas à atteindre notre serveur, le didReceiveError L'événement renverra une erreur de délai d'attente. et donc le SDK sera totalement incapable de déterminer la nécessité d'un consentement, car il sera totalement incapable d'afficher la couche de consentement. Veuillez vous assurer que votre raisonnement en tient compte.
Exemple :
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);
}
};Le SDK affichera automatiquement l'écran de consentement à ce stade (bannière de cookies), via un WebView créé par notre SDK, qui affichera la couche de consentement avec le texte et les boutons en fonction de vos configurations CMP (choisies via le Code-ID de votre CMP), collectera les données et conservera les informations de consentement dans la zone NSUserDefaults/UserPreferences de l'appareil, afin que les autres SDK puissent les lire.
2. Traitement des données de consentement des utilisateurs
2.1 Vérification du consentement des utilisateurs
Notre SDK propose différentes méthodes pour vérifier et récupérer les informations de consentement. La principale est getUserStatus, comme illustré dans l'exemple ci-dessous. Pour plus d'informations,
// 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'
),
},Pour plus d'informations sur les autres méthodes, veuillez consulter la documentation complète de notre API native sous-jacente. iOS et Android Kits de développement logiciel (SDK).
2.2 Réouverture de la couche de consentement pour vérifier les choix des utilisateurs
Afin de permettre à l'utilisateur de vérifier ou de modifier ses choix, vous pouvez simplement appeler forceOpen()
const buttons = [
{
title: 'Force Open Consent Layer',
onPress: () => handleApiCall(
() => CmSdkReactNativeV3.forceOpen(false),
() => 'Consent Layer opened'
),
},
]Cette méthode affichera la couche de consentement via la même instance WebView créée dans les étapes précédentes.
2.3 Importation/exportation d'informations sur le consentement vers d'autres sources
Dans certains cas, une application native peut contenir des vues Web pour afficher des informations, comme des publicités ou du contenu. Afin de transmettre les informations de consentement du SDK à la vue Web et ainsi éviter l'affichage en double des bannières de cookies, vous pouvez récupérer la chaîne de consentement à l'aide de exportCMPInfoCela exportera la chaîne de consentement contenant le consentement et toutes les autres données nécessaires à la plateforme de gestion du consentement (CMP). Vous pourrez ensuite transmettre ces informations à la CMP de votre vue Web en les ajoutant à l'URL appelée par cette dernière. Pour plus d'informations, veuillez consulter notre documentation. dedicated page pour ce cas d'utilisation.
Un autre cas d'utilisation est le consentement inter-appareils, où vous importez le consentement d'une autre source vers l'appareil. Dans ce cas, vous remplacez checkAndOpen by importCMPInfo avec la chaîne de consentement que vous avez récupérée sur le site web, par exemple.
2.4 Écouteurs d'événements
Le SDK fournit plusieurs écouteurs d'événements permettant de réagir à différents événements lors du processus de consentement. Ces écouteurs permettent de suivre les interactions des utilisateurs, de gérer les erreurs et de synchroniser l'état de votre application avec le cycle de vie de la couche de consentement.
Tous les écouteurs renvoient un objet d'abonnement permettant de supprimer l'écouteur lorsqu'il n'est plus nécessaire. Pour supprimer un écouteur, appelez la méthode `.remove()` sur l'abonnement renvoyé.
Écouteurs d'événements disponibles
addConsentListener(callback)
Ce dispositif d'écoute est déclenché lorsque l'utilisateur soumet ses choix de consentement (en acceptant, en refusant ou en personnalisant ses préférences).
Paramètres:
callback: (consent: string, jsonObject: Object) => voidconsent: La chaîne de consentement au format IAB TCFjsonObject: Un objet JSON contenant des informations détaillées sur le consentement
Exemple :
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)
Ce mécanisme d'écoute est déclenché lorsque la couche de consentement est affichée à l'utilisateur.
Paramètres:
callback: () => void
Exemple :
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)
Ce mécanisme d'écoute est déclenché lorsque la couche de consentement est fermée, que l'utilisateur ait fait un choix ou l'ait ignoré.
Paramètres:
callback: () => void
Exemple :
import { addCloseConsentLayerListener } from 'cm-sdk-react-native-v3';
const closeSubscription = addCloseConsentLayerListener(() => {
console.log('Consent layer has been closed');
// Resume normal app flow
});
addErrorListener(callback)
Ce dispositif d'écoute est déclenché lorsqu'une erreur survient pendant le processus de consentement, comme une panne de réseau, une erreur de délai d'attente ou un problème de configuration.
Paramètres:
callback: (error: string) => voiderror: Une chaîne de caractères décrivant l'erreur survenue
Exemple :
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)
Ce dispositif d'écoute est déclenché lorsque l'utilisateur clique sur un lien dans la couche de consentement (tel qu'un lien vers la politique de confidentialité ou les conditions d'utilisation).
Paramètres:
callback: (url: string) => voidurl: L'URL sur laquelle on a cliqué
Exemple :
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. Intégration avec Apple Tracking Transparency (ATT)
Si vous utilisez le suivi ou l'analyse dans votre application, nous vous recommandons de lire le guide sur Mise en œuvre du TCA ici.
4. Création d'une mise en page personnalisée
Pour créer une vue personnalisée de WKWebView, comme modifier son positionnement ou son arrière-plan, par exemple, vous pouvez modifier la configuration transmise à l'objet ConsentLayerUIConfig comme ci-dessous :
ConsentLayerUIConfig(
position: .halfScreenTop,
backgroundStyle: .dimmed(.grey, 0.75),
cornerRadius: 20,
respectsSafeArea: false,
allowsOrientationChanges: true)5. Enregistrement
Lorsque vous utilisez notre SDK iOS, vous pouvez avoir besoin de déboguer ou d'analyser les informations des journaux à diverses fins. Les journaux générés par notre SDK sont étiquetés sous « CMP », ce qui vous permet de filtrer et d'afficher facilement uniquement les journaux pertinents. Pour plus d'informations, veuillez consulter cette section de notre documentation.
6. Avertissements relatifs à la plateforme
- AAndroid ignore actuellement les surcharges backgroundStyle et customRect/custom position ; elle affiche toujours un arrière-plan plein écran assombri.
- iOS prend en charge les modes d'atténuation/couleur/flou/aucun et customRect.
