Aller au contenu principal

Initialiser le SDK React Native

Les partenaires de Rokt peuvent utiliser le SDK Rokt pour les applications React Native afin d'afficher des placements en superposition ou intégrés, tandis que les annonceurs Rokt peuvent l'utiliser pour enregistrer des conversions pour leurs campagnes. Tous les cas d'utilisation du SDK suivent les mêmes étapes initiales pour intégrer et initialiser le SDK dans votre application. À un haut niveau, ces étapes sont :

  1. Intégrer le SDK dans votre application React Native
  2. Configurer pour les applications Android
  3. Configurer pour les applications iOS
  4. Initialiser le SDK

Après avoir suivi ces étapes, la méthode execute du SDK peut alors être utilisée de différentes manières pour s'adapter au cas d'utilisation requis.

Intégrer le SDK dans votre application React Native​

Pour intégrer le SDK dans votre application React Native, vous devez :

  1. Installer le SDK Rokt en exécutant la commande :

    $ npm install @rokt/react-native-sdk --save

  2. Installer tous les packages et dépendances en exécutant la commande :

    $ npm install

Configurer pour Android​

Pour configurer le SDK Rokt React Native pour les applications Android, vous devez :

  1. Ajouter le SDK Rokt dans le bloc repositories de build.gradle :
allprojects {
    repositories {
        ...
        maven {
            url  "https://apps.rokt.com/msdk"
        }
    }
}
  1. Dans votre classe ReactApplication, ajoutez le RoktEmbeddedViewPackage à getPackages :

// import the class
import com.rokt.reactnativesdk.RoktEmbeddedViewPackage;

@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();

    //Add the RoktEmbeddedViewPackage
    packages.add(new RoktEmbeddedViewPackage());
    return packages;
}
remarque

Les versions du SDK inférieures à la version majeure 4 utilisent un nom de package différent com.reactlibrary.RoktEmbeddedViewPackage;

  1. Vérifiez que multiDexEnabled est défini sur true, et que vous ciblez la version 18 ou supérieure de Mind SDK :
android {
    ...
    defaultConfig {
        ...
        multiDexEnabled true,
        minSdkVersion 21
    }
}
remarque

Si la compilation échoue en raison d'un conflit de version de Kotlin, consultez le lien pour des solutions possibles : https://github.com/facebook/react-native/issues/35979

Configurer pour iOS​

Pour configurer le SDK Rokt React Native pour les applications iOS, allez dans le dossier iOS et exécutez la commande :

cd ios && pod install
remarque

L'architecture Mac M1 n'est pas directement compatible avec Cocoapods. Si vous rencontrez des problèmes lors de l'installation des pods, vous pouvez les résoudre en exécutant :

sudo arch -x86_64 gem install ffi
arch -x86_64 pod install

Ces commandes installent le package ffi, pour charger des bibliothèques liées dynamiquement et vous permettre d'exécuter correctement pod install, et exécutent pod install avec la bonne architecture.

Configurer avec Expo​

Le SDK Rokt React Native ne peut pas être utilisé avec Expo Go car il nécessite du code natif personnalisé. Le SDK peut être intégré avec Expo via le workflow bare et le workflow managed.

Workflow Bare Expo​

Si vous utilisez le workflow bare, suivez les étapes dans Configurer pour Android et Configurer pour iOS.

Flux de travail géré par Expo​

Le flux de travail suggéré est d'utiliser un client de développement personnalisé. Si vous commencez une nouvelle application, vous pouvez exécuter npx create-react-native-app -t with-dev-client pour que cela soit configuré automatiquement. Cela vous permettra également d'utiliser les Expo Application Services (EAS Build) pour vos builds Android et iOS.

Pour configurer le SDK Rokt React Native avec le flux de travail géré par Expo, ajoutez le plugin @rokt/react-native-sdk au tableau des plugins de votre fichier app.json ou app.config.js:

{
  "expo": {
    "plugins": ["@rokt/react-native-sdk"]
  }
}

Si vous n'utilisez pas EAS build, vous devez utiliser la commande expo prebuild --clean comme décrit dans le guide Adding custom native code pour reconstruire votre application avec les modifications du plugin.

Initialiser le SDK​

Le module Rokt fournit deux méthodes:

Version majeure 3​

  • initialize(roktTagId: string, appVersion: string): void
  • execute(viewName: string, attributes: Record<string, string>, placeholders: Record<string, number | null>, callback: () => void): void

Version Majeure 4​

  • initialize(roktTagId: string, appVersion: string, fontFilesMap?: Record<string, string>): void
  • execute(viewName: string, attributes: Record<string, string>, placeholders: Record<string, number | null>): void

La méthode initialize récupère les résultats de l'API nécessaires à la méthode execute. Par conséquent, il est préférable de ne pas placer les deux appels immédiatement l'un à côté de l'autre. Il est recommandé d'appeler la méthode initialize dans les premières vues de l'application. Il est également recommandé d'appeler initialize dans componentDidMount ou useEffect pour éviter plusieurs appels indésirables.

Pour initialiser le SDK, vous devez :

  1. Importer le SDK Rokt dans votre fichier JavaScript/TypeScript :
import { Rokt, RoktEmbeddedView } from "@rokt/react-native-sdk";
  1. Initialiser le SDK Rokt :
// Ce qui suit révélera une intégration de démonstration. Pour voir votre intégration :
// 1) Remplacez l'ID de balise de test d'intégration (222) par votre ID de compte Rokt unique
// 2) Remplacez Y.Y.Y par la version de l'application

Rokt.initialize("222", "Y.Y.Y");

Débogage​

Utilisez l'API Rokt.setLoggingEnabled(true); pour activer les journaux de débogage du SDK Rokt.

Prochaines étapes​

Vos prochaines étapes dépendent du cas d'utilisation de votre intégration. Consultez ces ressources pour plus d'informations :

Cet article vous a-t-il été utile ?