⌨️Integración del SDK

Configurar proyecto

Para integrar nuestro SDK para React Native, es necesario ejecutar el siguiente comando en la raíz del proyecto:

npm install @wortise/react-native-sdk --save

La última versión del SDK para React Native es la 1.5.1

A continuación, hay que añadir los siguientes repositorios Maven en el bloque allprojects > repositories del fichero android/build.gradle:

allprojects {
    repositories {
        ...
        maven { url 'https://maven.wortise.com/artifactory/public' }
        
        maven { url 'https://android-sdk.is.com/' }
        maven { url 'https://artifact.bytedance.com/repository/pangle' }
    }
}

Por último, si aún no se ha realizado, se debe activar el soporte para MultiDex añadiendo la siguiente línea en el bloque android > defaultConfig del fichero android/app/build.gradle:

android {
    ...
    defaultConfig {
        ...
        multiDexEnabled true
    }
}

Configurar Manifest

Para mejorar los eCPM de los partners Open Bidding de Google, es necesario agregar un elemento <meta-data> en el fichero android/app/src/main/AndroidManifest.xml, dentro del bloque <application>.

Este valor puede ser localizado en nuestro dashboard, dentro de los detalles de cada aplicación, bajo el nombre Google App ID.

<manifest>
    ...
    <application>
        ...
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    </application>
</manifest>

Solicitar permisos (Opcional)

El paso siguiente es solicitar los permisos en el lugar que creas mas conveniente. Estos permisos son necesarios para recopilar datos del dispositivo y así poder mostrar los mejores anuncios en base a su localización real y atributos varios. Este paso es recomendable pero completamente opcional.

En primer lugar, añade los siguientes permisos en el archivo android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Además, si tu aplicación está dirigida a Android 10 o superior (por ejemplo, el valor de targetSdkVersion es 29 o mayor), es necesario añadir el siguiente permiso adicional:

<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

Al añadir el permiso ACCESS_BACKGROUND_LOCATION, Google Play obliga a rellenar la declaración de permisos de ubicación para publicar la app.

La opción más recomendable es obtener la aprobación de Google para poder utilizar dicho permiso.

En caso de no poder obtenerla, puedes declarar temporalmente que la app no cumple actualmente con las políticas de Google Play, para poder utilizar el permiso hasta el próximo 29 de Marzo. Una vez alcanzada esta fecha, deberás publicar una actualización de la app sin el permiso, para cumplir con las políticas de Google Play y evitar cualquier tipo de inconveniente.

Y, por último, realiza la solicitud de los permisos para que los usuarios puedan otorgar su autorización, tal y como se indica en la documentación oficial de React Native.

Ejemplo

Ejemplo de solicitud de permisos en React Native.

import { PermissionsAndroid } from 'react-native';

await PermissionsAndroid.requestMultiple([
  PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
  PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,
  PermissionsAndroid.PERMISSIONS.ACCESS_BACKGROUND_LOCATION
]);

Solicitar consentimiento

Es muy recomendable solicitar consentimiento al usuario para poder mostrar anuncios personalizados. Esto permitirá mostrar contenido que resulte de mayor interés y generar ingresos superiores.

Puede consultar el siguiente apartado para implementar esta solicitud y obtener el consentimiento de los usuarios: Consentimiento del usuario

Inicializar SDK

Existen dos opciones para realizar la inicialización del SDK:

Opción 1 (recomendado)

La opción más recomendada es realizar la inicialización desde la clase Application de la app. Para ello, hay que integrar el siguiente código en el método onCreate() del fichero MainApplication.java:

WortiseSdk.initialize(this, "tu app key");

Opción 2

En esta opción, la inicialización del SDK se realizaría directamente desde el código JavaScript del proyecto. Para ello, hay que añadir las siguientes líneas de código en un lugar apropiado:

import { RNWortiseSdk } from '@wortise/react-native-sdk';

await RNWortiseSdk.initialize('tu app key');

Modo de prueba

Para verificar la integración, el SDK ofrece un modo de prueba (test mode) que permite que la app siempre reciba anuncios.

Además de la opción que hay disponible en nuestro dashboard, es posible activar este modo de prueba programáticamente, desde el propio SDK, utilizando el siguiente código:

import { RNWortiseAdSettings } from '@wortise/react-native-sdk';

RNWortiseAdSettings.setTestEnabled(true);

Compartir datos de los usuarios

Si la aplicación conoce algunos datos de los usuarios (edad, género, etc.), dicha información puede ser compartida con el SDK para que podamos mostrar anuncios de mayor interés, y así poder obtener un eCPM superior.

Para compartir esta información, es necesario hacer uso de los métodos que proporciona la clase RNWortiseDataManager, tal y como se muestra a continuación:

import {
  RNWortiseDataManager,
  RNWortiseUserGender
} from '@wortise/react-native-sdk';

// Compartir la edad
RNWortiseDataManager.setAge(20);

// Compartir el género
RNWortiseDataManager.setGender(RNWortiseUserGender.MALE);

// Compartir direcciones de email
RNWortiseDataManager.setEmails(["[e-mail]", "[e-mail]"]);
RNWortiseDataManager.addEmail("[e-mail]");