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

Web SDK ベストプラクティス (レガシー)

注意

このページは、以前のバージョンの Rokt Web SDK に適用されます。現在のバージョンについては、現在の開始ガイドを参照してください。

ウェブサイトの速度はビジネスにとって非常に重要であり、当社の技術はサイト全体での顧客体験の向上に焦点を当てています。そのため、ページのパフォーマンスは当社のソリューションの中核となる要素です。エンゲージメントを成功裏に向上させ、コンバージョン率を最大化するためには、ページの読み込み時間を最小限に抑えるためのいくつかのアプローチを取っています。

サードパーティ統合とパフォーマンス​

ページ上で使用するすべてのツールとサービスの配置と読み込み優先度を理解することが重要です。ウェブページに追加されるサードパーティの統合は、全体の読み込み時間に影響を与えます。

Rokt の統合は、特に顧客体験を向上させ、ページからの追加価値を引き出すように設計されています。他の一般的に使用されるサードパーティの統合は、トラッキングや分析に重点を置いており、顧客体験に直接影響を与えるものではありません。

ページから最大の価値を引き出すためには、Rokt のような顧客中心のサービスがトラッキングや他のバックグラウンドサービスよりも先にトリガーされることを確認することが重要です。

Rokt との統合のベストプラクティスアプローチは次のとおりです：

  • 他のサードパーティ統合の_前に_ページの <head> 内に統合ランチャースクリプトの読み込みを配置する。
  • データ属性が利用可能になったらすぐに Rokt の配置をトリガーする。

例

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- メタタグ -->

  <!-- パート #1 - Web SDK の読み込み -->
  <script type="module">
      window.RoktLauncherScriptPromise = new Promise((resolve, reject) => {
          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;
          script.id = "rokt-launcher";

          script.addEventListener('load', () => resolve());
          script.addEventListener('error', (error) => reject(error));

          target.appendChild(script);
      });
  </script>

  <!-- 他のスクリプトとメタタグ -->
</head>
<body>
  <!-- HTMLコンテンツをここに記述 -->

  <!-- Part #2 - データ属性が利用可能になったら、以下のスクリプトを実行してRoktプレースメントを表示 -->
  <script type="module">
      await window.RoktLauncherScriptPromise;

      const launcher = await window.Rokt.createLauncher({
          accountId: "rokt-account-id",
          sandbox: true,
      });

      await launcher.selectPlacements({
          attributes: {
              email: "",
              firstname: "",
              lastname: "",
              confirmationref: "",
              billingzipcode: "",
              amount: "",
              paymenttype: "",
              ccbin: "",
              mobile: "",
              country: "",
              language: "",
              currency: "",
              billingaddress1: "",
              billingaddress2: "",
              age: "",
              gender: "",
              cartItems: JSON.stringify(cartItems),
          },
      });
  </script>

  <!-- HTMLコンテンツをここに記述 -->
</body>
</html>

Google Analyticsのようなバックグラウンドサービスの場合、これらの統合をページの下部に配置し、非同期でロードするのが最適なアプローチです。このアプローチは、これらのリソースが遅くロードされても、顧客体験に影響を与えないようにすることを目的としています。

非同期 vs 同期​

ウェブページは、ヘッドとボディで構成されています。ボディ内のすべての要素はブラウザによってレンダリングされ、ヘッドはスクリプトやスタイルシートなどの外部リソースを読み込むために使用されます。ページがブラウザで読み込まれると、ブラウザは上から下へとHTMLを読み始めます。ヘッドセクションには、すべての外部リソースが完全に読み込まれるまで何も表示されないという特別な特性があります。これが同期読み込みです。

しかし、この機能を変更して、すべての外部リソースが読み込まれるのを待たずに特定の要素を読み込むことができます。これが非同期読み込みとして知られています。

Roktスクリプトは、Roktをサイトに追加するの例に従って非同期で読み込まれます。これにより、ページ全体の読み込みが速くなります。ブラウザはRoktリソースの読み込みが完了するのを待たずにページを顧客に表示するため、顧客体験が中断されず、Roktの配置が準備ができたときに表示されます。

アップセルや支払いオプションの提供など、Roktがトランザクションフローに不可欠なより深い統合の場合、クライアントはRoktを同期読み込みに切り替えることができ、Roktコンテンツが完全に読み込まれるとページが表示されるようにします。

同期ロード​

リソースが同期的にロードされる場合のページの例は以下の通りです:

<html>
  <head>
    <script src="a.js" />
    <script src="b.js" />
    <script src="c.js" />
    <script src="d.js" />
    <script src="e.js" />
  </head>
  <body>
    Your content
  </body>
</html>

すべてのリソースが同期的である場合、要素は順番にロードされます:

Web SDK Synchronous Loading

非同期ロード​

スクリプトを非同期でロードすることには、ページの速度を低下させないという利点がありますが、ページ上のコンテンツがポップアップしたり、元のページコンテンツがロードされる際にちらつきが発生する可能性があります。

スクリプトが非同期でロードされる場合のページの例は以下の通りです:

<html>
  <head>
    <script src="a.js" />
    <script async src="rokt.js" />
    <script src="c.js" />
    <script src="d.js" />
    <script src="e.js" />
  </head>
  <body>
    Your content
  </body>
</html>

スクリプトが非同期の場合、他のスクリプトと同時にロードされます:

Web SDK Asynchronous Loading

この場合、Roktは他のリソースのロードを妨げません。Roktスクリプトと他のページリソースは同時にロードされるため、ページ全体のロードが速くなります。ブラウザはRoktリソースのロードが完了するのを待たずにページを表示するため、ユーザー体験が中断されることはなく、Roktの配置は準備ができたときに表示されます。

タグマネージャーを通じてRoktを読み込む​

注記

お客様に最高の体験を提供するために、Rokt SDKをページのHTMLに直接配置して起動することをお勧めします。

タグマネージャーを通じてRoktを読み込みたい場合、Google Tag Manager、Tealium、Segment、およびAdobe Experience Platformを使用した統合をサポートしています。

実験エンジンを通じてRoktを読み込む​

お客様に最高の体験を提供するために、Roktが提供する実験ツールを使用することをお勧めします。Roktの実験ツールに関する詳細は、アカウントマネージャーにお問い合わせください。

準備用iframeを使用する​

Roktのインタラクティブまでの時間とページパフォーマンスを最適化するために、準備用iframeソリューションをお勧めします。これは、安全で実装が簡単で柔軟なiframeで、トランザクションフローの早い段階に配置されます。準備用iframeは、Web SDKを事前に読み込み、Roktリソースをダウンロードしてキャッシュすることで、配置を表示する際に簡単に取得できるようにします。SDKをセクションごとにダウンロードすることで、お客様の体験にとって重要なページで必要なネットワーク帯域幅を削減します。事前読み込みにより、お客様にとっての体験が向上し、パフォーマンスの結果も改善されます。

詳細については、準備用iframeの統合例を参照してください。

注記

最高のパフォーマンスを確保するために、準備用iframeを実装する前にRokt Integration Launcherを最新バージョンに更新してください。

Rokt Integration Launcher の最新バージョンを使用する​

私たちは、Web SDK のパフォーマンスを向上させ、あなたのサイトを訪れる顧客の体験を最適化するために継続的に作業しています。そのため、Rokt Integration Launcher は常に最新バージョンに固定され、顧客に最高の体験を提供します。Rokt Integration Launcher の最新バージョンを指す URL を使用してください。URL は以下の通りです:

https://apps.rokt.com/wsdk/integrations/launcher.js

注記

Rokt Integration Launcher を最新バージョンに更新すると、一部のパートナーにとって読み込み時間が改善されます。以前のバージョンの Web SDK では、静的リソースを提供するために wsdk.rokt.com と、Rokt バックエンドシステムとの API 通信のために apps.rokt.com の2つの異なるドメインが使用されていました。これらの2つのドメインは現在、apps.rokt.com という単一のドメインに統合されています。

以前のバージョンの Web SDK に基づく統合では、2つのドメイン解決（wsdk.rokt.com と apps.rokt.com）が必要でした。単一のドメインに統合することで、これらの解決の1つが削除され、パフォーマンスが向上します。

リソースヒントを使用する​

リソースヒントを使用することは、Rokt統合の開始時間を改善するための迅速かつ簡単な方法です。特にRoktのようにサードパーティのドメインがセキュアな場合、サードパーティスクリプトへの接続を確立することが、ロード時間の大部分を占めることがあります。

preload タグは、ページに必要なリソースであり、できるだけ早く取得するべきであることをブラウザに通知します。後でRoktプレースメントを表示するリクエストが行われると、Roktは迅速にオファーをレンダリングし、顧客に最適な体験を提供することができます。

preload リソースヒントを実装するには、Roktプレースメントを表示するすべてのページの <head> セクションに次のコードを含めます:

<link
  rel="preload"
  as="script"
  href="https://apps.rokt.com/wsdk/integrations/launcher.js"
/>

リソースヒントは、ブラウザがどのオリジンに接続し、どのリソースを取得して前処理するかの意思決定プロセスを支援し、ページパフォーマンスを向上させます。

  1. DNS-prefetch は、必要なリソースを取得するために使用できるオリジンを示し、できるだけ早く解決されるべきであることを示します。詳細は w3.org を参照してください。
  2. Preconnect は、必要なリソースを取得するために使用できるオリジンを示し、ブラウザがDNSルックアップ、TCPハンドシェイク、およびオプションのTLSネゴシエーションを含む早期接続を開始できるようにします。詳細は w3.org を参照してください。
  3. Preload は、現在のナビゲーションの一部として使用されるリソースを示し、できるだけ早く取得されるべきであることを示します。詳細は w3.org を参照してください。
注記

preload で参照されているリンクが、ページの統合コード内のRoktスクリプトを指すURLと一致していることを確認してください。

Roktスクリプトのプリロード（シングルページアプリケーション向け）​

サイトがシングルページアプリケーション（SPA）の場合、Roktが表示される前にビューでRoktスクリプトをプリロードすることをお勧めします。この初期化ステップでは顧客データは必要なく、ページのバックグラウンドでRoktスクリプトを読み込むことができます。

顧客がRoktが表示されるページに到達したときには、Web SDKはすでにウォームアップされており、すぐに使用可能です。このアプローチにより、オファーを表示する前にWeb SDK全体をダウンロードするのを待つことなく、ページにプレースメントを表示するためのメソッドを単に呼び出すことができます。推奨されるSPA統合についての詳細は、シングルページアプリケーションの例をご覧ください。

マルウェア保護またはインテグリティスクリプトを通じたRoktの読み込み​

JScramblerのようなプログラムを使用してRoktを読み込むことはお勧めしません。これによりページの速度が低下します。Roktはサンドボックス化されたiframeで実行され、親ページとの相互作用を最小限に抑え、サイト上で実行されるコードへの信頼性を高めるための追加のセキュリティ機能を提供します。これらの機能やセキュリティへのアプローチについて詳しくは、Web SDKのセキュリティドキュメントをご覧ください。

ネットワークリクエストのフェーズ​

ウェブページは、ブラウザがそのページを構成するさまざまなリソース（画像、CSSファイル、JavaScriptファイルなど）を要求し受信する一連のフェーズを通じてロードされます。ページがレンダリングされる基本的な5つのステップは以下の通りです：

  1. DNSルックアップ: 要求されたリソースのウェブアドレスを見つけます（例: apps.rokt.com）。
  2. 初期接続: そのリソースのアドレスと正常に通信します。
  3. 最初のバイトまでの時間 (TTFB): リソースから最初の情報を受信します。
  4. ダウンロード/最後のバイトまでの時間 (TTLB): リソースから最後の情報を受信し、それによりリソースをレンダリング（例: 画像）または実行（例: スクリプト）できるようにします。
  5. ドキュメント完了: ウェブページがすべてのリソースのロードを完了したことを示す信号です。

詳細については、Googleのデベロッパーツールドキュメントを参照してください。

この記事は役に立ちましたか？
Last updated Oct 29, 2025