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

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

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

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

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

さらに、SPAはサイト到着時にすべてのサイトリソース（画像、動画、コピーなどのアセットは除く）を読み込みます。その後、顧客がそのページに移動するときにページ関連情報のみを取得します。SPAは通常、サイトの初回読み込み時間が増加しますが、ページ遷移がほぼ瞬時に行われます。毎日使っている一般的なSPAの例として、Gmail、Netflix、Twitter、RoktのOne Platformが挙げられます。

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

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

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

統合オプション​

注記

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

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 で提供したり、選択したフレームワークに適した方法で提供することで行うことができます。

この例では、プロミスを使用して、ユーザーがランチャーが使用されるページでアプリケーションをリフレッシュすることをガードしています。このシナリオは、ランチャーインスタンスが実際に作成される前にページで使用される競合状態を引き起こす可能性があります。プロミスを保存し、インテグレーションランチャーのインスタンスが使用されるべき場所で後から読み込むことにより、毎回準備ができていることを保証できます。

プレースメントのあるページへの到着​

顧客がプレースメントのあるページに到着すると、それはシームレスにロードされる必要があります。この時点で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,
});
この記事は役に立ちましたか？