[Reaccionar nativo] 1. consentmanager Integración SDK
En este documento encontrará información general sobre cómo integrar nuestro SDK a su proyecto. Para obtener más detalles, consulte nuestra Referencia de la API documentación.
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 del usuario y la transparencia del seguimiento de anuncios, este SDK proporciona una integración perfecta para las plataformas iOS y Android. Además, ofrece complementos y puentes de contenedor para React Native, Flutter y Unity, lo que lo hace versátil en varios entornos de desarrollo.
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.1 Integración y configuración
NPM
Ejecute esta línea en su terminal:
npm install cmp-sdk-react-native-v3Vinculació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 cmp-sdk-react-native-v31.2 Creación de una instancia y visualización de la capa de consentimiento
Dentro de tu código, debes crear una instancia de la clase CMPManagerNecesitará configurar dos objetos que se pasarán al método getInstance: UrlConfig, que maneja la configuración de su CMP, como el ID de código y el idioma predeterminado, y ConsentLayerUIConfig. que configurará la apariencia de la vista web que mostrará la capa de consentimiento. Después de eso, estará listo para usar el método. checkWithServerAndOpenIfNecessary() para obtener automáticamente los datos necesarios de nuestro servidor y determinar si es necesario mostrar la pantalla de consentimiento o no. Si es así, el SDK mostrará automáticamente la pantalla de consentimiento en este punto, 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 sus configuraciones de CMP (elegidas a través del ID de código de su CMP), recopilará los datos y conservará la información de consentimiento en el área NSUserDefaults/UserPreferences del dispositivo, para que la aplicación pueda mostrar los anuncios específicos en consecuencia.
Tenga en cuenta que las funciones relacionadas con la determinación de si se necesita o no el consentimiento, así como la visualización de la capa de consentimiento, dependen de una conexión de red fiable. Si no hay conexión disponible o si el mecanismo de reintento no logra llegar a nuestro servidor, el evento didReceiveError devolverá un error de tiempo de espera, por lo que el SDK no podrá determinar la necesidad de un consentimiento, ya que no podrá mostrar la capa de consentimiento. Asegúrese de que su lógica tenga esto en cuenta.
Ejemplo:
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 Tratamiento de los datos de consentimiento de los usuarios
Comprobación de los consentimientos de los usuarios
Nuestro SDK ofrece distintos métodos para comprobar y recuperar información de consentimiento. Los métodos principales se muestran en el siguiente ejemplo:
// 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}`
),
},
]Para obtener más información sobre los otros métodos, consulte nuestra página completa. Documentación de la API.
Reapertura de la capa de consentimiento para verificar las opciones de los usuarios
Para permitir que el usuario verifique o cambie sus opciones, simplemente puede llamar openConsentLayer()
CmSdkReactNativeV3.openConsentLayerEste método mostrará la capa de consentimiento a través de la misma instancia de WebView creada en los pasos anteriores.
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 desde el SDK a la vista web, puede recuperar la cadena de consentimiento mediante:
CmSdkReactNativeV3.exportCMPInfoEsto exportará la información de consentimiento y todos los demás datos que necesita la CMP. Luego, puede pasar esta información a la CMP que se encuentra en su vista web agregándola a la URL que se llama en la vista web.
Si, de lo contrario, necesita importar la cadena de consentimiento mediante el SDK, puede utilizar el siguiente ejemplo:
() => CmSdkReactNativeV3.importCMPInfo(
'Q1FERkg3QVFERkg3QUFmR01CSVRCQkVnQUFBQUFBQUFBQWlnQUFBQUFBQUEjXzUxXzUyXzUzXzU0XzU1XzU2XyNfczI3ODlfczI3OTBfczI3OTFfczI2OTdfczk3MV9VXyMxLS0tIw'
)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í.
Crear 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)Inicio de 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.
