Skip to main content

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>  );}
Was this article helpful?