Initialiser le SDK React Native
Les partenaires de Rokt peuvent utiliser le SDK Rokt pour les applications React Native afin d'afficher des placements superposés ou intégrés, tandis que les annonceurs de 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 niveau élevé, ces étapes sont :
- Intégrer le SDK dans votre application React Native
- Configurer pour les applications Android
- Configurer pour les applications iOS
- Initialiser le SDK
Après avoir suivi ces étapes, la méthode execute du SDK peut ensuite être utilisée de diverses 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 :
Installer le SDK Rokt en exécutant la commande :
$ npm install @rokt/react-native-sdk --saveInstaller 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 :
- Ajouter le SDK Rokt dans le bloc repositories de build.gradle :
allprojects {
repositories {
...
maven {
url "https://apps.rokt.com/msdk"
}
}
}
- Dans votre classe
ReactApplication, ajoutez leRoktEmbeddedViewPackageàgetPackages:
// importer la classe
import com.rokt.reactnativesdk.RoktEmbeddedViewPackage;
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
//Ajouter le RoktEmbeddedViewPackage
packages.add(new RoktEmbeddedViewPackage());
return packages;
}
Les versions de SDK inférieures à la version majeure 4 utilisent un nom de package différent com.reactlibrary.RoktEmbeddedViewPackage;
- Vérifiez que
multiDexEnabledest défini sur true, et que vous ciblez la version Mind SDK 18 ou supérieure :
android {
...
defaultConfig {
...
multiDexEnabled true,
minSdkVersion 21
}
}
Si la construction échoue en raison d'un conflit de version de Kotlin, vérifiez 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
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, permettant de charger des bibliothèques dynamiquement liées et de faire fonctionner correctement pod install, et exécutent pod install avec l'architecture appropriée.
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 géré.
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é consiste à utiliser un client de développement personnalisé. Si vous démarrez 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 services d'application Expo (EAS Build) pour vos builds Android et iOS.
Pour configurer le SDK React Native de Rokt 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 alors vous devez utiliser la commande expo prebuild --clean comme décrit dans le guide Ajouter du code natif personnalisé 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): voidexecute(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>): voidexecute(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. Il est donc 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 initialze dans componentDidMount ou useEffect pour éviter des appels indésirables multiples.
Pour initialiser le SDK, vous devez :
- Importer le SDK Rokt dans votre fichier JavaScript/TypeScript :
import { Rokt, RoktEmbeddedView } from "@rokt/react-native-sdk";
- 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 la 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");
Réception de l'état d'initialisation
Depuis la version 4.6.0, le SDK Rokt émet l'état d'initialisation via le canal 'RoktEvents'.
eventManagerEmitter.addListener('RoktEvents', (data) => {
if (data.event == 'InitComplete') {
console.log(`Rokt init completed with status ${data.status}`);
}
});
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 de l'utilisation de votre intégration. Consultez ces ressources pour plus d'informations :