SDK de React Native - Integración básica

Documento

Antes de empezar: Requisitos previos del SDK

Siga los pasos indicados en Integración de un SDK Singular:Planificación y requisitos previos.

Estos pasos son requisitos previos para cualquier integración de Singular SDK.


Instale el SDK

Para añadir el SDK de Singular React a su proyecto:

  1. Abra el terminal en el directorio raíz de su proyecto.
  2. Descargue el paquete SDK a su proyecto con el siguiente comando:

    bash
    npm install singular-react-native --save
    • Si estás usando React Native 0.60+, el paquete Singular se auto-enlazará a tu proyecto.
    • Si estás utilizando la versión 0.59 o anterior de React Native, ejecuta lo siguiente para vincular el código puente nativo del paquete Singular a tu proyecto:

      bash
      react-native link singular-react-native
    • Si está utilizando Expo: Después de instalar el SDK de Singular como se ha descrito anteriormente, añade el paquete a la matriz de plugins de tu app.json o app.config.js:
      bash
      "expo": {
        "plugins": ["singular-react-native"]
      }
      A continuación, reconstruya su aplicación utilizando la guía de Expo para personalizar el código nativo.

Establecer requisitos previos

Requisitos previos de iOS

En el directorio raíz del proyecto, ejecute el siguiente comando:

bash
cd ios && pod install

Requisitos previos Android

En el archivo project/build.gradle, dentro de la sección allprojects, añade lo siguiente a los repositorios Maven de tu aplicación:

project/build.gradle
allprojects {
  repositories {
    maven { url 'https://maven.singular.net/' }
  }
}

Añadir permisos y dependencias requeridas de Android

Añade estos permisos bajo la etiqueta <manifest> en tu archivo AndroidManifest.xml:

AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="BIND_GET_INSTALL_REFERRER_SERVICE" />
<uses-permission android:name="com.android.vending.CHECK_LICENSE" />
<uses-permission android:name="com.google.android.gms.permission.AD_ID" />
Excluye el permisocom.google.android.gms.permission.AD_ID si estás integrando el SDK Kids.

Para admitir el referente de instalación de Samsung Galaxy Store, añada lo siguiente:

AndroidManifest.xml
<queries>
   <package android:name="com.sec.android.app.samsungapps" />
</queries>

Si has desactivado las dependencias transitivas para el SDK Singular, añade lo siguiente a tu app/build.gradle:

app/build.gradle
dependencies {
    ...
    implementation 'com.android.installreferrer:installreferrer:2.2'
    implementation 'com.google.android.gms:play-services-appset:16.0.0'
    ...
}

Requisitos de configuración si utiliza Proguard

Configuración de ProGuard para Singular SDK en React Native Android

Al integrar el SDK de Singular Android en su aplicación React Native Android, debe añadir reglas específicas de ProGuard para garantizar que el SDK funciona correctamente en las compilaciones de lanzamiento. ProGuard (o R8, su sustituto moderno) está activado por defecto en las versiones de React Native para optimizar y ofuscar el código. Sin las reglas ProGuard adecuadas, Singular SDK o sus dependencias pueden eliminarse u ofuscarse, causando problemas en tiempo de ejecución.

Siga estos pasos para configurar ProGuard para Singular SDK:

  1. Localice el archivo de reglas de ProGuard: En el proyecto React Native, vaya al archivo android/app/proguard-rules.pro. Este archivo contiene reglas de ProGuard personalizadas para su aplicación.
  2. Añada las reglas ProGuard de Singular SDK: Añada las siguientes líneas a android/app/proguard-rules.pro para conservar Singular SDK y sus dependencias:
proguard-rules.pro
# Preserve Singular SDK classes
-keep class com.singular.sdk.** { *; }

# Preserve Android Install Referrer library
-keep public class com.android.installreferrer.** { *; }

# Uncomment the following line if you are using the Singular 'revenue' function with Google Play Billing Library
#-keep public class com.android.billingclient.** { *; }

Integrar el SDK

Nota: Recuerde seguir cumpliendo las distintas leyes de privacidad promulgadas en las regiones en las que hace negocios, incluidas, entre otras, GDPR, CCPA y COPPA, al implementar los SDK de Singular. Para obtener más información, consulte Prácticas de inclusión y exclusión de SDK.

El código de inicialización del SDK debe ejecutarse cada vez que se abra la aplicación. Es un prerrequisito para toda la funcionalidad de atribución de Singular, y también envía una nueva sesión de usuario a Singular. Las sesiones se utilizan para calcular la retención de usuarios.

Importación de la biblioteca de Singular

En su archivo App.tsx, añada el siguiente código para importar las clases de Singular.

App.tsx
import { Singular, SingularConfig, Events, Attributes } from 'singular-react-native';

Inicialización del SDK de Singular

  1. Cree un objeto SingularConfig. El objeto contiene su clave SDK y su secreto SDK (obtenga la clave y el secreto iniciando sesión en su cuenta de Singular y accediendo a"Herramientas de desarrollador > Integración SDK > Claves SDK").
  2. Si lo desea, añada varios métodos de configuración para establecer o activar diversas funciones del SDK.

  3. A continuación, utilice el métodoinit para inicializar el SDK, pasando el objeto SingularConfig objeto.

Por ejemplo

App.tsx
import React, { useEffect } from 'react';
import { Singular, SingularConfig, Events, Attributes } from 'singular-react-native';

export default function App() {
  useEffect(() => {
    // Create Singular configuration
    const config = new SingularConfig('SDK KEY', 'SDK SECRET')
      .withCustomUserId('user_123456') // Set a custom user ID for tracking
      .withLimitDataSharing(false) // Allow data sharing (set to true for compliance if needed)
      .withFacebookAppId('123456789012345') // Optional: For Facebook integration
      .withLogLevel(3) // Enable verbose logging for debugging
      .withLoggingEnabled(); // Enable SDK logs

    // Define SingularLink callback for deep linking
    const handleSingularLink = (params: any) => {
      console.log('SingularLink params:', params);
      // Example: Navigate to a specific screen based on params.deeplink
    };

    // Initialize Singular SDK
    Singular.init(config, handleSingularLink);

  }, []); // Empty dependency array ensures this runs once on app start

  return (
    // Your app's UI components
  );
}