Last updated 2023年9月12日

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

注記

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

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

React SPAの場合、Roktはシングルトンとして一度起動する必要があります。配置がレンダリングの準備ができた場合、アプリケーションはそのシングルトンと対話することができます。

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

React Context Wrapper

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]);
}

::