[RéagirNative] 1. consentmanager Intégration SDK
Sur ce document, vous trouverez des informations générales sur la façon d'intégrer notre SDK à votre projet. Pour plus de détails, veuillez vous référer à notre Référence de l'API Documentation.
1. Installation
consentmanager Le SDK est une solution complète de gestion du consentement des utilisateurs dans les applications mobiles. Conçu pour gérer la conformité au RGPD, les préférences de confidentialité des utilisateurs et la transparence du suivi des publicités, ce SDK offre une intégration transparente pour les plateformes iOS et Android. De plus, il propose des plugins/ponts wrapper pour React Native, Flutter et Unity, ce qui le rend polyvalent dans divers environnements de développement.
Étapes – Description de haut niveau
-
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
CMPManager
classe. 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.1 Intégration et configuration
NPM
Exécutez cette ligne sur votre terminal :
npm install cmp-sdk-react-native-v3
Liaison (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 cmp-sdk-react-native-v3
1.2 Création d'une instance et affichage de la couche de consentement
Dans votre code, vous devez créer une instance de classe CMPManager
. Vous devrez configurer deux objets qui seront transmis à la méthode getInstance : UrlConfig
, qui gère votre configuration CMP, comme le code-ID et la langue par défaut, et ConsentLayerUIConfig
. qui configurera l'apparence de la WebView qui affichera la couche de consentement. Après cela, vous êtes prêt à utiliser la méthode checkWithServerAndOpenIfNecessary()
pour récupérer automatiquement les données nécessaires à partir de notre serveur et déterminer si l'écran de consentement doit être affiché ou non. Si tel est le cas, le SDK affichera automatiquement l'écran de consentement à ce stade, 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 l'application puisse afficher les publicités ciblées en conséquence.
Veuillez noter que les fonctionnalités liées à 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, l'événement didReceiveError renverra une erreur de dépassement de délai, et le SDK sera donc 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 logique en tient compte.
Mise en situation :
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 Traitement des données de consentement des utilisateurs
Vérification des consentements des utilisateurs
Notre SDK propose différentes méthodes pour vérifier et récupérer les informations de consentement. Les principales méthodes sont présentées dans l'exemple ci-dessous :
// 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}`
),
},
]
Pour plus d'informations sur les autres méthodes, veuillez vous référer à notre API Documentation.
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 openConsentLayer()
CmSdkReactNativeV3.openConsentLayer
Cette méthode affichera la couche de consentement via la même instance WebView créée dans les étapes précédentes.
Importation/exportation des informations de consentement vers d'autres sources
Dans certains cas, une application native peut contenir des vues Web afin d'afficher des informations, comme de la publicité ou du contenu. Afin de transmettre les informations de consentement du SDK à la vue Web, vous pouvez récupérer la chaîne de consentement à l'aide de :
CmSdkReactNativeV3.exportCMPInfo
Cela exportera les informations de consentement et toutes les autres données nécessaires à la CMP. Vous pouvez ensuite transmettre ces informations à la CMP qui se trouve dans votre vue Web en les ajoutant à l'URL appelée dans la vue Web.
Si, par ailleurs, vous devez importer la chaîne de consentement à l’aide du SDK, vous pouvez utiliser l’exemple ci-dessous :
() => CmSdkReactNativeV3.importCMPInfo(
'Q1FERkg3QVFERkg3QUFmR01CSVRCQkVnQUFBQUFBQUFBQWlnQUFBQUFBQUEjXzUxXzUyXzUzXzU0XzU1XzU2XyNfczI3ODlfczI3OTBfczI3OTFfczI2OTdfczk3MV9VXyMxLS0tIw'
)
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.
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)
Journal
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.