[Aleteo] 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
La biblioteca wrapper para Flutter está disponible en pub.devEn la línea de comandos o en la ventana de terminal, ejecute:
flutter pub add cm_cmp_sdk_v3Esto agregará una línea como esta al pubspec.yaml de su paquete (y ejecutará un archivo implícito). flutter pub get):
dependencies:
cm_cmp_sdk_v3: ^3.3.0Alternativamente, su editor podría admitir flutter pub get. Consulte los documentos de su editor para obtener más información.
Además, asegúrese de que build.gradle archivo dentro del android/app La carpeta de tu proyecto tiene la dependencia correcta declarada. Este es un puente nativo de Flutter/Dart, por lo que todas las dependencias deben estar sincronizadas. Lo mismo aplica para iOS: asegúrate de que tu podspec El archivo refleja la dependencia adecuada.
Android
dependencies {
implementation "net.consentmanager.sdkv3:cmsdkv3:3.3.0" // Make sure this line is inserted
}iOS
s.dependency "cm-sdk-ios-v3", "3.3.0"Importar
Ahora en tu código Dart, puedes usar:
import 'package:cm_cmp_sdk_v3/cm_cmp_sdk_v3.dart';1.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:
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'CMP SDK Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final CMPmanager _cmpManager = CMPmanager.instance;
String _lastAction = '';
@override
void initState() {
super.initState();
_initializeCMP();
}
Future<void> _initializeCMP() async {
try {
await _cmpManager.setUrlConfig(
id: "YOUR-CODE-ID-GOES-HERE",
domain: "delivery.consentmanager.net", // or any other domain from your CMP dashboard
appName: "CMDemoAppFlutter", // or any other app name, according to
language: "EN",
);
_cmpManager.addEventListeners(
didReceiveConsent: (consent, jsonObject) {
setState(() => _lastAction = 'Received consent: $consent');
},
didShowConsentLayer: () {
setState(() => _lastAction = 'Consent layer shown');
},
didCloseConsentLayer: () {
setState(() => _lastAction = 'Consent layer closed');
},
didReceiveError: (error) {
setState(() => _lastAction = 'Error: $error');
},
);
} catch (e) {
setState(() => _lastAction = 'Initialization error: $e');
}
}
}En caso de que decidas utilizar un modelo de vista, así es como se vería:
class CmpViewModel extends ChangeNotifier {
static final CmpViewModel _instance = CmpViewModel._internal();
static CmpViewModel get instance => _instance;
late CMPmanager _cmpSdkPlugin;
String _callbackLogs = '';
CmpViewModel._internal();
Future<void> initCmp() async {
try {
_cmpSdkPlugin = CMPmanager.instance;
await CMPmanager.instance.setUrlConfig(
appName: "CMDemoAppFlutter",
id: "YOUR-CODE-ID-GOES-HERE",
language: "EN",
domain: "delivery.consentmanager.net",
);
_addEventListeners();
await _cmpSdkPlugin.checkAndOpen();
} catch (e) {
_logCallback('Initialization error: $e');
rethrow;
}
}
void _addEventListeners() {
_cmpSdkPlugin.addEventListeners(
didShowConsentLayer: () => _logCallback('Consent layer opened'),
didCloseConsentLayer: () => _logCallback('Consent layer closed'),
didReceiveError: (error) => _logCallback('Error: $error'),
didReceiveConsent: (consent, jsonObject) =>
_logCallback('Consent: $consent\nData: $jsonObject'),
didChangeATTStatus: (oldStatus, newStatus, last) =>
_logCallback('ATT Status changed: $oldStatus -> $newStatus'),
);
}
void _logCallback(String message) {
_callbackLogs = "$message\n$_callbackLogs";
notifyListeners();
}
Future<void> forceOpen() async {
try {
await _cmpSdkPlugin.forceOpen();
Fluttertoast.showToast(msg: 'Opening consent layer');
} catch (e) {
Fluttertoast.showToast(msg: 'Error opening consent layer: $e');
}
}
Future<void> getGoogleConsentStatus() async {
try {
final settings = await _cmpSdkPlugin.getGoogleConsentModeStatus();
final message = settings.entries.map((e) => '${e.key}: ${e.value}').join('\n');
_logCallback('Google Consent Mode Settings:\n$message');
Fluttertoast.showToast(msg: 'Check logs for Google Consent Mode settings');
} catch (e) {
Fluttertoast.showToast(msg: 'Error getting Google Consent Mode status: $e');
}
}
// .
// .
// .
// all the other method's implementations.
}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.
Future<void> getUserStatus() async {
try {
final status = await _cmpSdkPlugin.getUserStatus();
final message = '''
User Choice: ${status.hasUserChoice}
TCF: ${status.tcf}
Additional Consent: ${status.addtlConsent}
Regulation: ${status.regulation}
Vendors Status:
${status.vendors.entries.map((e) => '${e.key}: ${e.value}').join('\n')}
Purposes Status:
${status.purposes.entries.map((e) => '${e.key}: ${e.value}').join('\n')}
''';
_logCallback(message);
Fluttertoast.showToast(msg: 'Check logs for User Status details');
} catch (e) {
Fluttertoast.showToast(msg: 'Error getting user status: $e');
}
}
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()
void openConsentLayer() async {
await _cmpSdkPlugin.forceOpen();
notifyListeners();
}
Este 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:
_cmpSdkPlugin.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:
await _cmpSdkPlugin.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.
