1. Installation

consentmanager SDK est une solution complète pour la 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 publicitaire, ce SDK offre une intégration transparente pour les plateformes iOS et Android. De plus, il propose des plugins/ponts d'encapsulation pour React Native, Flutter et Unity, ce qui le rend polyvalent dans divers environnements de développement.

Ce document décrit la procédure d'installation et les fonctionnalités mises à la disposition de nos clients qui développent des applications avec React Native afin qu'ils puissent accéder à notre SDK CMP de gestion du consentement via notre React Native Native Bridge. Pour plus de détails, veuillez consulter notre documentation de référence API. 

1.1 Étapes – Description générale

1. Intégration et configuration :

   • Intégrez le SDK dans votre application.
   • Configurez les paramètres du SDK en fonction de vos besoins.

2. Création d'une instance et affichage de la couche de consentement :

   • Au démarrage de l'application, créez une instance de la CMPManager classe. Cette instance gérera le processus de consentement.
   • Le SDK affichera automatiquement l'écran de consentement si nécessaire.

3. Traitement des données de consentement des utilisateurs :

   • Une fois les consentements recueillis, les informations sont stockées et peuvent être consultées via différentes propriétés et méthodes exposées par notre SDK. Vous disposerez d'informations sur les consentements refusé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 passerelle React Native à la fois sur NPM (anciennes et nouvelles architectures) et dans nos dépôts publics (des archives compressées permettant un lien direct sont disponibles pour les anciennes et nouvelles architectures). Exé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 architecture

Liens (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-v3

1.4 Création d'une instance et affichage de la couche de consentement

Vous devrez configurer vos informations CMP via la setUrlConfig méthode, qui gère votre configuration CMP, comme le Code-ID et la langue par défaut, et setWebViewConfig, qui configurera l'apparence de la WebView qui affichera la couche de consentement. Ensuite, vous serez prêt à 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 s'afficher ou non. Le boolean détermine si la couche de consentement s’ouvrira 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.  

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 une WebView créée par notre SDK, qui affichera la couche de consentement avec le texte et les boutons conformément à vos configurations CMP (choisies via l’identifiant de code de votre CMP), collectera les données et enregistrera 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 relatives au consentement des utilisateurs

2.1 Vérification des consentements 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 indiqué 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 notre documentation API complète des SDK natifs iOS et Android sous-jacents. 

2.2 Rouvrir la fenêtre 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 lors des étapes précédentes. 

2.3 Importation/exportation des informations relatives au consentement vers d'autres sources

Dans certains cas, une application native peut contenir des webviews afin d'afficher des informations, telles que des publicités ou du contenu. Afin de transmettre les informations de consentement du SDK vers la webview pour éviter la duplication des bannières de cookies, vous pouvez récupérer la chaîne de consentement à l'aide de exportCMPInfo. Cela exportera la chaîne de consentement avec le consentement et toutes les données supplémentaires requises par le CMP. Vous pouvez ensuite transmettre ces informations au CMP présent dans votre vue Web en les ajoutant à l'URL appelée dans la vue Web. Pour plus d'informations, veuillez consulter notre page dédiée à ce cas d'utilisation. 

Un autre cas d'utilisation concerne le consentement multi-appareils, où vous importez le consentement d'une autre source vers l'appareil. Dans ce cas, vous pouvez remplacer checkAndOpen par importCMPInfo par 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 qui vous permettent de réagir à différents événements au cours du flux de consentement. Ces écouteurs vous 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 qui peut être utilisé pour supprimer l'écouteur lorsqu'il n'est plus nécessaire. Pour supprimer un écouteur, appelez .remove() sur l'abonnement renvoyé.

Écouteurs d'événements disponibles

addConsentListener(callback)

Cet événement est déclenché lorsque l'utilisateur soumet ses choix de consentement (qu'il s'agisse d'accepter, de refuser ou de personnaliser ses préférences).

Paramètres :

callback: (consent: string, jsonObject: Object) => void
consent: La chaîne de consentement au format IAB TCF
jsonObject: 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)
Cet événement est déclenché lorsque la fenêtre de consentement s'affiche à l'écran.

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)

Cet écouteur est déclenché lorsque la fenêtre de consentement est fermée, que l'utilisateur ait fait un choix ou l'ait ignorée.

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)

Cet écouteur est déclenché lorsqu'une erreur survient pendant le processus de consentement, comme des pannes réseau, des erreurs de délai d'expiration ou des problèmes de configuration.

Paramètres :

callback: (error: string) => void
error: Une chaîne décrivant l'erreur qui s'est produite

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)

Cet événement est déclenché lorsque l'utilisateur clique sur un lien dans la couche de consentement (comme les liens vers la politique de confidentialité ou les conditions d'utilisation).

Paramètres :

callback: (url: string) => void
url: 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 des outils de suivi ou d'analyse dans votre application, nous vous recommandons de lire le guide sur la mise en œuvre de l'ATT ici.

4. Création d'une mise en page personnalisée

Pour créer une vue personnalisée de WKWebView, par exemple en modifiant son positionnement ou son arrière-plan, vous pouvez modifier la configuration transmise à l'objet ConsentLayerUIConfig comme indiqué ci-dessous :

ConsentLayerUIConfig(
    position: .halfScreenTop,
    backgroundStyle: .dimmed(.grey, 0.75),
    cornerRadius: 20,
    respectsSafeArea: false,
    allowsOrientationChanges: true)

5. Connexion

Lorsque vous utilisez notre SDK iOS, vous pouvez avoir besoin de déboguer ou d'analyser les informations de journal à diverses fins. Les journaux générés par notre SDK sont classés sous « CMP », ce qui vous permet de filtrer et d'afficher facilement uniquement les journaux pertinents. Pour plus d'informations, veuillez vous reporter à cette section de notre documentation.

6. Mises en garde relatives à la plateforme

• Expo n'est pas pris en charge
• Android ignore actuellement les remplacements de backgroundStyle et les positions customRect/custom ; il affiche toujours un arrière-plan en plein écran grisé.
• iOS prend en charge les options « dimmed », « color », « blur », « none » et « customRect ».