Initialiser le SDK React Native (ancien)
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 niveau élevé, ces étapes sont :
- Intégration du SDK dans votre application React Native
- Configuration pour les applications Android
- Configuration pour les applications iOS
- Initialisation du SDK
Après avoir suivi ces étapes, la méthode execute du SDK peut ensuite être utilisée de diverses manières pour répondre 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 --save -
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 :
- Pour les versions 4.8.1 et inférieures, ajoutez 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:
// importez la classe
import com.rokt.reactnativesdk.RoktEmbeddedViewPackage;
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
//Ajoutez le RoktEmbeddedViewPackage
packages.add(new RoktEmbeddedViewPackage());
return packages;
}
Les versions du 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 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
Configuration 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 paquet ffi, pour charger les bibliothèques liées dynamiquement et vous permettent d'exécuter correctement pod install, et exécutent pod install avec la bonne architecture.
Configuration 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é à Expo via le workflow bare et le workflow géré.
Workflow Bare Expo
Si vous utilisez le workflow bare, suivez les étapes dans Configuration pour Android et Configuration 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 Ajout de 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. 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 :
- 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 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 du statut d'initialisation
À partir de la version 4.6.0, le SDK Rokt émet le statut 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 du cas d'utilisation de votre intégration. Consultez ces ressources pour plus d'informations :