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

プレースメントを追加

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が実行されている場所に応じて異なる体験を表示できます。ViewNameplaceholderName(「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;
}
});

イベントオブジェクト

イベント説明その他のプロパティ
ShowLoadingIndicatorSDKがRoktバックエンドを呼び出す前にトリガーされるviewName: String
HideLoadingIndicatorSDKが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 がプレースメントを閉じるときに呼び出されます。また、実行呼び出しが失敗した場合にもトリガーされます。引数を必要とせず、値を返しません。

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