メインコンテンツまでスキップ

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

あなたのウェブサイトがシングルページアプリケーション (SPA) として構築されている場合、スムーズな統合のために以下のガイドラインに従ってください。

シングルページアプリケーションとは？​

シングルページアプリケーションは、ページ遷移を動的に1つのウェブページを書き換えることで実現するウェブアプリケーション（またはウェブサイト）です。これにより、パフォーマンスが向上し、ウェブアプリケーションがよりネイティブに感じられます。

さらに、SPAはサイト到着時にすべてのサイトリソース（画像、動画、コピーのようなアセットを除く）をロードします。そして、顧客がそのページに移動したときにページ関連情報を取得するだけです。SPAは通常、初期のサイトロード時間が長くなりますが、ページ遷移はほぼ瞬時に行われます。日常的に使用しているSPAの一般的な例として、Gmail、Netflix、Twitter、RoktのOne Platformがあります。

対照的に、従来のマルチページアプリケーションは、ナビゲーション間で各ページをアンロードし、次のページに到着したときにすべてのリソースを再ロードします。

マルチページアプリケーションの統合

あなたのサイトがシングルページアプリケーションでない場合は、標準の統合手順に従ってください。

統合オプション​

注記

あなたのSPAがReactを使用して構築されている場合は、これらの指示に従ってください。

RoktをSPAに統合するプロセスは、従来のマルチページウェブサイトに統合するプロセスとは異なります。異なるSPAはページ遷移を異なる方法で処理するため、このガイドはWeb SDKをより一般的に使用する方法に焦点を当てています。開発者はこれらの原則を選択したフレームワークに適用する必要があります。

SPAに対して、私たちは2つの統合オプションを提供しています。

  1. (推奨) SPAに顧客が最初に到着したときにWeb SDKを事前に初期化し、顧客がプレースメントがレンダリングされる場所に到達したらプレースメントとオファーの選択をトリガーします。
  2. プレースメントがレンダリングされるビューでWeb SDKを初期化します。仮想ページ遷移のタイムスタンプを含めることを確認してください。
    • このオプションでは、顧客がSPAに最初に到着したときにRokt資産をプリロードするために準備用iframeを使用することをお勧めします。これにより、プレースメントの読み込み時間が改善されます。両方のオプションについては以下で詳しく説明します。

Roktの事前初期化​

Roktサービス図

Web SDKの初回起動​

Web SDK Integration Launcher は、顧客がSPAに初めて到着したときに初期化されるべきです。このサービスは、サイト上での顧客の旅の間に再利用することができます。

初めて初期化されると、Integration Launcherはプレースメントを事前に表示するために必要なすべての準備を行います。これにより、顧客がプレースメント表示のタイムセンシティブな瞬間に到達したときに、サービスはプレースメントを表示するために必要な最小限の作業だけを行えばよいことになります。

サービスを初期化するには、Roktインテグレーションをページにロードし、Integration Launcher のインスタンスを作成する必要があります。

インテグレーションのロード​

マルチページアプリケーションの例 に従って、Rokt Integration Launcherは、ウェブサイトの<head>にRoktスクリプトタグを含めることでページにロードすることができます。

<head>
  <script
    async
    crossorigin="anonymous"
    id="rokt-launcher"
    fetchpriority="high"
    src="https://apps.rokt.com/wsdk/integrations/launcher.js"
    type="module"
  ></script>
</head>

または、以下のコードスニペットを既にアプリケーションに配信されているJavaScriptロジックに追加することもできます。

const target = document.head || document.body;
const script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://apps.rokt.com/wsdk/integrations/launcher.js";
script.fetchPriority = "high";
script.crossOrigin = "anonymous";
script.async = true;

target.appendChild(script);

インテグレーションランチャーのインスタンスを作成する​

注意

以下の例をコピーする場合は、rokt-account-id をあなたのアカウントのユニークIDに置き換えてください。rokt-account-id はアカウントマネージャーまたは One Platform で取得できます。

const launcherPromise = new Promise((resolve, reject) => {
  script.onload = () =>
    resolve(window.Rokt.createLauncher({ accountId: "rokt-account-id" }));
  script.onerror = (error) => reject(error);
});

ランチャープロミスへの参照は、アプリケーションフローの後で再利用できるように保存しておく必要があります。これは、グローバルステートに割り当てたり、React Context、Angular Service など、選択したフレームワークに適した方法で提供することで行うことができます。

この例では、ユーザーがランチャーが使用されるページでアプリケーションをリフレッシュすることを防ぐために、Promise が使用されています。このシナリオでは、ランチャーインスタンスが実際に作成される前にページによって使用されるという競合状態が発生する可能性があります。Promise を保存し、インテグレーションランチャーのインスタンスが使用されるべき場所で後でロードすることにより、毎回準備が整っていることを保証できます。

配置があるページへの到着​

顧客が配置があるページに到着した際には、シームレスにロードされるべきです。この時点でIntegration Launcherサービスが稼働している必要があり、サイトはオファー選択をトリガーするだけで済みます。

選択は、配置があるページがロードされたときにトリガーできます。Rokt Web SDKは、埋め込み配置のためのアンカーHTML要素がレンダリングされる機会を確保するための猶予期間を提供します。

ページ上でアンカー要素のレンダリングが遅れる可能性がある場合、例えば追加のXHRリクエストによりさらに遅れる可能性がある場合、アンカー要素がレンダリングされるまで待ってから選択をトリガーすることを検討してください。

ほとんどのフレームワークには、ビューがレンダリングされたことを示すライフサイクルフックがあります。

例えば: Angularでは、開発者はngAfterViewInit()を使用し、ReactではuseEffect()フックやcomponentDidMount()メソッドを使用できます。

async function afterPageElementsHaveRendered() {
  const launcher = await launcherPromise;
  const selection = await launcher.selectPlacements({
    attributes: {
      email: "j.smith@example.com",
    },
    identifier: "checkout.page",
  });
}

プレースメントを含むページから離れる​

Roktプレースメントを含むページから離れる前に、パートナーサイトはRoktサービス上のメソッドをトリガーして、現在のページ上のプレースメントを削除し、クリーンアップを行う必要があります。

ほとんどのフレームワークには、ページが移動される直前を示すライフサイクルフックがあります。例えば、Angularでは開発者はngOnDestroy()を使用し、ReactではuseEffect()フックの戻り引数やcomponentWillUnmount()の形で使用できます。

async function beforeNavigatingAwayFromPage() {
  selection.close();
}

仮想ページでのRoktの初期化​

統合はメインの例と同じ手順に従います。ただし、ページにRoktスクリプトを動的に追加する必要がある場合や、ユーザーがページを再訪した際にIntegration Launcherのインスタンスを追加で作成しないようにする必要があるかもしれません。

仮想ページでの初期化にpageInitTimestampを追加することで、RoktはSPAページ遷移に対するパフォーマンスを測定できます。この値は、仮想ページ遷移が発生したタイムスタンプを示すJavaScriptのDateオブジェクトであるべきです。

この情報を提供する利点は、顧客がページを見始めてからRoktコンテンツがレンダリングされるまでの時間を正確に測定できることです。Web SDKのパフォーマンスを継続的に改善するため、サイト上でのプレースメントのインタラクティブまでの時間（TTI）を正確に測定することは、読み込み時間を監視し改善し、顧客の体験を最適化し、Roktが提供できる価値を最大化するために重要です。

// 他の例に従った統合手順
const launcher = await launcherPromise;

const launcher = await createLauncher({
  accountId: "rokt-account-id",
  pageInitTimestamp: Date,
});
この記事は役に立ちましたか？
Last updated Oct 29, 2025