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

アプリケーションフォームの統合

統合要件の概要：

iFrameでアプリケーションを表示する​

Roktは、パートナーページの上に直接アプリケーションフォームを埋め込むためのラッパープラグインを管理しています。このプラグインは、Web SDKとパートナーページとの通信をプロキシし、クレジットカードの申し込みプラグインはプロバイダのドメイン上にホストされ、お好みのフレームワークを使用した標準のWebアプリケーションである必要があります。 各クレジットカードまたは製品に対して、アプリケーションフォームのURLを提供する必要があります。クレジットカードの申し込みページとRoktプラグインの間のやり取りは、ブラウザベースのメッセージパッシングを介して有効になります。 Roktのクレジットカードプラグインはレスポンシブであり、クレジットカードの申し込みをユーザーの画面に合わせてリサイズし、中央に配置し、背景のグラデーションを作成します。

要約すると、Roktプロバイダプラグイン（iFrame）は次のとおりです：

  • Web SDKと親ページとの通信をプロキシします。
  • ドメイン上にホストされ、標準のWebアプリケーションである必要があります。
  • Roktを介して提供される各ユニークなクレジットカードのデータフィールドにアプリケーションページのURLを含める必要があります。

クレジットカードの申し込みページとRoktプラグインの間のやり取りは、ブラウザベースのメッセージパッシングを介して有効になります。コードサンプルを含めた具体的な実装の詳細は、以下に記載されています。

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

クレジットカードの申し込みフォームのコンテンツセキュリティポリシー（CSP）が、Roktのドメイン（https://apps.rokt.com）を介してホスティングできるように設定されていることを確認してください。そうでない場合、Roktのプラグインはアプリケーションフォームをホストすることができません。 Roktは、提供されたURLフォームをクロスオリジンのiframeとしてロードします。つまり、RoktはページのCSPによって明示的に許可された権限を持ってページとやり取りすることができます。CSPの定義では、frame-ancestorsセクションにhttps://apps.rokt.comを明示的にリストアップすることを推奨します。これにより、Roktドメインのみがアプリケーションフォームを埋め込む権限を与えられます。これにより、ウェブページに第三者のスクリプトが注入されることから保護されます。

リアルタイムなアプリケーションの決定​

クレジットカードの申し込みプロセスでは、アプリケーションの決定（即時承認、保留、非承認など）をリアルタイムでRoktにプラグインのAPIを介して通知する必要があります。これにより、関連する配置コンテンツをレンダリングできます。後で解決される保留中の決定については、イベントAPIまたは他のデータ配信メカニズムを介してこれらの結果をRoktに通知する必要があります。詳細は、このドキュメントのコンバージョントラッキングセクションで説明されています。

Roktは、カードプロバイダがブラウザとのユーザーのインタラクションを表すイベントシグナルを送信するメカニズムを提供しています。これらのシグナルにより、Roktはユーザーのインタラクションに応答し、配置上の状態変更をトリガーできます（たとえば、申し込みが完了したときに成功メッセージを表示するなど）。また、レポートや異常検出のための重要なイベントデータも提供します。Roktはアプリケーションフォームのコンテンツや顧客のフォームとのインタラクションを見ることはできません。そのため、アプリケーションフォームが親ウィンドウにステータス情報を送信することで、アプリケーションの進捗状況や成功を報告し、フォームが完了または終了したときにウィンドウを閉じることができるようにしています。

シグナル説明
アプリケーションの開始アプリケーションフォームがロードされ、ユーザーのインタラクションの準備ができています。
アプリケーションの終了ユーザーがアプリケーションを閉じます。
アプリケーションの承認ユーザーの申し込みがリアルタイムで即座に承認されます。
アプリケーションの保留ユーザーの申し込みがプロバイダによる審査中です。

ステータスメッセージの送信​

Roktは、アプリケーションフォーム内のコンテンツにアクセスすることはできません。そのため、アプリケーションがRoktと通信して顧客の申し込みのステータスについて通知することが重要です。

アプリケーションフローのライフサイクル中に、Roktは次の3つのメッセージを受け取ることを期待しています： 「Initiated」 「Approved」または「Pending」 「Closed」

メッセージはPostMessageを介してRoktウィンドウに送信されます。例：

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

重要
  • セキュリティ上の理由から、各postMessageに特定のtargetOriginを指定することをお勧めします。*を使用しないでください。Roktは、ドメインから発信されないメッセージを無視します。
  • セキュリティ上の理由から、Roktはアプリケーションにメッセージを送信しません。したがって、アプリケーションは「message」イベントを受信しないようにする必要があります。
  • Roktによってアプリケーションが開かれます。Roktウィンドウの参照はwindow.openerにあります。ただし、参照が提供されない場合は、window.parentにフォールバックする必要があります。

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

メッセージ​

Initiatedメッセージ

Roktは、アプリケーションがロードされるとすぐにinitiatedメッセージを期待します。 メッセージデータは{ type: 'initiated' }です。

重要

Roktは、アプリケーションフォームがレンダリングされたことを知るために、このメッセージを受け取ることが非常に重要です。このメッセージがない場合、Roktは異常と見なし、調査が行われます。

Progress statusメッセージ

Roktは、アプリケーションの結果に応じて、pendingまたはapprovedメッセージを期待します。

アプリケーションが完了したが、即座に承認できない場合は、pendingメッセージを送信する必要があります。 pendingメッセージデータは{ type: ‘pending’}です。

ユーザーのアプリケーションを即座に承認できる場合にのみ、approvedメッセージを送信する必要があります。 approvedメッセージデータは{ type: ‘approved’ }です。

重要

ステータス変更メッセージは、ユーザーがアプリケーションフォームを送信した場合にのみ送信する必要があります。フォームを送信せずに顧客が終了した場合、保留中または承認済みのシグナルを送信しないでください。

Closeメッセージ

Roktは、ユーザーがアプリケーションフォームを閉じた場合には、必ずcloseメッセージを期待します。アプリケーションが完了しているかどうかに関係なく、Roktはcloseメッセージを受け取るとウィンドウをアンロードします。 closeメッセージデータは{ type: ‘close’ }です。

備考

ユーザーは、フォームのボタンのいずれかを操作してアプリケーションフォームを閉じることができます。フォームに「閉じる」ボタンがなく、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);
    },
    close() {
      roktWindow.postMessage({ type: 'close' }, targetOrigin);
    },
    approved() {
      roktWindow.postMessage({ type: 'approved' }, targetOrigin);
    },
    pending() {
      roktWindow.postMessage({ type: 'pending' }, targetOrigin);
    },
  };
})(/* your page domain here */);

// ロード後またはアプリケーションが準備/インタラクティブになった直後に
roktIntegration.initiated();

// ,,, ユーザーがアプリケーションを完了した場合
// アプリケーションがシステムによって承認された場合
roktIntegration.approved();
// アプリケーションが拒否された場合またはさらなる分析が必要な場合
roktIntegration.pending();

// アプリケーションを終了する前に
roktIntegration.close(); // Closeメッセージはウィンドウを閉じます。

または、次のように実装することもできます：


// ロード後またはアプリケーションが準備/インタラクティブになった直後に
(window.opener || window.parent).postMessage({ type: 'initiated' }, /* your page domain or */ window.location.origin);

// ,,, ユーザーがアプリケーションを完了した場合
// アプリケーションがシステムによって承認された場合
(window.opener || window.parent).postMessage({ type: 'approved' }, /* your page domain or */ window.location.origin);

// アプリケーションが拒否された場合またはさらなる分析が必要な場合
(window.opener || window.parent).postMessage({ type: 'pending' }, /* your page domain or */ window.location.origin);

// アプリケーションを終了する前に
(window.opener || window.parent).postMessage({ type: 'close' }, /* your page domain or */ window.location.origin); // Closeメッセージはウィンドウを閉じます。

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

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

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

保留中の承認​

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

イベントAPIの統合方法に関する手順に従ってください。

注記

コンバージョンを正しく帰属させるためには、オブジェクトデータにメール（email）、SHA-256ハッシュ化されたメール（emailsha256）、またはRoktトラッキングID（passbackconversiontrackingid）のいずれかを含める必要があります。Roktは、顧客を識別するためにメールトラッキングIDを使用することを推奨しています。ほとんどのRokt広告主となる金融サービス機関にとって、RoktトラッキングIDが優先される識別子です。

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