Applications monopage React

remarque

Ces instructions couvrent les applications monopage (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 monopage (SPA) nécessite plus de considération que les applications multi-pages standard. Les SPA préservent l'état entre les transitions de page, fonctionnant plus comme des applications natives que comme des sites web traditionnels.

Dans le cas d'une SPA React, Rokt doit être lancé une seule 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 (React Context) pour conserver une référence au singleton. Avec les Hooks React, vous pouvez obtenir et interagir avec cette référence de singleton.

Enveloppe 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 () => {
      // Empêche le script Rokt d'être encore chargé 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

Racine de l'Application

Enveloppez votre composant App dans ce fournisseur de contexte :

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

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

Sur la Route

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

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

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

  useEffect(() => {
    // Retourner 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, retirez tous les placements 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 ceci est le composant pour la route de la page de confirmation
export function ConversionPage() {
  // Obtenez les attributs pertinents à passer à Rokt depuis un emplacement interne
  const attributes = useAttributes();
  const launcher = useRoktLauncher();

  useEffect(() => {
    // Retourner 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]);
}