Aller au contenu principal

Guide d'Intégration du SDK React Native

Cette page explique comment implémenter le SDK React Native pour Rokt Ecommerce afin de fournir des expériences client plus pertinentes lors du paiement. Le SDK vous permet de déclencher et de suivre ces expériences (comme l'affichage d'offres sur les pages de confirmation) en activant sur des pages configurées et en transmettant les données utilisateur et transactionnelles à Rokt pour la personnalisation et la mesure.

Votre représentant de compte dédié vous aidera à configurer votre compte pour les plateformes que vous ciblez avec votre application React Native. Ils vous fourniront à la fois la clé et le secret pour iOS et Android nécessaires pour initialiser le SDK et fourniront également des ressources supplémentaires nécessaires pour rendre les expériences les plus pertinentes pour vos clients.

remarque

Ces instructions nécessitent des ressources de développement pour être complétées. Si vous avez besoin d'une assistance supplémentaire, veuillez contacter votre gestionnaire de compte Rokt. Les boutiques Shopify peuvent configurer un emplacement Rokt en quelques secondes en utilisant l'application Rokt Ecommerce — aucun codage nécessaire !

1. Configuration de React Native​

Ajoutez le SDK React Native comme dépendance à votre application :

npm install react-native-mparticle --save

Importez le package dans le code de votre application React Native et obtenez une instance de mParticle :

import MParticle from 'react-native-mparticle';

Après avoir installé le plugin React Native, continuez à intégrer le SDK Rokt dans votre application mobile ou site web en suivant les étapes ci-dessous. Assurez-vous d'inclure la clé et le secret fournis par votre gestionnaire de compte là où c'est nécessaire, sinon vous verrez des erreurs dans vos journaux lors du lancement de votre application ou site.

1.1. Ajouter le SDK Rokt à votre application iOS​

La commande NPM install ci-dessus inclura automatiquement le framework React et le framework iOS de base dans votre projet. Le Kit Rokt doit être ajouté en tant que dépendance pod dans le ios/Podfile. Cependant, selon votre application et ses autres dépendances, vous devez l'intégrer de l'une des deux manières suivantes :

En utilisant CocoaPods, incluez le SDK Rokt dans votre application :

CocoaPods​

Pour intégrer le Kit Rokt en utilisant CocoaPods, spécifiez-le dans votre Podfile avec :

ios/Podfile
pod 'mParticle-Rokt','~> 8.0'

  1. Les bibliothèques statiques sont la valeur par défaut de React Native, mais comme le SDK iOS de Rokt contient du code Swift, vous devez ajouter une exception pour cela sous la forme d'une commande pré-installation dans le Podfile.

    pre_install do |installer|
      installer.pod_targets.each do |pod|
        if pod.name == 'mParticle-Apple-SDK' || pod.name == 'mParticle-Rokt' || pod.name == 'Rokt-Widget'
          def pod.build_type;
            Pod::BuildType.new(:linkage => :dynamic, :packaging => :framework)
          end
        end
      end
    end

    Ensuite, exécutez la commande suivante

    bundle exec pod install

  2. Les frameworks sont la valeur par défaut pour le développement Swift et bien qu'ils ne soient pas préférés par React Native, ils sont pris en charge. De plus, vous pouvez définir si les frameworks sont construits statiquement ou dynamiquement.

Mettez à jour votre Podfile pour être prêt à utiliser des frameworks liés dynamiquement en commentant la ligne suivante (si flipper est présent)

# :flipper_configuration => flipper_config,

Ensuite, exécutez l'une des commandes suivantes

USE_FRAMEWORKS=static bundle exec pod install

ou

USE_FRAMEWORKS=dynamic bundle exec pod install

1.2. Initialiser le SDK Rokt​

Pour initialiser le SDK, insérez le fragment d'initialisation suivant dans votre fichier AppDelegate :

attention
  • Assurez-vous de remplacer your-key et your-secret par la clé et le secret fournis par votre équipe dédiée Rokt.
import mParticle_Apple_SDK

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // Initialiser le SDK
    let options = MParticleOptions(key: "your-key",
    secret: "your-secret")
    // Spécifiez l'environnement de données avec environment:
    // Définissez-le sur .development si vous testez encore votre intégration.
    // Définissez-le sur .production si votre intégration est prête pour les données de production.
    // La valeur par défaut est .autoDetect qui tente de détecter l'environnement automatiquement
    options.environment = .development
    MParticle.sharedInstance().start(with: options)
    return true
}

Configuration supplémentaire​

Pour plus d'aide, consultez le Guide d'intégration SDK iOS.

2. Suivi des attributs utilisateur​

Vous pouvez utiliser le SDK Rokt pour collecter des attributs utilisateur séparément des événements. Les attributs utilisateur sont distincts des attributs personnalisés lors du suivi des événements. Le SDK associera tous les attributs utilisateur collectés dans une session donnée aux événements déclenchés dans la même session.

Pour collecter des attributs utilisateur, le code suivant doit être exécuté immédiatement après l'initialisation du SDK Rokt avant d'enregistrer un événement.

import MParticle from 'react-native-mparticle';

// Récupérez l'utilisateur actuel. Cela ne réussira que si vous avez identifié l'utilisateur lors de l'initialisation du SDK ou en appelant la méthode identify.
MParticle.Identity.getCurrentUser((currentUser) => {
  if (currentUser) {
    console.log('Utilisateur actuel :', currentUser);
    currentUser.setUserAttribute('custom-attribute-name', 'custom-attribute-value');
    // Remarque : tous les attributs utilisateur (y compris les attributs de liste et les tags) doivent avoir des noms distincts.

    // Rokt recommande de définir autant que possible les attributs utilisateur suivants :
    currentUser.setUserAttribute('firstname', 'John');
    currentUser.setUserAttribute('lastname', 'Doe');
    // Les numéros de téléphone peuvent être formatés soit comme '1234567890', soit comme '+1 (234) 567-8901'
    currentUser.setUserAttribute('mobile', '3125551515');
    currentUser.setUserAttribute('age', '33');
    currentUser.setUserAttribute('gender',  'M');
    currentUser.setUserAttribute('city', 'Brooklyn');
    currentUser.setUserAttribute('state', 'NY');
```javascript
    currentUser.setUserAttribute('zip', '123456');
    currentUser.setUserAttribute('dob', 'yyyymmdd');
    currentUser.setUserAttribute('title', 'Mr');
    currentUser.setUserAttribute('language', 'en');
    currentUser.setUserAttribute('value', '52.25');
    currentUser.setUserAttribute('predictedltv', '136.23');

    // Vous pouvez créer un attribut utilisateur pour contenir une liste de valeurs
    const attributeList = [
      'documentary',
      'comedy',
      'romance',
      'drama',
    ];
    currentUser.setUserAttributeArray('favorite-genres', attributeList);
    // Pour supprimer un attribut utilisateur, appelez removeUserAttribute et passez le nom de l'attribut. Tous les attributs utilisateur partagent le même espace de clés.
    currentUser.removeUserAttribute('attribute-to-remove');
  } else {
    console.log('No current user found');
  }
});

3. Capturer les événements de l'entonnoir​

Le SDK Rokt vous permet de mettre en œuvre le suivi des événements pour collecter des données décrivant les parcours de vos utilisateurs à travers votre application. Vous pouvez ensuite utiliser ces données pour optimiser l'expérience de vos utilisateurs.

Il existe trois types principaux d'événements que vous pouvez enregistrer avec le SDK :

  • Événements de vue d'écran (Screen View Events) : Ce sont des événements que vous pouvez déclencher lorsqu'un écran de votre application est chargé.
  • Événements personnalisés (Custom Events) : Ce sont des événements libres que vous créez pour suivre des informations spécifiques à votre application.
  • Événements commerciaux (Commerce Events) : Ce sont des événements spécifiques au commerce électronique qui peuvent décrire les différentes étapes de l'expérience d'achat, y compris l'ajout d'articles à un panier et la réalisation d'un achat final.

Lors de la première intégration avec le SDK Rokt, commencez par mettre en œuvre le suivi des vues d'écran. Pour en savoir plus sur le suivi des événements personnalisés et commerciaux, consultez l'Annexe.

Suivre les vues d'écran​

Un des types d'événements les plus basiques que vous pouvez suivre est la vue d'écran. Pour enregistrer une vue d'écran, appelez la méthode MParticle.logScreenEvent() dès que l'écran se charge, en passant le nom de l'écran sous forme de chaîne de caractères et une table de hachage optionnelle contenant des attributs descriptifs.

Le nom que vous passez doit être l'un d'un ensemble limité d'écrans, comme 'homepage' ou 'product detail page'.

import MParticle from 'react-native-mparticle';

const screenInfo = {
  'rating': '5',
  'property_type': 'hotel',
};
MParticle.logScreenEvent('Screen Name', screenInfo);

4. Afficher un Placement​

La principale valeur du SDK Rokt est débloquée grâce à la méthode selectPlacements, qui sert un placement (ou mise en page) hyper-pertinent pour vos clients en fonction des attributs que vous fournissez.

Une fois que l'intégration Rokt a été initialisée, vous pouvez appeler la méthode selectPlacements depuis la page où votre mise en page sera rendue. Elle doit être appelée le plus tôt possible, et une fois que tous les attributs requis sont disponibles, pour garantir la meilleure expérience pour vos utilisateurs.

Lors de l'appel de selectPlacements, vous devez fournir au moins les attributs email, firstname, lastname, billingzipcode et confirmationref.

import MParticle from 'react-native-mparticle';

const attributes = {
    'email': 'j.smith@example.com',
    'firstname': 'Jenny',
    'lastname': 'Smith',
    'mobile': '(555)867-5309',
    'postcode': '90210',
    'country': 'US'
};

// Vous pouvez également vouloir passer des paramètres optionnels tels que `RoktConfig` qui vous permettront de personnaliser l'interface utilisateur du placement, principalement en fonction du mode sombre ou clair de l'application. Des paramètres optionnels supplémentaires tels que les vues intégrées et les événements sont montrés plus bas.
const roktConfig = MParticle.Rokt.createRoktConfig(
  'dark',
  MParticle.Rokt.createCacheConfig(20, attributes),
);

MParticle.Rokt.selectPlacements(
  'RoktExperience', // identifiant - chaîne
  attributes, // attributs - map
  {}, // espaces réservés (voir ci-dessous) - map
  roktConfig, // configurations - objet
);

Fonctions optionnelles​

Emplacements intégrés​

Les emplacements intégrés partagent toutes les mêmes recommandations et exigences que les emplacements superposés ci-dessus, mais vous permettent d'intégrer les vues d'emplacement dans votre interface utilisateur (UI).

import React, { ComponentRef } from 'react';
import { findNodeHandle } from 'react-native';
import MParticle, { RoktLayoutView } from 'react-native-mparticle';

const placeholder1 = React.createRef<ComponentRef<typeof RoktLayoutView>>();

const showRoktLayout = () => {
  const placeholders = {
    Location1: findNodeHandle(placeholder1.current),
  };
  MParticle.Rokt.selectPlacements(
    'RoktEmbeddedExperience', // identifiant - chaîne de caractères
    attributes, // attributs - map (variable de l'exemple ci-dessus)
    placeholders, // espace réservé - map
  );
};

// Intégrer le `RoktLayoutView` dans la hiérarchie de vue
<RoktLayoutView ref={placeholder1} placeholderName="Location1" />

Événements​

Le SDK fournit également les événements via le mécanisme NativeEventEmitter.

import { NativeEventEmitter } from 'react-native';

const eventManagerEmitter = new NativeEventEmitter(MParticle.RoktEventManager);

eventManagerEmitter.addListener('RoktEvents', data => {
  console.log(`event received ${JSON.stringify(data)}`);
});

ÉvénementDescriptionParamètres
ShowLoadingIndicatorDéclenché avant que le SDK n'appelle le backend Rokt
HideLoadingIndicatorDéclenché lorsque le SDK reçoit un succès ou un échec du backend Rokt
OfferEngagementDéclenché lorsque l'utilisateur interagit avec l'offreplacementId: String
PositiveEngagementDéclenché lorsque l'utilisateur interagit positivement avec l'offreplacementId: String
FirstPositiveEngagementDéclenché lorsque l'utilisateur interagit positivement avec l'offre pour la première foisplacementId: String
PlacementInteractiveDéclenché lorsqu'un emplacement a été rendu et est interactifplacementId: String
PlacementReadyDéclenché lorsqu'un emplacement est prêt à être affiché mais n'a pas encore rendu de contenuplacementId: String
PlacementClosedDéclenché lorsqu'un emplacement est fermé par l'utilisateurplacementId: String
PlacementCompletedDéclenché lorsque la progression de l'offre atteint la fin et qu'il n'y a plus d'offres disponibles à afficher.
Également déclenché lorsque le cache est atteint mais que l'emplacement récupéré ne sera pas affiché car il a été précédemment rejeté		placementId: String
PlacementFailureDéclenché lorsqu'un emplacement ne peut pas être affiché en raison d'une défaillance ou lorsqu'aucun emplacement n'est disponible à afficherplacementId: String (optionnel)
OpenUrlDéclenché lorsque l'utilisateur appuie sur une URL qui est configurée pour être envoyée à l'application partenaireplacementId: String, url: String
CartItemInstantPurchaseDéclenché lorsque l'achat d'un article du catalogue est initié par l'utilisateurplacementId: String, cartItemId: String, catalogItemId: String, currency: String, description: String, linkedProductId: String, totalPrice: number, quantity: number, unitPrice: number

Annexe​

Utilisation des configurations d'application​

Les applications peuvent désormais transmettre les paramètres de configuration depuis leur propre environnement d'application. Cela permet au SDK Rokt d'utiliser les configurations personnalisées de l'application au lieu de se fier uniquement aux paramètres par défaut du système.

Objet ColorMode​
ValeurDescription
lightL'application est en mode clair
darkL'application est en mode sombre
systemL'application utilise le mode couleur du système par défaut
Objet CacheConfig​
ParamètreDescription
cacheDurationDurée optionnelle en secondes pendant laquelle le SDK Rokt doit mettre en cache l'expérience. La valeur maximale autorisée est de 90 minutes et la valeur par défaut (si la valeur n'est pas fournie ou invalide) est de 90 minutes.
cacheAttributesAttributs optionnels à utiliser comme clé de cache. Si null, tous les attributs envoyés dans selectPlacements seront utilisés comme clé de cache.
const roktConfig = MParticle.Rokt.createRoktConfig(
  'dark',
  MParticle.Rokt.createCacheConfig(20, attributes),
);

MParticle.Rokt.selectPlacements(
  'RoktExperience', // identifiant - chaîne de caractères
  attributes, // attributs - map (variable de l'exemple ci-dessus)
  {}, // espaces réservés - map
  roktConfig, // configurations - objet
);

Suivre des événements personnalisés​

Après avoir implémenté le suivi des placements et des vues d'écran en suivant les instructions ci-dessus, vous pouvez vouloir implémenter un suivi d'événements supplémentaires.

Vous pouvez définir et suivre des événements personnalisés en utilisant l'objet MParticle.Event et en passant le nom de l'événement, le type d'événement et une map d'attributs personnalisés.

Les types d'événements personnalisés pris en charge pour Kotlin et Java sont :

  • Navigation - Suivre les flux de navigation des utilisateurs et les transitions de pages au sein de votre application
  • Location - Enregistrer les interactions et mouvements basés sur la localisation de l'utilisateur
  • Search - Capturer les requêtes de recherche et les actions des utilisateurs liées à la recherche
  • Transaction - Consigner les transactions financières et les activités liées aux achats
  • UserContent - Suivre le contenu généré par les utilisateurs comme les avis, commentaires ou publications
  • UserPreference - Enregistrer les paramètres, préférences et choix de personnalisation des utilisateurs
  • Social - Capturer les interactions sur les réseaux sociaux et les activités de partage
import MParticle from 'react-native-mparticle';

const event = new MParticle.Event()
    .setName('Test event')
    .setType(MParticle.EventType.Other)
    .setInfo({ 'Test key': 'Test value' })
MParticle.logMPEvent(event)

Suivre les événements de commerce​

Le suivi d'un événement de commerce nécessite trois étapes :

  1. Définir le ou les produits qui sont achetés
  2. Créer un objet pour contenir un résumé de la transaction
  3. Enregistrer l'événement, y compris votre définition de produit et le résumé de la transaction
import MParticle from 'react-native-mparticle';

// 1. Créer les produits
const customAttributes = {
  'ocean-view': 'true',
  'balcony': 'false',
};
const product = new MParticle.Product('Double Room - Econ Rate', 'econ-1', 100.00, 4);

// Inclure la carte des attributs personnalisés créée ci-dessus
product.customAttributes = customAttributes;

// 2. Résumer la transaction
const transactionAttributes = new MParticle.TransactionAttributes('12345')
  .setRevenue(430.00)
  .setTax(30.00);

// 3. Enregistrer l'événement d'achat
const commerceEvent = MParticle.CommerceEvent.createProductActionEvent(MParticle.ProductActionType.Purchase, [product], transactionAttributes);

// Les attributs personnalisés optionnels pour l'événement d'achat peuvent être ajoutés sous forme de carte de paires clé/valeur de chaînes
commerceEvent.customAttributes = {'sale': 'true', 'phone-booking': 'true'};
MParticle.logCommerceEvent(commerceEvent);
Cet article vous a-t-il été utile ?
Last updated Oct 29, 2025