Requisitos previos

Completa estos pasos previos antes de instalar el SDK de Singular para React Native para garantizar un proceso de integración fluido.

Instalación

Instalación del paquete del SDK

Añade el SDK de Singular para React Native a tu proyecto mediante npm. El SDK proporciona enlaces JavaScript a los SDK nativos de Singular para iOS y Android.

Instalación mediante NPM

1. Abre el terminal: ve al directorio raíz de tu proyecto.
2. Instalar el paquete: Ejecuta el siguiente comando para añadir el SDK a tu proyecto:
   bash

   npm install singular-react-native --save

Vinculación de los módulos nativos

La forma de vincular el SDK depende de tu versión de React Native y de si estás utilizando Expo.

• React Native 0.60+: El SDK se vincula automáticamente. No se requieren pasos adicionales.
• React Native 0.59 o anterior: Vincula manualmente el código del puente nativo:
  bash

  react-native link singular-react-native

• Proyectos de Expo: Después de instalar el SDK, añádelo a la configuración de tus plugins:
  app.json

  {
    "expo": {
      "plugins": ["singular-react-native"]
    }
  }

  A continuación, vuelve a compilar tu aplicación siguiendo la guía de personalización del código nativo de Expo.

Configuración de la plataforma

Configuración de iOS

Completa la configuración específica de iOS para habilitar las dependencias de CocoaPods y garantizar el correcto funcionamiento del SDK.

Instala las dependencias de CocoaPods

Ejecuta el siguiente comando desde el directorio raíz de tu proyecto para instalar las dependencias de iOS necesarias:

cd ios && pod install

Configuración de Android

Configura tus archivos de compilación de Android para añadir el repositorio Singular Maven, los permisos necesarios y las dependencias.

Añadir el repositorio de Maven

Añade el repositorio Maven de Singular al archivo build.gradle de tu proyecto para habilitar la resolución de dependencias del SDK.

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

Añadir los permisos necesarios

Añade estos permisos al archivo AndroidManifest.xml de tu proyecto bajo la etiqueta <manifest> para habilitar la funcionalidad básica del SDK.

<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" />

Compatibilidad con Samsung Galaxy Store

Para habilitar el seguimiento de referencias de instalación desde Samsung Galaxy Store, añade lo siguiente a tu AndroidManifest.xml:

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

Dependencias transitivas

Si ha desactivado las dependencias transitivas para el SDK de Singular en su configuración de Gradle, añada manualmente estas dependencias necesarias:

dependencies {
    // Required for install referrer tracking
    implementation("com.android.installreferrer:installreferrer:2.2")

    // Required for App Set ID
    implementation("com.google.android.gms:play-services-appset:16.0.0")
}

Configuración de ProGuard

Al compilar APK de lanzamiento, ProGuard (o R8) puede eliminar u ofuscar las clases del SDK . Añade estas reglas de retención para preservar la funcionalidad de Singular.

1. Localiza el archivo de ProGuard: ve a android/app/proguard-rules.pro en tu proyecto.
2. Añade reglas de retención: añade las siguientes reglas al archivo:
   proguard-rules.pro

   # Preserve Singular SDK classes
   -keep class com.singular.sdk.** { *; }
   
   # Preserve Android Install Referrer library
   -keep public class com.android.installreferrer.** { *; }
   
   # Uncomment if using Singular revenue tracking with Google Play Billing Library
   #-keep public class com.android.billingclient.** { *; }

Integración del SDK

Importar clases del SDK

Importe las clases del SDK de Singular al principio del archivo principal de su aplicación (normalmente App.tsx o App.js).

// Direct TurboModule API initialization (React Native 0.76+)

// Import Native API and EventEmitter
import NativeSingular from 'singular-react-native/js/NativeSingular';
import { NativeEventEmitter } from 'react-native';

import Singular, { SingularConfig } from 'singular-react-native';
      

Inicializar el SDK

Inicialización básica

1. Obtener credenciales: Inicie sesión en su cuenta de Singular y vaya a Herramientas para desarrolladores > Integración del SDK > Claves del SDK para encontrar su clave y secreto del SDK.
2. Crear configuración: Instancia un objeto SingularConfig, o un objeto simple para la API de TurboModule, con tus credenciales.
3. Añadir configuración: Opcionalmente, encadena métodos de configuración (heredados) o añade propiedades directamente en el objeto de configuración (TurboModule).
4. Inicializar el SDK: Llama a Singular.init() o a NativeSingular.init() para iniciar el SDK.

Ejemplo de inicialización

Inicialice el SDK en el punto de entrada de su aplicación, normalmente dentro de un gancho useEffect para garantizar que se ejecute una vez al iniciar la aplicación.

// TurboModule direct API (React Native 0.76+ New Architecture)
import React, { useEffect } from 'react';
import NativeSingular from 'singular-react-native/js/NativeSingular';

export default function App() {
  useEffect(() => {
    const config: SingularConfig = {
      apikey: 'YOUR_SDK_KEY',
      secret: 'YOUR_SDK_SECRET',
      enableLogging: true,
      logLevel: 3,
    };

    NativeSingular.init(config);

  }, []);
  
  return (
    // Your app components
  );
}

import React, { useEffect } from 'react';
import Singular, { SingularConfig } from 'singular-react-native';

export default function App() {
  useEffect(() => {
    const config = new SingularConfig('YOUR_SDK_KEY', 'YOUR_SDK_SECRET')
      .withLoggingEnabled()
      .withLogLevel(3);
    
    Singular.init(config);
  }, []);
  
  return (
    // Your app components
  );
}
      

Ejemplo de configuración avanzada

Configure múltiples funciones del SDK durante la inicialización encadenando métodos de configuración antes de llamar a init().

// TurboModule direct API (React Native 0.76+ New Architecture)
import React, { useEffect } from 'react';
import NativeSingular from 'singular-react-native/js/NativeSingular';
import { NativeEventEmitter } from 'react-native';

export default function App() {
  useEffect(() => {
    const config: SingularConfig = {
      apikey: 'YOUR_SDK_KEY',
      secret: 'YOUR_SDK_SECRET',
      customUserId: 'user_123456',
      limitDataSharing: false,
      waitForTrackingAuthorizationWithTimeoutInterval: 300
    };

    NativeSingular.init(config);

    // Register event listener
    const emitter = new NativeEventEmitter(NativeSingular);
    emitter.addListener('SingularLinkHandler', (params) => {
      console.log('Singular: Deep link:', params.deeplink);
      console.log('Singular: Passthrough:', params.passthrough);
      console.log('Singular: Is deferred:', params.isDeferred);
      console.log('Singular: urlParameters:', params.urlParameters);
    });

  }, []);
  
  return (
    // Your app components
  );
}

import React, { useEffect } from 'react';
import { Singular, SingularConfig } from 'singular-react-native';

export default function App() {
  useEffect(() => {
    const config = new SingularConfig(
      'YOUR_SDK_KEY',
      'YOUR_SDK_SECRET'
    )
      // User identification
      .withCustomUserId('user_123456')

      // Privacy settings
      .withLimitDataSharing(false)

      // Deep linking
      .withSingularLink((params: SingularLinkParams) => {
        console.log('Singular: Deep link:', params.deeplink);
        console.log('Singular: Passthrough:', params.passthrough);
        console.log('Singular: Is deferred:', params.isDeferred);
        console.log('Singular: urlParameters:', params.urlParameters);
      })

      // iOS-specific
      .withWaitForTrackingAuthorizationWithTimeoutInterval(300)

      // Debugging
      .withLoggingEnabled()
      .withLogLevel(3);

    Singular.init(config);
  }, []);

  return (
    // Your app components
  );
}

Configuración avanzada

Requisitos para la medición de conversiones integrada de Google Ads en iOS

Si su aplicación ejecuta campañas de Google Ads dirigidas a usuarios de iOS 14.5 o superior, se requieren pasos de configuración adicionales del SDK para admitir la medición de conversiones integrada de iOS (ICM). Esto incluye:

• Integrar el SDK de medición en el dispositivo (ODM) de Google
• Actualización al SDK de Singular para iOS v12.8.1+ (o v5.5.0+ para Unity, v1.8.0+ para Flutter/Cordova, v3.9.0+ para React Native)
• Añadir el indicador del enlazador « -ObjC » y habilitar « enableOdmWithTimeoutInterval » en SingularConfig

Nota: Al habilitar enableOdmWithTimeoutInterval se retrasa la inicialización del SDK y puede aplazarse la recepción de callbacks de enlaces profundos. Realice esta configuración durante la implementación inicial del SDK para evitar tener que volver a trabajar en ello.

Consulte los requisitos técnicos completos de ICM para iOS