プレースメントを追加
Flutter用のRokt SDKを使用して、アプリのコンテンツの上にオーバーレイプレースメントを表示することができます。
始める前に
Rokt Flutter SDKがすでにアプリケーションに統合されていることを確認してください。
オーバーレイプレースメント
SDKをインポートする
アプリケーションのdartファイルにSDKをインポートします：
import 'package:rokt_sdk/rokt_sdk.dart';
SDKを実行する
適切な顧客属性を追加することで、望ましいポイントでSDKを実行します。Roktプレースメントは、Roktプラットフォームを通じて設定可能な短い遅延の後に表示されます。
Rokt統合に含む顧客属性を指定できます。利用可能なデータフィールドに関する詳細は、attributesページで確認できます。より多くの属性を統合したい場合、新しい属性ごとにサンプルに追加するコード行を追加してください。
void executeRokt() {
// RoktExperienceをviewNameで置き換える
RoktSdk.execute(
viewName: "RoktExperience",
attributes: {"email": "j.smith@example.com",
"firstname": "Jenny",
"lastname": "Smith",
"mobile": "(555)867-5309",
"postcode": "90210",
"country": "US"},
onLoad: () {
// Roktプレースメントがロードされたときのオプションのコールバック
},
onUnLoad: () {
// Roktプレースメントがアンロードされたときのオプションのコールバック
},
onShouldShowLoadingIndicator: () {
// ローディングインジケータを表示するためのオプションのコールバック
},
onShouldHideLoadingIndicator: () {
// ローディングインジケータを隠すためのオプションのコールバック
});
}
SDKを複数の場所で実行するときにViewName（"RoktExperience"）を変更して、アプリ内でSDKが実行されている場所のコンテキストに応じた異なる体験を表示できます。ViewNameを変更する場合、Roktシステム内での対応する調整が行われるようにRoktチームと協力してください。
埋め込み配置
SDKをインポート
JavaScriptファイルにRokt SDKをインポートします:
import 'package:rokt_sdk/rokt_sdk.dart';
RoktWidgetをビューに追加
ビューのbuild関数にRoktWidgetを追加します。executeメソッドが呼び出されると、このプレースホルダーにRoktウィジェットが挿入されます:
const RoktWidget(placeholderName: "RoktEmbedded1")
ビューが画面の見えるエリアに作成され、その後showWidgetを呼び出すことを確認してください。
RoktWidgetにはウィジェットが作成されたことを通知するコールバックがあります。これを利用することができます。
RoktWidget(placeholderName: "RoktEmbedded1", onWidgetCreated: () { showWidget() })
Rokt Flutter SDKを実行
適切な顧客属性を送信して、望ましいポイントでSDKを実行します。その後、Rokt配置が短い遅延の後に表示されます。この遅延はRoktプラットフォームを介して設定可能です。
Rokt統合に含める顧客属性を決定することができます。利用可能なデータフィールドについての詳細は、attributesページを参照してください。より多くの属性を統合したい場合、以下のサンプルに新しい属性ごとに追加のコード行を追加できます。
void executeRokt() {
// RoktExperienceをviewNameに置き換える
RoktSdk.execute(
viewName: "RoktEmbeddedExperience",
attributes: {"email": "j.smith@example.com",
"firstname": "Jenny",
"lastname": "Smith",
"mobile": "(555)867-5309",
"postcode": "90210",
"country": "US"},
onLoad: () {
// Rokt配置がロードされた時のオプションのコールバック
},
onUnLoad: () {
// Rokt配置がアンロードされた時のオプションのコールバック
},
onShouldShowLoadingIndicator: () {
// ローディングインジケーターを表示するためのオプションのコールバック
},
onShouldHideLoadingIndicator: () {
// ローディングインジケーターを非表示にするためのオプションのコールバック
});
}
ViewName（「RoktEmbeddedExperience」）は、SDKを複数の場所で実行する際に変更できます。この設定により、アプリ内でSDKが実行されている場所に応じて異なる体験を表示できます。ViewNameやplaceholderName（「RoktEmbedded1」）を変更する場合、Roktシステム内で対応する調整が行われるよう、Roktチームと連携してください。
イベント
バージョン 4.3.0 から、Rokt SDKはSDKイベントのためにEventChannelを公開しています。
final EventChannel roktEventChannel = EventChannel('RoktEvents');
//...
roktEventChannel.receiveBroadcastStream().listen((dynamic event) {
debugPrint("Rokt event received $event");
switch (event["event"]) {
case "ShowLoadingIndicator":
debugPrint("Event ${event["viewName"]}");
break;
case "HideLoadingIndicator":
debugPrint("Event ${event["viewName"]}");
break;
case "OfferEngagement":
debugPrint("Event ${event["viewName"]}, ${event["placementId"]}");
break;
case "PositiveEngagement":
debugPrint("Event ${event["viewName"]}, ${event["placementId"]}");
break;
case "FirstPositiveEngagement":
debugPrint("Event ${event["viewName"]}, ${event["placementId"]}");
break;
case "PlacementInteractive":
debugPrint("Event ${event["viewName"]}, ${event["placementId"]}");
break;
case "PlacementReady":
debugPrint("Event ${event["viewName"]}, ${event["placementId"]}");
break;
case "PlacementClosed":
debugPrint("Event ${event["viewName"]}, ${event["placementId"]}");
break;
case "PlacementCompleted":
debugPrint("Event ${event["viewName"]}, ${event["placementId"]}");
break;
case "PlacementFailure":
debugPrint("Event ${event["viewName"]}, ${event["placementId"]}");
break;
default:
break;
}
});
イベントオブジェクト
| イベント | 説明 | その他のプロパティ |
|---|---|---|
| ShowLoadingIndicator | SDKがRoktバックエンドを呼び出す前にトリガーされる | viewName: String |
| HideLoadingIndicator | SDKがRoktバックエンドからの成功または失敗を受信したときにトリガーされる | viewName: String |
| OfferEngagement | ユーザーがオファーに関与したときにトリガーされる | viewName: String, placementId: String |
| PositiveEngagement | ユーザーがオファーに積極的に関与したときにトリガーされる | viewName: String, placementId: String |
| FirstPositiveEngagement | ユーザーが初めてオファーに積極的に関与したときにトリガーされる | viewName: String, placementId: String |
| PlacementInteractive | プレースメントがレンダリングされ、操作可能になったときにトリガーされる | viewName: String, placementId: String |
| PlacementReady | プレースメントが表示の準備ができているが、まだコンテンツがレンダリングされていないときにトリガーされる | viewName: String, placementId: String |
| PlacementClosed | プレースメントがユーザーによって閉じられたときにトリガーされる | viewName: String, placementId: String |
| PlacementCompleted | オファーの進行が終了し、表示するオファーがなくなったとき、またはキャッシュがヒットして以前に却下されたプレースメントが表示されないときにトリガーされる | viewName: String, placementId: String |
| PlacementFailure | 一部の失敗によりプレースメントを表示できなかったときにトリガーされる | viewName: String, placementId: String (optional) |
コールバック
Rokt Flutter SDKは、executeに渡される以下のコールバックをサポートしています:
onLoad
onLoadコールバックは、プレースメントが読み込まれ、インタラクティブになったときに呼び出されます。このコールバックは引数を提供せず、値も返しません。
onShouldShowLoadingIndicator
onShouldShowLoadingIndicatorは、executeの呼び出しが成功した直後に、Roktバックエンドへの呼び出しがトリガーされる直前に呼び出されます。これは、プレースメントの読み込みを待つ間のインジケーターの進行状況ビューを表示するために使用できます。引数は必要なく、値も返しません。
このコールバックの動作は、Rokt Flutter SDKのメジャーバージョン3からメジャーバージョン4の間で変更されました。コールバックが実行される前に1秒の遅延はなくなりました。もしメジャーバージョン3でこれらのコールバックを利用していて、メジャーバージョン4にアップグレードする場合は、ユーザー エクスペリエンスに影響がないかを確認するために動作をテストしてください。必要に応じて、アプリケーションのニーズに合った遅延動作を作成できます。
onShouldHideLoadingIndicator
onShouldHideLoadingIndicator コールバックは、SDK が Rokt バックエンドからの成功または失敗の応答を受け取ったときに呼び出されます。これを使用して、進行状況ビューやロードインジケーターをキャンセルすることができます。引数を必要とせず、値を返しません。
onUnload
onUnload コールバックは、SDK がプレースメントを閉じるときに呼び出されます。また、実行呼び出しが失敗した場合にもトリガーされます。引数を必要とせず、値を返しません。