React シングルページアプリケーション

注記

これらの手順は、React を使用して構築された SPA に適用されます。一般的な SPA 統合ドキュメントについては、このページを参照してください。

シングルページアプリケーション (SPA) に Rokt を統合するには、標準のマルチページアプリケーションよりも多くの考慮が必要です。SPA はページ遷移間で状態を保持し、従来のウェブサイトよりもネイティブアプリのように動作します。

React SPA の場合、Rokt はシングルトンとして一度起動されるべきです。プレースメントがレンダリングの準備ができたら、アプリケーションはそのシングルトンと対話できます。

React Context を使用してシングルトンへの参照を保持できます。React Hooks を使用して、そのシングルトン参照を取得し、対話することができます。

React Context ラッパー

以下は、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 () => {
      // コンテキストが作成されるときに Rokt スクリプトがまだアプリケーションにロードされていることを防ぐ
      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 (
    <RoktLauncherContext.Provider value={launcher}>
      {children}
    </RoktLauncherContext.Provider>
  );
}

コンテキストの利用

アプリケーションルート

App コンポーネントを次のコンテキストプロバイダーでラップします:

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

本番環境にデプロイする際には、sandbox フラグを削除するか、false に設定する必要があります。

ルート上

Rokt プレースメントを表示するページでは、Rokt シングルトンを使用して Rokt セレクションをトリガーするように指示します:

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

// これは確認ページルートのコンポーネントだと想像してください
export function ConfirmationPage() {
  // Rokt に渡す関連する属性を内部の場所から取得します
  const attributes = useAttributes();
  const launcher = useRoktLauncher();

  useEffect(() => {
    // ランチャーが初期化されていないか、統合属性が存在しない場合は戻ります
    if (!launcher || !attributes.email) {
      return;
    }

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

    return () => {
      if (selectionPromise) {
        // ページが閉じるときに、すべての Rokt プレースメントを削除します
        selectionPromise.then((selection) => selection.close());
      }
    };
  }, [launcher, attributes]);

  return (
    <div>
      <h1>確認ページ</h1>
      <div id="rokt-placeholder" />
    </div>
  );
}

注記

Rokt Ads クライアントでコンバージョンを報告しようとしている場合は、コンテキストを利用する際にこのコード例を参照してください:

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

// これは確認ページルートのコンポーネントだと想像してください
export function ConversionPage() {
  // Rokt に渡す関連する属性を内部の場所から取得します
  const attributes = useAttributes();
  const launcher = useRoktLauncher();

  useEffect(() => {
    // ランチャーが初期化されていないか、統合属性が存在しない場合は戻ります
    // この例では、passbackconversiontrackingid 値の存在も確認します
    if (
      !launcher ||
      !attributes.email ||
      !attributes.passbackconversiontrackingid
    ) {
      return;
    }

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