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

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

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

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

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

さらに、SPAは（画像、動画、コピーなどのアセットを除く）サイトのすべてのリソースをサイトに到着時に読み込みます。そして、顧客がそのページに移動するときにページに関連する情報を単純に取得します。SPAは通常、初期のサイト読み込み時間が増加しますが、ほぼ即座のページ遷移が可能です。毎日使用しているSPAの一般的な例には、Gmail、Netflix、Twitter、およびRoktのOne Platformがあります。

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

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

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

統合オプション​

注記

Reactを使用してSPAを構築している場合、こちらの手順に従ってください。

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

SPAでは、2つの統合オプションを提供しています。

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

Roktの事前初期化​

Roktサービスダイアグラム

Web SDKの最初の起動​

顧客が最初にSPAに到着した時に、Web SDKの統合ランチャーを初期化する必要があります。サービスは顧客がサイト上での旅行中に再利用することができます。

最初に初期化されると、統合ランチャーは事前にプレースメントを表示するために必要なすべての準備を行います。これにより、顧客がプレースメントの表示のタイムセンシティブな瞬間に到着したとき、サービスは表示するために必要な最小限の処理しか行わなくて済みます。

サービスを初期化するには、Roktの統合をページに読み込み、統合ランチャーのインスタンスを作成する必要があります。

統合の読み込み​

マルチページアプリケーションの例に従って、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コンテキスト、Angularサービスなどの適切な方法で提供することで行うことができます。

この例では、ユーザーがランチャーが使用されているページでアプリケーションをリフレッシュする場合に備えて、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,
});
この記事は役に立ちましたか？