Aller au contenu principal

Ajouter un emplacement (ancien)

Pour les partenaires de Rokt, le SDK Rokt pour React Native peut être utilisé pour afficher des emplacements en superposition sur le contenu de votre application.

Avant de commencer​

Assurez-vous que le SDK Rokt React Native a été intégré dans votre application.

Emplacements en superposition​

Importer le SDK​

Importez le SDK dans le fichier JavaScript/TypeScript de votre application :

import { Rokt } from "@rokt/react-native-sdk";

Exécuter le SDK​

Exécutez le SDK au point souhaité en ajoutant les attributs client appropriés. L'emplacement Rokt s'affichera ensuite après un court délai configurable via la plateforme Rokt.

Vous pouvez dicter quels attributs client sont inclus dans votre intégration Rokt. Plus d'informations sur les champs de données disponibles peuvent être trouvées sur la page attributs. Si vous souhaitez intégrer plus d'attributs, vous pouvez ajouter des lignes de code supplémentaires pour chaque nouvel attribut aux exemples ci-dessous.

Version Majeure 3​

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

Rokt.execute("RoktExperience", attributes, {}, () =>
  console.log("Placement Loaded")
);

Version Majeure 4​

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

Rokt.execute("RoktExperience", attributes, {});
remarque

Le ViewName (« RoktExperience ») peut être modifié lors de l'exécution du SDK dans plusieurs emplacements pour afficher une expérience différente en fonction du contexte de l'endroit où le SDK est exécuté dans l'application. Si vous modifiez le ViewName, travaillez avec l'équipe Rokt pour vous assurer que les ajustements correspondants sont effectués dans le système Rokt.

Emplacements intégrés​

Importer le SDK​

Importez le SDK Rokt dans le fichier JavaScript/TypeScript :

import { Rokt, RoktEmbeddedView } from "@rokt/react-native-sdk";

Créer une référence de placeholder​

Créez une référence de placeholder dans votre composant :

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.placeholder1 = React.createRef();
    ...
  }
}

Ajouter RoktEmbeddedView à votre vue​

Ajoutez RoktEmbeddedView dans le JSX retourné de votre composant. Le placement intégré de Rokt sera injecté dans cet espace réservé lorsque la méthode execute est appelée :

<RoktEmbeddedView
  ref={this.placeholder1}
  placeholderName={"RoktEmbedded1"}
></RoktEmbeddedView>

Exécuter le SDK Rokt React Native​

Exécutez le SDK au moment souhaité en envoyant les attributs clients appropriés. Le placement Rokt s'affichera ensuite après un court délai qui est configurable via la plateforme Rokt.

Vous pouvez déterminer quels attributs clients sont inclus dans votre intégration Rokt. Plus d'informations sur les champs de données disponibles peuvent être trouvées sur la page attributs. Si vous souhaitez intégrer plus d'attributs, vous pouvez ajouter des lignes de code supplémentaires pour chaque nouvel attribut aux exemples ci-dessous.

Version Majeure 3​

const placeholders = {
  RoktEmbedded1: findNodeHandle(this.placeholder1.current),
};

const attributes = {
  email: "j.smith@example.com",
  firstname: "Jenny",
  lastname: "Smith",
  mobile: "(323) 867-5309",
  postcode: "90210",
  country: "US",
};
Rokt.execute("RoktEmbeddedExperience", attributes, placeholders, () =>
  console.log("Placement Loaded")
);

Version Majeure 4​

const placeholders = {
  RoktEmbedded1: findNodeHandle(this.placeholder1.current),
};

const attributes = {
  email: "j.smith@example.com",
  firstname: "Jenny",
  lastname: "Smith",
  mobile: "(323) 867-5309",
  postcode: "90210",
  country: "US",
};
Rokt.execute("RoktEmbeddedExperience", attributes, placeholders);
remarque

Le ViewName (« RoktEmbeddedExperience ») peut être modifié lors de l'exécution du SDK à plusieurs endroits. Cette configuration vous permet d'afficher une expérience différente en fonction du contexte de l'endroit où le SDK est exécuté dans l'application. Si vous modifiez le ViewName, veuillez travailler avec l'équipe Rokt pour vous assurer que les ajustements correspondants sont effectués dans le système Rokt.

Callbacks​

La version majeure 3 du SDK React Native prend en charge un seul callback onLoad qui est passé dans la méthode execute. À partir de la version majeure 4, le SDK React Native prend en charge tous les callbacks du SDK natif Rokt. Ces callbacks peuvent être reçus dans vos composants en utilisant un NativeEventEmitter. Ce qui suit explique comment utiliser ces callbacks dans la version majeure 4 du SDK.

Importer les modules d'événements requis​

Importez le SDK dans le fichier JavaScript/TypeScript de votre application :

import { RoktEventManager } from '@rokt/react-native-sdk';
import { NativeEventEmitter } from 'react-native';

Créer un NativeEventEmitter​

Créez un NativeEventEmitter avec RoktEventManager comme nativeModule :

const eventManagerEmitter = new NativeEventEmitter(RoktEventManager);

Si vous utilisez des composants de classe, vous pouvez créer cela en dehors de votre classe.

Ajouter un écouteur à l'émetteur "RoktEvents"​

À partir de la version 4.3.0, le canal "RoktEvents" peut être souscrit pour recevoir tous les événements du SDK. Ajoutez un écouteur à l'émetteur avec eventType "RoktEvents" et effectuez des actions en fonction du type de rappel :

eventManagerEmitter.addListener('RoktEvents', (data) => {
  switch (data.event) {
    case 'ShowLoadingIndicator':
      console.log(`Event ${data.viewName}`);
      break;
    case 'HideLoadingIndicator':
      console.log(`Event ${data.viewName}`);
      break;
    case 'OfferEngagement':
      console.log(`Event ${data.viewName} ${data.placementId}`);
      break;
    case 'PositiveEngagement':
      console.log(`Event ${data.viewName} ${data.placementId}`);
      break;
    case 'FirstPositiveEngagement':
      console.log(`Event ${data.viewName} ${data.placementId}`);
      break;
    case 'PositiveEngagement':
      console.log(`Event ${data.viewName} ${data.placementId}`);
      break;
    case 'PlacementInteractive':
      console.log(`Event ${data.viewName} ${data.placementId}`);
      break;
    case 'PlacementReady':
      console.log(`Event ${data.viewName} ${data.placementId}`);
      break;
    case 'PlacementClosed':
      console.log(`Event ${data.viewName} ${data.placementId}`);
      break;
    case 'PlacementCompleted':
      console.log(`Event ${data.viewName} ${data.placementId}`);
      break;
    case 'PlacementFailure':
      console.log(`Event ${data.viewName} ${data.placementId}`);
      break;
    case 'OpenUrl':
      console.log(`Event ${data.viewName} ${data.placementId} ${data.url}`);
    default:
      // default
      break;
  }
});

Objets d'événement​

ÉvénementDescriptionAutres propriétés
ShowLoadingIndicatorDéclenché avant que le SDK appelle le backend de RoktviewName: String
HideLoadingIndicatorDéclenché lorsque le SDK reçoit un succès ou un échec du backend de RoktviewName: String
OfferEngagementDéclenché lorsque l'utilisateur interagit avec l'offreviewName: String, placementId: String
PositiveEngagementDéclenché lorsque l'utilisateur interagit positivement avec l'offreviewName: String, placementId: String
FirstPositiveEngagementDéclenché lorsque l'utilisateur interagit positivement avec l'offre pour la première foisviewName: String, placementId: String
PlacementInteractiveDéclenché lorsqu'un emplacement a été rendu et est interactifviewName: String, placementId: String
PlacementReadyDéclenché lorsqu'un emplacement est prêt à être affiché mais n'a pas encore rendu de contenuviewName: String, placementId: String
PlacementClosedDéclenché lorsque l'utilisateur ferme un emplacementviewName: String, placementId: String
PlacementCompletedDéclenché lorsque la progression de l'offre atteint la fin et qu'aucune autre offre n'est disponible à 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é		viewName: String, placementId: String
PlacementFailureDéclenché lorsqu'un emplacement n'a pas pu être affiché en raison d'une défaillance ou lorsqu'aucun emplacement n'est disponible à afficherviewName: String, placementId: String (facultatif)
OpenUrlDéclenché lorsque l'utilisateur appuie sur une URL qui est configurée pour être envoyée à l'application partenaireviewName: String, placementId: String, url: String

Ajouter un écouteur à l'émetteur "RoktCallback"​

Ajoutez un écouteur à l'émetteur avec eventType "RoktCallback" et effectuez des actions en fonction du type de rappel (callback) :

eventManagerEmitter.addListener(
  "RoktCallback",
  (event) => {
    switch (event.callbackValue) {
      case "onLoad":
        // onLoad
      case "onUnLoad":
        // onUnLoad
      case "onShouldShowLoadingIndicator":
        // onShouldShowLoadingIndicator
      case "onShouldHideLoadingIndicator":
        // onShouldHideLoadingIndicator
      default:
        // default
    }
  }
)

Si vous utilisez des composants de classe, vous pouvez ajouter l'écouteur dans componentDidMount, et supprimer l'écouteur dans componentWillUnmount comme suit :

eventManagerEmitter.removeAllListeners("RoktCallback");`

Types de rappel (callback)​

onLoad​

Le rappel onLoad sera appelé lorsque le placement sera chargé et interactif.

onShouldShowLoadingIndicator​

Le onShouldShowLoadingIndicator sera appelé après un appel d'exécution réussi, juste avant que le SDK ne déclenche un appel vers le backend de Rokt. Il peut être utilisé pour afficher des vues de progression des indicateurs de chargement en attendant que le placement se charge.

onShouldHideLoadingIndicator​

Le callback onShouldHideLoadingIndicator sera appelé lorsque le SDK obtient une réponse de succès ou d'échec du backend de Rokt. Il peut être utilisé pour annuler les vues de progression ou les indicateurs de chargement.

onUnLoad​

Le callback onUnLoad sera appelé lorsque le SDK ferme le placement. Il sera également déclenché si l'appel d'exécution échoue.

Cet article vous a-t-il été utile ?
Last updated Oct 29, 2025