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

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

統合要件の概要:

iFrameでのアプリケーションのレンダリング​

Roktは、パートナーページの上に直接アプリケーションを可能にするために、アプリケーションフォームをiframe内に埋め込むラッパープラグインを管理しています。このプラグインは、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 を介して伝達する必要があります。これにより、関連する配置コンテンツを表示することができます。後で解決される保留中の判断については、結果を Rokt に Event API または他のデータ配信メカニズムを通じて伝達する必要があります。詳細は、このドキュメントの コンバージョントラッキング セクションで確認できます。

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

シグナル説明
Application Initiated申請フォームが読み込まれ、ユーザーの操作が可能になった状態。
Application Closedユーザーが申請を閉じた状態。
Application Approvedユーザーの申請がリアルタイムで即時承認された状態。
Application Pendingユーザーの申請がプロバイダーによる審査待ちの状態。

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

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(...);

メッセージ​

開始メッセージ

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

重要

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

進捗ステータスメッセージ

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

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

ユーザーのアプリケーションを即座に承認できる場合のみ、Approvedを送信してください。 approvedメッセージデータは{ type: ‘approved’ }です。

重要

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

クローズメッセージ

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またはEvent APIを使用することをお勧めします。それぞれの方法の手順は以下に記載されています：

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

保留中の承認​

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

Event APIを統合する方法については、これらの指示に従ってください。

注記

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

この記事は役に立ちましたか？
Last updated Oct 29, 2025