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

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

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

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

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

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

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

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

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

統合オプション​

注記

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

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

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

  1. (推奨) 顧客が最初にSPAに到着したときにWeb SDKを事前に初期化し、その後顧客がプレースメントが表示される場所に到達したときにプレースメントとオファーの選択をトリガーします。
  2. プレースメントが表示されるビューでWeb SDKを初期化します。仮想ページ遷移のタイムスタンプを含めるようにしてください。
    • このオプションでは、顧客が最初にSPAに到着したときにRoktアセットを事前にロードするためにpreparative 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を使用して、ユーザーがローンチャーが使用されているページでアプリケーションを更新することを防ぎます。このシナリオでは、ページがローンチャーインスタンスを実際に作成する前に、それを使用することでレース条件が発生する可能性があります。プロミスを保存し、インテグレーションローンチャーのインスタンスが使用される予定の場所で後で読み込むことで、毎回それが準備完了であることを保証できます。

配置を伴うページへの到着​

顧客が配置を伴うページに到着すると、シームレスに読み込まれるべきです。この時点で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スクリプトを動的にページに追加し、ユーザーがページを再訪問する際に統合ランチャーの追加インスタンスを作成しないようにする必要がある場合があります。

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

この情報を提供するメリットは、顧客がページを見始めるのにかかる時間からRoktコンテンツがレンダリングされるまでの時間を正確に測定できるようにするためです。私たちはWeb SDKのパフォーマンスを継続的に改善するために取り組んでいるため、あなたのサイトのインタラクティブな状態に達するまでの配置時間（TTI）を正確に測定できることは、ロード時間を監視・改善し、顧客体験を最適化する上で非常に重要です。Roktが提供できる価値を最大化します。

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

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