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

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の配置を表示する -->

背景サービス（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は、RoktリソースをダウンロードおよびキャッシュすることでWeb SDKを事前読み込みするため、配置を表示する時に簡単に取得できるようになります。SDKをセクションごとにダウンロードすることで、お客様の体験にとって重要なページのネットワーク帯域幅を削減します。事前読み込みを行うことで、お客様にとっての体験が向上し、あなたにとってもパフォーマンスの結果が良くなります。

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

注記

最高のパフォーマンスを得るために、準備用iframeを実装する前にRokt統合ランチャーを最新バージョンに更新してください。

Rokt統合ランチャーの最新バージョンを使用する​

私たちは、Web SDKのパフォーマンスを向上させ、あなたのサイトを訪れる顧客の体験を最適化するために継続的に作業しています。そのため、Rokt統合ランチャーは常に最新バージョンに固定され、顧客にとって最良の体験を確保します。Rokt統合ランチャーの最新バージョンを指すURLを使用してください。それは:

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

注記

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

以前のWeb SDKバージョンに基づく統合は、2つのドメイン解決を必要とします（1つは wsdk.rokt.com、もう1つは 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の開発者ツールドキュメントを参照してください。

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