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

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 コンテンツはこちら -->

  <!-- パート #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>

  <!-- Your HTML content here -->
</body>
</html>

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

非同期対同期​

ウェブページは、ヘッドとボディから構成されています。ボディ内のすべてのものはブラウザによってレンダリングされ、ヘッドはスクリプトやスタイルシートなどの外部リソースを読み込むために使用されます。ページがブラウザで読み込まれると、ブラウザは上から下へ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>
    あなたのコンテンツ
  </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>
    あなたのコンテンツ
  </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を使用してください。それは以下の通りです：

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

注記

Rokt Integration Launcherを最新バージョンに更新すると、一部のパートナーに対してロード時間の改善が見られます。以前のバージョンでは、静的リソースを提供するための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 の開発者ツールドキュメントを参照してください。

この記事は役に立ちましたか？