React single page applications

note

These instructions cover instructions for SPAs built using React. For general SPA integration documentation, visit this page.

Integrating Rokt into a single page application (SPA) requires more consideration compared to standard multi-page applications. SPAs preserve the state between page transitions, operating more like native apps than traditional websites.

In the case of a React SPA, Rokt should be launched once as a singleton. When a placement is ready to be rendered, the application can interact with the singleton.

You can use React Context to hold a reference to the singleton. With React Hooks, you can obtain and interact with that singleton reference.

To see an example, visit our GitHub repository.

React Context Wrapper

Here is an example of a context provider for Rokt.

import React, { createContext, useContext, useEffect } from "react";
export const RoktLauncherContext = createContext<IntegrationLauncher | null>(null);export const RoktLauncherContextConsumer = RoktLauncherContext.Consumer;
export function useRoktLauncher() {  return useContext(RoktLauncherContext);}
export function RoktLauncherContextProvider({ children, accountId, sandbox = false }) {  const [launcher, setLauncher] = useState<IntegrationLauncher | null>(null);
  useEffect(() => {    (async () => {      // Guards against Rokt script being still loaded into the application when the context is created      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]);
  // Return the context provider  return <RoktLauncherContext.Provider value={launcher}>{children}</RoktLauncherContext.Provider>;}

Consuming Context

Application Root

Wrap your App component in this context provider:

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

You have to set sandbox to false when deploying to production.

On the Route

On the page that shows the Rokt placement, use the Rokt singleton and tell it to trigger a Rokt selection:

import React, { useEffect, useRef } from "react";
// Imagine this is the component for the confirmation page routeexport function ConfirmationPage() {  // Obtain the relevant attributes to pass to Rokt from an internal location  const attributes = useAttributes();  const launcher = useRoktLauncher();
  useEffect(() => {    // Return if launcher has not been loaded yet or attributes to be passed are not yet ready    if (!launcher || !attributes.email) {      return;    }
    const selectionPromise = launcher.selectPlacements({      attributes: attributes,      identifier: 'checkout.page',    });
    return () => {      if (selectionPromise) {        // When the page closes, remove all the Rokt placements        selectionPromise.then((selection) => selection.close());      }    };  }, [launcher, attributes]);
  return (    <div>      <h1>Confirmation Page</h1>      <div id="rokt-placeholder" />    </div>  );}