組み込みウェブアプリケーションの統合

統合要件の概要:

• iFrame内でレンダリングできるウェブアプリケーションのURLを提供する。
• Roktのドメインでホスティングを許可するために、ウェブアプリケーションのコンテンツセキュリティポリシー (CSP) を更新する。
• Roktが状態の変化に応答できるようにリアルタイムメッセージ信号を実装する。
• コンバージョントラッキングソリューションを統合する。

iFrameでの組み込みウェブアプリケーションのレンダリング

Roktは、パートナーページの上で直接シームレスなインタラクションを可能にするiFrame内にあなたのウェブページを埋め込むラッパープラグインを管理しています。このプラグインは、Web SDKとパートナーページ間の通信を促進し、あなたのページ、Rokt、およびパートナーページ間のセキュリティ隔離境界を提供します。組み込みアクションプラグインはあなたのドメインでホストされ、あなたの好みのフレームワークを使用して標準的なウェブアプリケーションとして構築されるべきです。提供する各製品またはサービスごとにURLを提供する必要があります。

あなたのウェブページとRoktプラグイン間のインタラクションは、ブラウザベースのメッセージパッシングによって有効になります。Roktの組み込みアクションプラグインはレスポンシブで、ユーザーの画面に合わせてページをリサイズし、中央に配置し、シームレスな統合のためにバックドロップグラデーションを適用します。

あなたのウェブページとRoktプラグイン間のインタラクションは、ブラウザベースのメッセージパッシングによって有効になります。コードサンプルを含む具体的な実装の詳細は以下に記載されています。

コンテンツセキュリティポリシーの考慮事項

ウェブアプリケーションのコンテンツセキュリティポリシー (CSP) が、Rokt のドメイン https://apps.rokt.com を介したホスティングを許可していることを確認してください。そうでないと、Rokt のプラグインはアプリケーションフォームをホスティングできません。

Rokt は提供された URL をクロスオリジンの iFrame として読み込みます。これにより、ページに対する最大限の制御を維持しながらセキュリティサンドボックスを提供します。CSP を使用する場合、frame-ancestors ディレクティブを使用して、Rokt (https://apps.rokt.com) にページを iFrame でレンダリングする許可を明示的に与える必要があります。このディレクティブは、Rokt iFrame でレンダリングされるページのみに追加する必要があります。

リアルタイムメッセージ信号

Rokt は、ブラウザ内でのユーザーインタラクションを表すリアルタイムメッセージ信号をウェブアプリケーションから送信するためのメカニズムを提供します。これらの信号により、Rokt は以下を行うことができます:

• 動的に応答: 例えば、顧客がトランザクションを完了した際に成功メッセージを表示する。
• 状態変化をトリガー: 例えば、iFrame が閉じられたときにウィンドウを折りたたむ。
• 重要なデータを収集: Rokt が最も関連性の高い配置コンテンツをレンダリングし、ユーザーの進捗を正確に追跡できるようにする。

後で解決される保留中の決定については、Event API または他のデータ配信メカニズムを介して Rokt にこれらの結果を伝達する必要があります。詳細は、このドキュメントの コンバージョントラッキング セクションで確認できます。

以下は、サポートされている信号とその説明の表です:

ウェブサイトアクション	説明	統合が必要
Initialized	ランディングページが正常に読み込まれ、サイトがインタラクションの準備ができたときに送信されます。	True
Complete Registration	ユーザーがビジネスが提供するサービスと引き換えに情報を正常に送信したときに送信されます。例えば、アカウント登録。	False
Logged In	ユーザーがアカウントを正常に認証したことを示します。	False
Lead	顧客が情報を送信したときに送信されます（例: トライアルへのサインアップやフォームの記入）。後で連絡される可能性があることを理解しています。	False
Subscribe	ユーザーが製品またはサービスの有料サブスクリプションを開始したときに送信されます。	False
Application Submitted	ユーザーがクレジットカードの申請を送信したときに送信されます。	True only for credit card offers
Application Approved	ユーザーのクレジットカード申請がリアルタイムで即座に承認されたときに送信されます。	True only for credit card offers
Completed	ユーザーが広告主サイトで目的のアクションを正常に完了したときに送信されます（例：購入の完了）。	True
Provider Close	ユーザーがチェックアウトに戻ることでフォームを終了したときに送信されます（例：「チェックアウトに戻る」ボタンをクリック）。	True

メッセージシグナルの送信

クロスオリジンiFrameによって提供されるセキュリティサンドボックスのため、Roktはウェブアプリケーション内のコンテンツにアクセスできません。したがって、フォームがそのステータスをRoktウィンドウにブラウザのpostMessage APIを使用してメッセージシグナルを送信することが重要です。例：

roktWindow.postMessage({ type: 'initiated' }, ‘https://your.domain.com’);

重要

• 各postMessage呼び出しで特定のtargetOriginを常に指定してください（*の使用は避けてください）。セキュリティ上の理由から、Roktは指定されたドメインから発信されないメッセージを無視します。
• Roktはウェブアプリケーションにメッセージを送信しないため、「message」イベントをリッスンする必要はありません。
• あなたのウェブアプリケーションはRoktによって開かれ、ウィンドウの参照はwindow.openerで利用可能です。これが提供されない場合は、window.parentを使用してください。

const roktWindow = window.opener || window.parent; roktWindow.postMessage(...);

メッセージ

フォームの初期化

Roktは、アプリケーションが読み込まれるとすぐに'initialized'メッセージを期待します。

重要

このメッセージを受信することは、Roktがウェブページがレンダリングされたことを確認するために重要です。このメッセージがない場合、異常と見なされ、Roktによる調査が行われます。

進捗メッセージ

Roktは、ユーザーのコンバージョンジャーニーのステップを追跡するために、以下の「進捗」メッセージを受け入れます。これらは、レポートやキャンペーンの最適化に役立ちます。最低限、completedメッセージが必要で、ユーザーがサイト上で望ましいアクションを完了したことを示します（例：購入の最終化）。

• ユーザーがアカウントに正常にサインインしたときに'loggedIn'を使用します。
• ユーザーが登録プロセスを完了したときに'completeRegistration'を使用します。
• ユーザーが製品またはサービスの有料サブスクリプションを開始したときに'subscribe'を使用します。
• 顧客が情報を提出したとき（例：トライアルへのサインアップやフォームの記入）、後で連絡を受ける可能性があることを理解している場合に'lead'を使用します。
• 顧客がクレジットカードの申請を提出したときに'applicationSubmitted'を使用します。
• 顧客のクレジットカード申請が即時承認されたときに'applicationApproved'を使用します。

重要

最低限、completedメッセージが必要で、ユーザーがサイト上で望ましいアクションを完了したことを示します。Roktで申請フォームをホストしているクレジットカード広告主の場合、applicationSubmittedとapplicationApprovedが、申請から承認までの率を最適化するために必要です。

フォームの終了

Roktは、フォームを終了するたびにproviderCloseメッセージを期待します。望ましいアクションが完了したかどうかに関わらず、Roktはクローズメッセージを受信するとすぐにウィンドウをアンロードします。

重要

ユーザーは、フォームのボタンのいずれかを操作することで、アプリケーションフォームを閉じることができます。フォームに「閉じる」ボタンがなく、RoktプラグインのiFrame内の「X」ボタンを使用してアプリケーションを閉じる場合、このシグナルを送信する必要はありません。

実装例

この実装例は、あなたのアプリケーションで直接使用できます:

const roktIntegration = (function(origin) {    
  const targetOrigin = origin || window.location.origin;    
  const roktWindow = window.opener || window.parent;    

  return {    
    initiated() {
      roktWindow.postMessage({ type: 'initiated' }, targetOrigin);
    },  
    loggedIn() {
      roktWindow.postMessage({ type: 'loggedIn' }, targetOrigin);
    },  
    completeRegistration() {
      roktWindow.postMessage({ type: 'completeRegistration' }, targetOrigin);
    },  
    applicationSubmitted() {
      roktWindow.postMessage({ type: 'applicationSubmitted' }, targetOrigin);
    },  
    applicationApproved() {
      roktWindow.postMessage({ type: 'applicationApproved' }, targetOrigin);
    },  
    completed() {
      roktWindow.postMessage({ type: 'completed' }, targetOrigin);
    },  
    providerClose() {
      roktWindow.postMessage({ type: 'providerClose' }, targetOrigin);
    }  
  };    
})(/* your page domain here */);
   

// 使用例:  
// ランディングページの読み込み時  
roktIntegration.initiated();  

// ユーザーがログインしたとき  
roktIntegration.loggedIn();  

// 新しいアカウントが作成されたとき  
roktIntegration.completeRegistration();  

// クレジットカード申込フォームが送信されたとき  
roktIntegration.applicationSubmitted();

// クレジットカード申込フォームが承認されたとき  
roktIntegration.applicationApproved();  

// アクションが完了したとき  
roktIntegration.completed();  

// ユーザーが「チェックアウトに戻る」ボタンを使用してプロセスを完了したとき  
roktIntegration.providerClose();

または、ラッパーを使用せずに直接メッセージを送信することもできます:

const roktWindow = window.opener || window.parent;

// ランディングページの読み込み時:
roktWindow.postMessage({ type: 'initiated' }, /* your page domain or */ window.location.origin);

// ユーザーがログインしたとき:
roktWindow.postMessage({ type: 'loggedIn' }, /* your page domain or */ window.location.origin);

// アカウント作成時:
roktWindow.postMessage({ type: 'completeRegistration' }, /* your page domain or */ window.location.origin);

// クレジットカード申込フォームの送信時（該当する場合）:
roktWindow.postMessage({ type: 'applicationSubmitted' }, /* your page domain or */ window.location.origin);

// クレジットカード申請の承認時（該当する場合）:
roktWindow.postMessage({ type: 'applicationApproved' }, /* あなたのページのドメインまたは */ window.location.origin);

// アクション完了時:
roktWindow.postMessage({ type: 'completed' }, /* あなたのページのドメインまたは */ window.location.origin);

// 終了またはチェックアウトへの戻り時:
roktWindow.postMessage({ type: 'providerClose' }, /* あなたのページのドメインまたは */ window.location.origin); // providerClose メッセージはウィンドウを自動的に閉じます

コンバージョントラッキング

広告主とプロバイダーは、コンバージョントラッキングソリューションを統合する必要があります。自動コンバージョン報告を設定することで、キャンペーンがビジネスに与える影響を測定するのに役立ちます。Rokt はコンバージョンデータを統合するためのさまざまな方法を提供しています。最も正確な結果を得るためには、Rokt Web SDK または Event API の使用をお勧めします。それぞれの方法の手順は以下に記載されています:

• Web SDK
• Event API

推奨されませんが、代替として手動ファイルアップロードによるコンバージョンデータの提供も可能です。遅延したコンバージョンデータは、他のコンバージョントラッキングソリューションが不可能な場合にのみ使用すべきであり、予測モデル（つまり関連性）に重大な影響を与え、スマートツールへのアクセスを制限し、報告と分析の能力を妨げます。

保留中の承認

Web SDKは、顧客がアプリケーションを送信した際にリアルタイムで承認されるアプリケーションのみを追跡します。承認決定が下される前にさらなるレビューが必要な保留中のアプリケーションも、Roktに提供する必要があります。これにより、Roktに起因するすべてのコンバージョンをキャプチャできます。保留中の承認データを統合するには、Event APIの使用をお勧めします。Event APIを使用すると、バックエンドサーバーがRoktのサーバーに安全に接続し、クレジットカード申請の成功に関する決定が下された後にコンバージョンデータを送信できます。

Event APIを統合する方法については、以下の手順に従ってください。

注記

コンバージョンを適切に帰属させるためには、Roktが顧客を識別できるように、objectDataにemail (メール), SHA-256ハッシュ化されたemail (emailsha256), またはRokt Tracking ID (passbackconversiontrackingid)のいずれかを含める必要があります。Rokt Tracking IDは、Roktと広告を行うほとんどの金融サービス機関にとって推奨される識別子です。

セキュリティとプライバシー

アプリケーションデータの所有権

あなたのページは、セキュリティサンドボックスを提供するためにクロスドメインのiframeでレンダリングされます。Roktおよびそのパートナーは、あなたのアプリケーションフォームデータにアクセスしたり、受け取ったりすることはできません。顧客がアプリケーションフォームに入力した情報は、あなたにのみ提供され、あなた自身のサーバーに保存されます。ユーザーはもちろん、eコマースページ上でパートナーと同じまたは類似の情報を直接共有することを選択することができます。名前や住所などの多くの同様の情報は、元のパートナーサイトでの購入を完了するために必要です。あなたは、顧客がパートナーに直接提供した顧客のPIIデータ（個人識別情報）にアクセスすることはできません。

アプリケーションデータの保存

Roktは、あなたのアプリケーションフォームに入力された顧客データにアクセスすることはありません。したがって、統合されたアプリケーションキャンペーンのために、顧客データはRoktのサーバーに保存されません。

Roktのセキュリティポリシー

以下に、Roktが意図的に実施しているセキュリティ対策を示します。これにより、脆弱性を軽減し、明示的に定義されたpostmessage実装を通じてのみ、あなたのウェブアプリケーションと通信することを防ぎます。

• Roktはあなたのアプリケーションの内容にアクセスしようとすることはありませんが、あなたのアプリケーションをホストするiFrameに最も安全なCSP（Content Security Policy）設定を設定し、外部アクセスを不可能にします。
• Roktは、送信側と受信側の両方でChannel Messaging APIを使用します。これは、第三者がwindow.postmessage()を通じてメッセージを送受信することを防ぐためです。
• Roktは、window.postmessage()を通じて資格情報やトークンを送信しません。
• Roktは、どのような種類の通信チャネルも使用しません。つまり、あなたのアプリケーションは「メッセージ」イベントをリッスンする必要がありません。
• Roktは、クリックジャッキングを防ぐためにframe-ancestors CSPディレクティブを実装しています。

Roktは、セキュリティインシデントを処理するための詳細なプロセスを持っており、インシデントの完全な内部レビューを含みます。