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

Web SDKのベストプラクティス

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

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

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

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

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

Roktとの統合のベストプラクティスのアプローチは、統合コードをページのコンテンツ内に直接含め、他のサードパーティの統合の前にページの<head>内に配置することです。 Roktを統合するためのベストプラクティスは以下の通りです：

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

例

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta tags -->

    <!-- Part #1 - Load the 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>

    <!-- Other scripts and meta tags -->
</head>
<body>
<!-- Your HTML content here -->

<!-- Part #2 - As soon as the data attributes are available, execute the below script to display a Rokt placement -->
<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のようなバックグラウンドサービスの場合、最適なアプローチはこれらの統合をページの最下部に配置し、非同期で読み込むことです。このアプローチは、これらのリソースが遅く読み込まれても顧客の体験に影響を与えないようにするために意図されています。

非同期 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>
    あなたのコンテンツ
  </body>
</html>

すべてのリソースが同期的な場合、要素は順番に読み込まれます:

Web SDK 同期的な読み込み

非同期的な読み込み​

スクリプトを非同期的に読み込むことの利点は、ページの遅延を防ぐことですが、元のページのコンテンツが読み込まれる際にコンテンツが表示されたり、ちらついたりすることがあります。

スクリプトが非同期的に読み込まれる場合、ページは次のようになります:

<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 非同期的な読み込み

この場合、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のリソースをダウンロードしてキャッシュし、表示する時に簡単に取得できるようにします。SDKをセクションごとにダウンロードすることで、お客様の体験に重要なページで必要なネットワーク帯域幅を削減します。プリロードにより、お客様の体験が向上し、パフォーマンスが向上します。

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

注記

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

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

私たちは常にWeb SDKのパフォーマンスを向上させ、お客様がサイトを訪れた際の体験を最適化するために取り組んでいます。そのため、Rokt統合ランチャーは常に最新バージョンに設定されており、お客様に最高の体験を提供します。最新バージョンのRokt統合ランチャーを指すURLを使用してください。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つのドメイン解決（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ファイルなど）をリクエストし受信する過程を通じて読み込まれます。ページのレンダリングの基本的な手順は以下の通りです：

  1. DNSルックアップ：要求されたリソースのウェブアドレス（例：apps.rokt.com）を検索します。
  2. 初期接続：そのリソースのアドレスとの通信に成功します。
  3. 最初のバイトの受信（TTFB）：リソースから最初の情報の受信。
  4. ダウンロード/最後のバイトの受信（TTLB）：リソースから非常に最後の情報の受信。これにより、リソースがレンダリング（例：画像）または実行（例：スクリプト）されます。
  5. ドキュメントの完了：ウェブページがすべてのリソースの読み込みを完了したことを示すシグナルです。

詳細については、Googleの開発者ツールドキュメントを参照してください。

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