1. Instalación

consentmanager SDK es una solución integral para gestionar el consentimiento de los usuarios en aplicaciones móviles. Diseñado para gestionar el cumplimiento del RGPD, las preferencias de privacidad de los usuarios y la transparencia en el seguimiento publicitario, este SDK ofrece una integración perfecta para las plataformas iOS y Android. Además, ofrece plugins/puentes de envoltura para React Native, Flutter y Unity, lo que lo hace versátil en diversos entornos de desarrollo.

Este documento describe el procedimiento de instalación y las funciones que ponemos a disposición de nuestros clientes que desarrollan aplicaciones con React Native para que puedan acceder a nuestro SDK de gestión del consentimiento (CMP) a través de nuestro React Native Native Bridge. Para obtener más detalles, consulta nuestra documentación de referencia de la API. 

1.1 Pasos: descripción general

1. Integración y configuración:

   • Integra el SDK en tu aplicación.
   • Configura los ajustes del SDK según tus necesidades.

2. Creación de una instancia y visualización de la capa de consentimiento:

   • Al iniciar la aplicación, crea una instancia de la CMPManager clase. Esta instancia se encargará del proceso de consentimiento.
   • El SDK mostrará automáticamente la pantalla de consentimiento si es necesario.

3. Tratamiento de los datos de consentimiento de los usuarios:

   • Una vez recopilados los consentimientos, la información se almacena y está disponible para su consulta a través de diferentes propiedades y métodos expuestos por nuestro SDK. Dispondrás de información sobre los consentimientos rechazados o aceptados, los proveedores y los fines.

1.2 Resumen de la API de configuración

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 (a través del ayudante BackgroundStyle):
  • dimmed(color?, opacity?)
  • color(color)
  • blur(blurEffectStyle: light | dark | extraLight)
  • none
• ATTStatus: NotDetermined (0), Restricted (1), Denied (2), Authorized (3)
  

1.3 Integración y configuración

NPM

Hemos publicado nuestro puente React Native tanto en NPM (arquitectura antigua y nueva) como en nuestros repositorios públicos (se pueden encontrar archivos tar para enlaces directos tanto para la arquitectura antigua como para la nueva). Ejecuta esta línea en tu 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

Enlaces (React Native 0.59 y versiones anteriores)

Si utilizas React Native 0.59 o una versión anterior, debes vincular los módulos nativos manualmente:

react-native link cm-sdk-react-native-v3

1.4 Creación de una instancia y visualización de la capa de consentimiento

Tendrás que configurar tu información de CMP a través del setUrlConfig método, que gestiona tu configuración de CMP, como el Code-ID y el idioma predeterminado, y setWebViewConfig, que configurará el aspecto de la WebView que mostrará la capa de consentimiento. Una vez hecho esto, ya estás listo para utilizar el método checkAndOpen(false) para obtener automáticamente los datos necesarios de nuestro servidor y determinar si es necesario mostrar la pantalla de consentimiento o no. El boolean determina si la capa de consentimiento se abrirá en la página de configuración (true) que permitirá a los usuarios personalizar sus opciones o si la capa de consentimiento mostrará (false) la página de diseño predeterminada de su CMP.  

Ejemplo:

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);
    }
};

El SDK mostrará automáticamente la pantalla de consentimiento en este punto (banner de cookies), a través de un WebView creado por nuestro SDK, que mostrará la capa de consentimiento con el texto y los botones según tus configuraciones de CMP (seleccionadas mediante el Code-ID de tu CMP), recopilará los datos y almacenará la información de consentimiento en el área NSUserDefaults/UserPreferences del dispositivo, para que los demás SDK puedan leerla.

2. Tratamiento de los datos de consentimiento de los usuarios

2.1 Comprobación de los consentimientos de los usuarios

Nuestro SDK ofrece diferentes métodos para comprobar y recuperar la información de consentimiento. El principal es getUserStatus, tal y como se muestra en el ejemplo siguiente. Para más información, 

// 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'
    ),
  },

Para obtener más información sobre los demás métodos, consulta nuestra documentación completa de la API de los SDK nativos subyacentes para iOS y Android. 

2.2 Reabrir la ventana de consentimiento para comprobar las elecciones de los usuarios

Para que el usuario pueda verificar o cambiar sus opciones, basta con llamar a forceOpen()

const buttons = [
	{
      title: 'Force Open Consent Layer',
      onPress: () => handleApiCall(
        () => CmSdkReactNativeV3.forceOpen(false),
        () => 'Consent Layer opened'
      ),
    },
]

Este método mostrará la capa de consentimiento a través de la misma instancia de WebView creada en los pasos anteriores. 

2.3 Importación/exportación de información sobre el consentimiento a otras fuentes

En algunos casos, una aplicación nativa puede contener vistas web para mostrar información, como publicidad o contenido. Para transmitir la información de consentimiento desde el SDK a la vista web y evitar banners de cookies duplicados, puedes recuperar la cadena de consentimiento utilizando exportCMPInfo. Esto exportará la cadena de consentimiento con el consentimiento y todos los datos adicionales que necesita el CMP. A continuación, puedes pasar esta información al CMP que se encuentra en tu vista web añadiéndola a la URL que se llama en la vista web. Para obtener más información, consulta nuestra página dedicada a este caso de uso. 

Otro caso de uso es el consentimiento entre dispositivos, en el que importarás el consentimiento de otra fuente al dispositivo. En este caso, puedes sustituir checkAndOpen por importCMPInfo por la cadena de consentimiento que hayas obtenido del sitio web, por ejemplo. 

2.4 Escuchas de eventos

El SDK proporciona varios detectores de eventos que te permiten reaccionar ante diferentes eventos durante el flujo de consentimiento. Estos detectores te permiten realizar un seguimiento de las interacciones de los usuarios, gestionar errores y sincronizar el estado de tu aplicación con el ciclo de vida de la capa de consentimiento.

Todos los oyentes devuelven un objeto de suscripción que se puede utilizar para eliminar el oyente cuando ya no sea necesario. Para eliminar un oyente, llama a .remove() en la suscripción devuelta.

Escuchas de eventos disponibles

addConsentListener(callback)

Este listener se activa cuando el usuario envía sus opciones de consentimiento (ya sea aceptando, rechazando o personalizando sus preferencias).

Parámetros:

callback: (consent: string, jsonObject: Object) => void
consent: La cadena de consentimiento en formato IAB TCF
jsonObject: Un objeto JSON que contiene información detallada sobre el consentimiento

Ejemplo:

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)
Este listener se activa cuando se muestra al usuario la ventana de consentimiento.

Parámetros:

callback: () => void

Ejemplo:

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)

Este listener se activa cuando se cierra la ventana de consentimiento, independientemente de si el usuario ha seleccionado una opción o la ha rechazado.

Parámetros:

callback: () => void

Ejemplo:

import { addCloseConsentLayerListener } from 'cm-sdk-react-native-v3';

const closeSubscription = addCloseConsentLayerListener(() => {
    console.log('Consent layer has been closed');
    // Resume normal app flow
});

addErrorListener(callback)

Este listener se activa cuando se produce un error durante el proceso de consentimiento, como fallos de red, errores de tiempo de espera o problemas de configuración.

Parámetros:

callback: (error: string) => void
error: Una cadena que describe el error que se ha producido

Ejemplo:

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)

Este listener se activa cuando el usuario hace clic en un enlace dentro de la capa de consentimiento (como los enlaces a la política de privacidad o a los términos de servicio).

Parámetros:

callback: (url: string) => void
url: La URL en la que se hizo clic

Ejemplo:

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. Integración con Apple Tracking Transparency (ATT)

En caso de que utilices herramientas de seguimiento o análisis en tu aplicación, te recomendamos que leas la guía sobre la implementación de ATT aquí.

4. Creación de un diseño personalizado

Para crear una vista personalizada de WKWebView, como cambiar su posición o fondo, por ejemplo, puedes modificar la configuración pasada al objeto ConsentLayerUIConfig como se muestra a continuación:

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

5. Inicio de sesión

Al utilizar nuestro SDK para iOS, es posible que necesites depurar o analizar la información de los registros para diversos fines. Los registros generados por nuestro SDK están etiquetados como «CMP», lo que te permite filtrarlos fácilmente y ver solo los registros relevantes. Para obtener más información, consulta esta sección de nuestra documentación.

6. Advertencias sobre la plataforma

• Expo no es compatible
• Actualmente, Android ignora las modificaciones de backgroundStyle y las posiciones customRect/custom; siempre muestra un fondo de pantalla completa atenuado.
• iOS admite las opciones «atenuado», «color», «desenfocado», «ninguno» y «customRect».