Last updated 24 oct. 2023

Applications à page unique avec React

remarque

Ces instructions couvrent les applications à page unique (SPA) construites avec React. Pour la documentation générale sur l'intégration des SPA, visitez cette page.

L'intégration de Rokt dans une application à page unique (SPA) nécessite plus de considération que les applications multi-pages standard. Les SPAs conservent l'état entre les transitions de page, fonctionnant plus comme des applications natives que des sites web traditionnels.

Dans le cas d'une SPA React, Rokt doit être lancé une fois en tant que singleton. Lorsqu'un emplacement est prêt à être rendu, l'application peut interagir avec le singleton.

Vous pouvez utiliser le contexte React pour conserver une référence au singleton. Avec les hooks React, vous pouvez obtenir et interagir avec cette référence singleton.

Wrapper de Contexte React

Voici un exemple de fournisseur de contexte pour Rokt.

import React, { createContext, useContext, useEffect } from "react";

export const RoktLauncherContext = createContext(null);

export function useRoktLauncher() {
  return useContext(RoktLauncherContext);
}

export function RoktLauncherContextProvider({
  children,
  accountId,
  sandbox = false,
}) {
  const [launcher, setLauncher] = useState(null);

  useEffect(() => {
    (async () => {
      // Protège contre le chargement du script Rokt dans l'application lorsque le contexte est créé
      await new Promise((resolve) =>
        window.Rokt
          ? resolve()
          : (document.getElementById("rokt-launcher").onload = resolve)
      );

      const launcherInstance = await window.Rokt.createLauncher({
        accountId: accountId,
        sandbox: sandbox,
      });

      setLauncher(launcherInstance);
    })();

    return () => {
      if (launcher) {
        launcher.terminate();
      }
    };
  }, [accountId, sandbox]);

  // Retourne le fournisseur de contexte
  return (
    <RoktLauncherContext.Provider value={launcher}>
      {children}
    </RoktLauncherContext.Provider>
  );
}

Consommation du contexte

Application Root

Enveloppez votre composant App dans ce fournisseur de contexte :

ReactDOM.render(
  <RoktContextProvider accountId="VOTRE_ID_DE_COMPTE_ROKT" sandbox={true}>
    <App />
  </RoktContextProvider>
);

Vous devez supprimer le drapeau sandbox ou le définir sur false lors du déploiement en production.

Sur la route

Sur la page qui affiche l'emplacement Rokt, utilisez le singleton Rokt et indiquez-lui de déclencher une sélection Rokt :

import React, { useEffect, useRef } from "react";

// Imaginez que c'est le composant pour la route de la page de confirmation
export function ConfirmationPage() {
  // Obtenez les attributs pertinents à transmettre à Rokt depuis un emplacement interne
  const attributes = useAttributes();
  const launcher = useRoktLauncher();

  useEffect(() => {
    // Retournez si le lanceur n'est pas initialisé ou si les attributs d'intégration ne sont pas présents
    if (!launcher || !attributes.email) {
      return;
    }

    const selectionPromise = launcher.selectPlacements({
      attributes: attributes,
      identifier: "confirmation.page",
    });

    return () => {
      if (selectionPromise) {
        // Lorsque la page se ferme, supprimez tous les emplacements Rokt
        selectionPromise.then((selection) => selection.close());
      }
    };
  }, [launcher, attributes]);

  return (
    <div>
      <h1>Page de confirmation</h1>
      <div id="rokt-placeholder" />
    </div>
  );
}

remarque

Si vous êtes un client Rokt Ads cherchant à signaler une conversion, veuillez vous référer à cet exemple de code lors de la consommation du contexte :

import React, { useEffect, useRef } from "react";

// Imaginez que c'est le composant pour la route de la page de conversion
export function ConversionPage() {
  // Obtenez les attributs pertinents à transmettre à Rokt depuis un emplacement interne
  const attributes = useAttributes();
  const launcher = useRoktLauncher();

  useEffect(() => {
    // Retournez si le lanceur n'est pas initialisé ou si les attributs d'intégration ne sont pas présents
    // Cet exemple vérifie également la présence d'une valeur passbackconversiontrackingid
    if (
      !launcher ||
      !attributes.email ||
      !attributes.passbackconversiontrackingid
    ) {
      return;
    }

    const selectionPromise = launcher.selectPlacements({
      attributes: attributes,
      identifier: "conversion.page",
    });
  }, [launcher, attributes]);
}