Last updated

Ajouter un emplacement

import Tabs from '@theme/Tabs';

import TabItem from '@theme/TabItem';

Pour les partenaires 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 moment désiré en ajoutant les attributs clients appropriés. L'emplacement Rokt s'affichera alors après un court délai qui peut être configuré 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

<Tabs className="unique-tabs" defaultValue="JavaScript" values={[ {label: 'JavaScript', value: 'JavaScript'}, {label: 'TypeScript', value: 'TypeScript'}, ]}>

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")
);

const attributes: Record<string, string> = {
  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

<Tabs className="unique-tabs" defaultValue="JavaScript" values={[ {label: 'JavaScript', value: 'JavaScript'}, {label: 'TypeScript', value: 'TypeScript'}, ]}>

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

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

const attributes: Record<string, string> = {
  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 à plusieurs endroits pour afficher une expérience différente en fonction du contexte dans lequel 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.

Placements 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 zone réservée

Créez une référence de zone réservée dans votre composant :

<Tabs className="unique-tabs" defaultValue="JavaScript" values={[ {label: 'JavaScript', value: 'JavaScript'}, {label: 'TypeScript', value: 'TypeScript'}, ]}>

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

class MyComponent extends React.Component<MyProps, MyState> {
  constructor(props: MyProps) {
    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 React Native de Rokt

Exécutez le SDK au moment souhaité en envoyant les attributs clients appropriés. Le placement Rokt s'affiche alors après un court délai qui peut être configuré via la plateforme Rokt.

Vous pouvez déterminer quels attributs clients doivent être inclus dans votre intégration Rokt. Plus d'informations sur les champs de données disponibles peuvent être trouvées sur la page des 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

<Tabs className="unique-tabs" defaultValue="JavaScript" values={[ {label: 'JavaScript', value: 'JavaScript'}, {label: 'TypeScript', value: 'TypeScript'}, ]}>

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")
);

const placeholders: Record<string, number | null> = {
  RoktEmbedded1: findNodeHandle(this.placeholder1.current),
};

const attributes: Record<string, string> = {
  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

<Tabs className="unique-tabs" defaultValue="JavaScript" values={[ {label: 'JavaScript', value: 'JavaScript'}, {label: 'TypeScript', value: 'TypeScript'}, ]}>

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);

const placeholders: Record<string, number | null> = {
  RoktEmbedded1: findNodeHandle(this.placeholder1.current),
};

const attributes: Record<string, string> = {
  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 où le SDK est exécuté dans l'application. Si vous modifiez le ViewName, veuillez travailler avec l'équipe de Rokt pour vous assurer que les ajustements correspondants sont effectués dans le système Rokt.

Les 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. Voici 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 auditeur à 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 auditeur à l'émetteur avec eventType "RoktEvents" et effectuez des actions selon le type de rappel :

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

Objets événementiels

Événement	Description	Autres propriétés
ShowLoadingIndicator	Déclenché avant que le SDK n'appelle le backend de Rokt	viewName: String
HideLoadingIndicator	Déclenché lorsque le SDK reçoit un succès ou un échec du backend de Rokt	viewName: String
OfferEngagement	Déclenché lorsque l'utilisateur interagit avec l'offre	viewName: String, placementId: String
PositiveEngagement	Déclenché lorsque l'utilisateur interagit positivement avec l'offre	viewName: String, placementId: String
FirstPositiveEngagement	Déclenché lorsque l'utilisateur interagit positivement avec l'offre pour la première fois	viewName: String, placementId: String
PlacementInteractive	Déclenché lorsqu'un emplacement a été rendu et est interactif	viewName: String, placementId: String
PlacementReady	Déclenché lorsqu'un emplacement est prêt à être affiché mais que le contenu n'a pas encore été rendu	viewName: String, placementId: String
PlacementClosed	Déclenché lorsqu'un emplacement est fermé par l'utilisateur	viewName: String, placementId: String
PlacementCompleted	Déclenché lorsque la progression de l'offre atteint la fin et qu'aucune autre offre n'est disponible pour être affichée. É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
PlacementFailure	Déclenché lorsqu'un emplacement n'a pas pu être affiché en raison d'un problème	viewName: String, placementId: String (facultatif)

Ajouter un auditeur à l'émetteur "RoktCallback"

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

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'auditeur dans componentDidMount, et enlever l'auditeur dans componentWillUnmount comme suit :

eventManagerEmitter.removeAllListeners("RoktCallback");`

Types de rappel

onLoad

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

onShouldShowLoadingIndicator

Le onShouldShowLoadingIndicator sera appelé lors d'un appel d'exécution réussi, juste avant que le SDK n'enclenche un appel au backend 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 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.