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

アプリケーションフォームを統合する

統合要件の概要:

アプリケーションをiFrameでレンダリングするアプリケーションをiFrameでレンダリングする への直接リンク

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

要約すると、Roktプロバイダープラグイン（iFrame）は:

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

クレジットカードアプリケーションページとRoktプラグインの間のインタラクションは、ブラウザベースのメッセージパッシングを介して有効になります。コードサンプルを含む具体的な実装の詳細は以下に含まれています。

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

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

リアルタイムアプリケーション決定リアルタイムアプリケーション決定 への直接リンク

クレジットカード申請プロセスは、申請の決定（例えば、即時承認、保留、または不承認）をRoktにリアルタイムでプラグインのAPIを介して伝達する必要があります。これにより、関連する配置コンテンツを表示することができます。後で解決される保留中の決定については、イベントAPIまたは他のデータ配信メカニズムを介してこれらの結果をRoktに伝達する必要があります。詳細は、このドキュメントのコンバージョントラッキングセクションで確認できます。

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

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

ステータスメッセージの送信ステータスメッセージの送信 への直接リンク

Roktはあなたの申請フォームの内容にアクセスできないため、申請がRoktに顧客の申請ステータスを伝達することが重要です。

申請フローのライフサイクル中に、Roktは3つのメッセージを受信することを期待しています： 「開始」 「承認」または「保留」 「終了」

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

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

重要
  • セキュリティ上の理由から、各postMessageに特定のtargetOriginを提供することをお勧めします。*の使用は避けてください。Roktはあなたのドメインから発信されないメッセージを無視します。
  • セキュリティ上の理由から、Roktはあなたの申請にメッセージを送り返しません。したがって、あなたの申請は「メッセージ」イベントをリッスンしないでください。
  • あなたの申請は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 */);

// After load or as soon your application is ready / interactive
roktIntegration.initiated();

// ,,, user completes your application
// If the application was approved by your system
roktIntegration.approved();
// If the application was denied or it is pending to further analysis
roktIntegration.pending();

// Before terminating the application
roktIntegration.close(); // Close message will close your window for you.

または、以下を実装することもできます：


// After load or as soon your application is ready / interactive
(window.opener || window.parent).postMessage({ type: 'initiated' }, /* your page domain or */ window.location.origin);

// ,,, user completes your application
// If the application was approved by your system
(window.opener || window.parent).postMessage({ type: 'approved' }, /* your page domain or */ window.location.origin);

// If the application was denied or it is pending to further analysis
(window.opener || window.parent).postMessage({ type: 'pending' }, /* your page domain or */ window.location.origin);

// Before terminating the application
(window.opener || window.parent).postMessage({ type: 'close' }, /* your page domain or */ window.location.origin); // Close message will close your window for you.

コンバージョントラッキングコンバージョントラッキング への直接リンク

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

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

保留中の承認保留中の承認 への直接リンク

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

注記

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

この記事は役に立ちましたか？
Last updated Aug 4, 2026