[Reaccionar nativo] 1. consentmanager Integración SDK
Tenga en cuenta que esta versión del SDK de CMP se reconstruyó completamente desde cero, por lo que representa una Un cambio importante en relación con la versión 2, ya que se cambiaron el nombre de todos los métodos y de las firmas, y ahora también se ofrecen devoluciones de llamadas a casi todos los métodos. En todos los casosDeberá modificar su código y actualizar sus dependencias para garantizar que su aplicación móvil funcione correctamente. Además, cabe mencionar que, según la versión v2 integrada en su aplicación, Se borrarán todos los datos que la versión anterior de nuestro SDK conservaba en los dispositivos de los usuarios., lo que obligará a la aplicación a volver a mostrar la capa de consentimiento.
Debido a la naturaleza de React Native como framework y a las constantes solicitudes conflictivas y casos extremos de nuestra base de clientes, ofrecemos el puente de React Native con los SDK nativos subyacentes como punto de partida, que intenta satisfacer todas las solicitudes al máximo. Si por alguna razón necesita alguna solicitud, le animamos a bifurcar nuestros repositorios y adaptarlos a sus propias necesidades. Ofrecemos dos repositorios, uno para... arquitectura antigua, y otro para el nueva arquitectura.
Nuestro SDK React Native es, de hecho, un puente hacia el lenguaje nativo subyacente. iOS y Android SDK. Para más información sobre nuestras API, consulte las versiones específicas de cada plataforma.
En este documento, encontrará información general sobre cómo integrar nuestro SDK en su proyecto. Para más detalles, consulte la documentación de referencia de nuestra API. iOS y Android.
1. Instalación
consentmanager El SDK es una solución integral para gestionar el consentimiento del usuario en aplicaciones móviles. Diseñado para gestionar el cumplimiento del RGPD, las preferencias de privacidad del usuario y la transparencia del seguimiento de anuncios, este SDK proporciona una integración perfecta con las plataformas iOS y Android. Además, ofrece complementos/puentes envolventes para React Native, Flutter y Unity, lo que lo hace versátil en varios entornos de desarrollo.
Este documento cubre el procedimiento de instalación y las funciones disponibles para nuestros clientes que desarrollan aplicaciones con React Native para tener acceso a nuestro SDK CMP de gestión de consentimiento a través de nuestro React Native Native Bridge.Para más detalles, consulte nuestra Referencia de la API documentación.
1.1 Pasos - Descripción de alto nivel
-
Integración y Configuración:
- Integre el SDK en su aplicación.
- Configure los ajustes del SDK según sus necesidades.
-
Creación de una instancia y visualización de la capa de consentimiento:
- Al iniciar la aplicación, cree una instancia de
CMPManagerclase. Esta instancia se encargará del proceso de consentimiento. - El SDK mostrará automáticamente la pantalla de consentimiento si es necesario.
- Al iniciar la aplicación, cree una instancia de
-
Tratamiento de los datos de consentimiento del usuario:
- Una vez que se recopilan 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. Tendrás información sobre consentimientos rechazados o aceptados, proveedores y propósitos.
1.2 API de configuración de un vistazo
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 para NPM (los ancianos y nuevo arco) y nuestros repositorios públicos (los archivos tar para enlaces directos se pueden encontrar en los ancianos y nuevo arco). Ejecute esta línea en su terminal:
npm install cm-sdk-react-native-v3 // For the old architecture
npm install cm-sdk-react-native-v3-new-arch // For the new architectureVinculación (React Native 0.59 y versiones anteriores)
Si está utilizando React Native 0.59 o inferior, debe vincular los módulos nativos manualmente:
react-native link cm-sdk-react-native-v31.4 Creación de una instancia y visualización de la capa de consentimiento
Necesitará configurar su información de CMP a través de setUrlConfig método, que maneja su configuración de CMP, como el ID de código y el idioma predeterminado, y setWebViewConfig, Esto configurará la apariencia de la vista web que mostrará la capa de consentimiento. Después, estará listo para usar 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. boolean El parámetro 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 se mostrará (false) la página de diseño predeterminada de su CMP.
Tenga en cuenta que las funcionalidades relacionados con la determinación de si el consentimiento es necesario o no, así como la visualización de la capa de consentimiento, Depende de una conexión de red confiable. Si no hay conexión disponible o si el mecanismo de reintento no logra llegar a nuestro servidor, el didReceiveError El evento devolverá un error de tiempo de espera, y por lo tanto el SDK será totalmente incapaz de determinar la necesidad de un consentimiento, ya que será totalmente incapaz de mostrar la capa de consentimiento. Asegúrese de que su lógica tenga esto en cuenta.
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 de acuerdo con las configuraciones de su CMP (elegidas a través del Code-ID de su CMP), recopilará los datos y conservará la información de consentimiento en el área NSUserDefaults/UserPreferences del dispositivo, para que los otros SDK puedan leerlos.
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 verificar y recuperar la información de consentimiento. El principal es getUserStatus, como se muestra en el ejemplo a continuación. 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 otros métodos, consulte nuestra documentación API completa del nativo subyacente. iOS y Android SDK.
2.2 Reapertura de la capa de consentimiento para verificar las elecciones de los usuarios
Para permitir que el usuario verifique o cambie sus opciones, simplemente puede llamar 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 de 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 del SDK a la vista web y evitar banners de cookies duplicados, puede recuperar la cadena de consentimiento mediante exportCMPInfoEsto exportará la cadena de consentimiento con el consentimiento y todos los datos adicionales que necesita la CMP. Puede pasar esta información a la CMP que se encuentra en su vista web añadiéndola a la URL que se llama en la vista web. Para más información, consulte nuestra página dedicada para este caso de uso.
Otro caso de uso es el consentimiento entre dispositivos, donde se importa el consentimiento de otra fuente al dispositivo. En este caso, se reemplaza el caso. checkAndOpen by importCMPInfo con la cadena de consentimiento que recuperó del sitio web, por ejemplo.
2.4 Escuchadores de eventos
El SDK proporciona varios detectores de eventos que permiten reaccionar a diferentes eventos durante el flujo de consentimiento. Estos detectores permiten rastrear las interacciones del usuario, gestionar errores y sincronizar el estado de la aplicación con el ciclo de vida de la capa de consentimiento.
Todos los oyentes devuelven un objeto de suscripción que permite eliminarlos cuando ya no son necesarios. Para eliminar un oyente, se llama a .remove() en la suscripción devuelta.
Oyentes de eventos disponibles
addConsentListener(callback)
Este oyente 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) => voidconsent:La cadena de consentimiento en formato IAB TCFjsonObject:Un objeto JSON que contiene información detallada del 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 oyente se activa cuando se muestra la capa de consentimiento al usuario.
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 oyente se activa cuando se cierra la capa de consentimiento, independientemente de si el usuario tomó una decisión o la descartó.
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 oyente se activa cuando ocurre un error durante el proceso de consentimiento, como fallas de red, errores de tiempo de espera o problemas de configuración.
parámetros:
callback: (error: string) => voiderror:Una cadena que describe el error que ocurrió
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 oyente se activa cuando el usuario hace clic en un enlace dentro de la capa de consentimiento (como enlaces a políticas de privacidad o términos de servicio).
parámetros:
callback: (url: string) => voidurl: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 esté utilizando seguimiento o análisis en su aplicación, le recomendamos leer la guía en Implementación del 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, puede cambiar 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 sesión
Al utilizar nuestro SDK de iOS, es posible que necesite depurar o analizar información de registro para diversos fines. Los registros generados por nuestro SDK están etiquetados como "CMP", lo que le permite filtrar y ver fácilmente solo los registros relevantes. Para obtener más información, consulte esta sección de nuestra documentación.
6. Advertencias sobre la plataforma
- AAndroid actualmente ignora las anulaciones de backgroundStyle y customRect/custom posición; siempre muestra un fondo de pantalla completa atenuado.
- iOS admite atenuado/color/desenfoque/ninguno y rectángulo personalizado.
