プレースメントを追加
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
始める前に
アプリケーションに Rokt iOS SDK が既に統合されていることを確認してください。その手順はこちらに記載されています。
オーバーレイプレースメント
Rokt iOS SDK を希望するViewControllerで実行し、すべての適切な顧客属性を追加します。以下のサンプルコードでは、ViewDidLoadを使用して Rokt のオーバーレイプレースメントを表示しています。
SDK は、ビューがロードおよびアンロードされたときのオプションのコールバックイベントを提供します。
<Tabs className="unique-tabs" defaultValue="Swift" values={[ {label: 'Swift', value: 'Swift'}, {label: 'Objective-C', value: 'Objective-C'}, {label: 'SwiftUI', value: 'SwiftUI'}, ]}>
import Rokt_Widget
class OrderConfirmationViewController: UIViewController {
// プレースメントを表示する必要があるときにこの関数を呼び出します
func showWidget() {
let attributes = ["email": "j.smith@example.com",
"firstname": "Jenny",
"lastname": "Smith",
"mobile": "(555)867-5309",
"postcode": "90210",
"country": "US"]
Rokt.execute(viewName: "RoktExperience", attributes: attributes, onLoad: {
// オプション: Rokt のプレースメントがロードされたときのコールバック
}, onUnLoad: {
// オプション: Rokt のプレースメントがアンロードされたときのコールバック
}, onShouldShowLoadingIndicator: {
// オプション: ローディングインジケータを表示するためのコールバック
}, onShouldHideLoadingIndicator: {
// オプション: ローディングインジケータを隠すためのコールバック
})
}
}
#import <Rokt_Widget/Rokt_Widget-Swift.h>
// 配置を表示する必要があるときにこの関数を呼び出します
- (void)showWidget {
NSDictionary *attributes = @{
@"email" : @"j.smith@example.com",
@"firstname": @"Jenny",
@"lastname": @"Smith",
@"mobile": @"(555)867-5309",
@"postcode": @"90210",
@"country": @"US"
};
[Rokt executeWithViewName:@"RoktExperience"
attributes:attributes
placements:nil
onLoad:^{
// Rokt 配置が読み込まれたときのオプションのコールバック
} onUnLoad:^{
// Rokt 配置がアンロードされたときのオプションのコールバック
} onShouldShowLoadingIndicator:^{
// ローディングインジケーターを表示するためのオプションのコールバック
} onShouldHideLoadingIndicator:^{
// ローディングインジケーターを隠すためのオプションのコールバック
} onEmbeddedSizeChange:^(NSString *selectedPlacement, CGFloat widgetHeight) {
// フルスクリーンオーバーレイには必要ありません
}];
}
import SwiftUI
import Rokt_Widget
class OrderConfirmationViewController: View {
func showPlacement() {
let attributes = ["email": "j.smith@example.com",
"firstname": "Jenny",
"lastname": "Smith",
"mobile": "(555)867-5309",
"postcode": "90210",
"country": "US"]
Rokt.execute(viewName: "RoktExperience",
attributes: attributes,
onLoad: {
// Rokt 配置が読み込まれたときのオプションのコールバック
}, onUnLoad: {
// Rokt 配置がアンロードされたときのオプションのコールバック
}, onShouldShowLoadingIndicator: {
// ローディングインジケーターを表示するためのオプションのコールバック
}, onShouldHideLoadingIndicator: {
// ローディングインジケーターを隠すためのオプションのコールバック
})
}
}
オプション機能
| 関数 | 目的 |
|---|---|
Rokt.close() | オーバーレイプレースメントを自動的に閉じるために使用されます。 |
埋め込みプレースメント
ストーリーボードを修正する
SwiftUIを使用している場合は、以下のSwiftUIテーブルの指示を参照してください。SwiftUIを使用していない場合は、以下の指示を使用してください。
ストーリーボードにビューを追加し、それをViewControllerに配置します：
customクラスで、ビューのクラスとしてRoktEmbeddedViewを設定します。次に、埋め込みプレースメントが表示される場所に一致するように、上、先頭、および末尾の制約を定義します。高さに関しては、高さの制約をゼロにすることをお勧めします。
RoktEmbeddedViewは、プレースメントの内容に応じて自分の高さのみを変更できます。高さが変更されたときに通知し、新しい高さを返すexecuteメソッドにコールバックがあります。
以下の画像は、オートレイアウトを使用してRoktEmbeddedViewを定義する最も簡単な方法を示しています。
-
ビューのClassとしてRoktEmbeddedViewを、ModuleとしてRokt_Widgetを配置します。
-
上部の制約を定義します。
-
先頭の制約を定義します。
-
末尾の制約を定義します。
-
高さと幅の制約を選択します。
-
高さの制約を設定します。
-
ビューに制約を追加します。
RoktEmbeddedViewはコード内で作成し、レイアウトに動的に含めることもできます。
Rokt SDKを実行する
お好みのViewControllerでiOS向けのRokt SDKを実行し、すべての適切なカスタマー属性を追加します。以下のコード例では、ViewDidLoadを使用してプレースメントを起動しています。
SDKは、ビューのロード時とアンロード時にオプションのコールバックイベントを提供します。
<Tabs className="unique-tabs" defaultValue="Swift" values={[ {label: 'Swift', value: 'Swift'}, {label: 'Objective-C', value: 'Objective-C'}, {label: 'SwiftUI', value: 'SwiftUI'}, ]}>
import Rokt_Widget
class OrderConfirmationViewController: UIViewController {
// ステップ5で作成されたRoktEmbeddedViewにリンクするか、プログラムで作成
@IBOutlet weak var roktEmbeddedView: RoktEmbeddedView!
...
// プレースメントを表示する必要があるときにこの関数を呼び出す
func showWidget() {
let attributes = ["email": "j.smith@example.com",
"firstname": "Jenny",
"lastname": "Smith",
"mobile": "(555)867-5309",
"postcode": "90210",
"country": "US"]
let placements: [String : RoktEmbeddedView] = ["RoktEmbedded1": roktEmbeddedView]
Rokt.execute(viewName: "RoktEmbeddedExperience", attributes: attributes, placements: placements, onLoad: {
// Roktプレースメントがロードされたときのオプションのコールバック
}, onUnLoad: {
// Roktプレースメントがアンロードされたときのオプションのコールバック
}, onShouldShowLoadingIndicator: {
// ローディングインジケーターを表示するためのオプションのコールバック
}, onShouldHideLoadingIndicator: {
// ローディングインジケーターを非表示にするためのオプションのコールバック
}, onEmbeddedSizeChange: { selectedPlacement, widgetHeight in
// プレースメントの高さが変更されるたびにselectedPlacementとプレースメントに必要な高さを取得するためのオプションのコールバック
})
}
}
#import <Rokt_Widget/Rokt_Widget-Swift.h>
// 配置を表示する必要があるときにこの関数を呼び出す
- (void)showWidget {
NSDictionary *attributes = @{
@"email" : @"j.smith@example.com",
@"firstname": @"Jenny",
@"lastname": @"Smith",
@"mobile": @"(555)867-5309",
@"postcode": @"90210",
@"country": @"US"
};
// roktEmbeddedView は .h 内で @property (weak, nonatomic) IBOutlet RoktEmbeddedView *roktEmbeddedView; として宣言され、ステップ5で roktEmbeddedView を指しているか、プログラム的に作成されている
NSDictionary<NSString *, RoktEmbeddedView *> *placements= [NSDictionary dictionaryWithObject:self.roktEmbeddedView forKey:@"RoktEmbedded1"];
[Rokt executeWithViewName:@"RoktExperience"
attributes:attributes
placements:placements
onLoad:^{
// Rokt の配置がロードされたときのオプションコールバック
} onUnLoad:^{
// Rokt の配置がアンロードされたときのオプションコールバック
} onShouldShowLoadingIndicator:^{
// ローディングインジケーターを表示する際のオプションコールバック
} onShouldHideLoadingIndicator:^{
// ローディングインジケーターを非表示にする際のオプションコールバック
} onEmbeddedSizeChange:^(NSString *selectedPlacement, CGFloat widgetHeight){
// 配置の高さが変更されるたびに選択された配置と必要な高さを取得するオプションコールバック
}];
}
import Rokt_Widget
import SwiftUI
// UIKit を SwiftUI と接続するための UIViewRepresentable を作成する
struct RoktEmbeddedSwiftUIView: UIViewRepresentable {
typealias UIViewType = RoktEmbeddedView
var embedded: RoktEmbeddedView
init() {
embedded = RoktEmbeddedView()
}
func makeUIView(context: Context) -> RoktEmbeddedView {
return embedded
}
func updateUIView(_ uiView: RoktEmbeddedView, context: Context) {
}
}
struct OrderConfirmationViewController: View {
// Rokt 埋め込みビューを作成
let roktEmbedded1 = RoktEmbeddedSwiftUIView()
@State private var embeddedSize: CGFloat = 0
@State private var placementDisplayed = false
var body: some View {
ScrollView {
VStack(spacing: 0){
// Rokt 埋め込みビューを希望の場所に配置
roktEmbedded1
.frame(height: self.embeddedSize, alignment: .center)
}
}.onAppear {
if !placementDisplayed {
// ビューが表示されるときにプレースメントを表示
showPlacement()
}
}
}
private func showPlacement() {
var placements = [String: RoktEmbeddedView]()
placements["RoktEmbedded1"] = roktEmbedded1.embedded
let attributes = ["email": "j.smith@example.com",
"firstname": "Jenny",
"lastname": "Smith",
"mobile": "(555)867-5309",
"postcode": "90210",
"country": "US"]
Rokt.execute(viewName: "RoktEmbeddedExperience",
attributes: attributes,
placements: placements,
onLoad: {
// Roktプレースメントがロードされたときのオプションのコールバック
self.placementDisplayed = true
}, onUnLoad: {
// Roktプレースメントがアンロードされたときのオプションのコールバック
}, onShouldShowLoadingIndicator: {
// ローディングインジケーターを表示するオプションのコールバック
}, onShouldHideLoadingIndicator: {
// ローディングインジケーターを隠すオプションのコールバック
}, onEmbeddedSizeChange: { selectedPlacement, widgetHeight in
embeddedSize = widgetHeight
})
}
}
ビュー名 RoktExperience またはプレースメント名 RoktEmbedded1 を異なる値に更新するには、Rokt アカウント マネージャーに連絡して、Roktプレースメントが一貫して構成されるようにしてください。
SwiftUI コンポーネント
Rokt iOS SDK のメジャーバージョン 4 から、RoktLayout コンポーネントを利用して Rokt レイアウトを追加できます。これにより Rokt.execute を呼び出す必要がなくなり、SwiftUI を使用したよりモダンな宣言的統合がサポートされます。
コンポーネントの追加
import SwiftUI
import Rokt_Widget
struct OrderConfirmationSwiftUI: View {
let attributes: [String: String]
let pageIdentifier: String
let location: String
@State var sdkTriggered = true
var body: some View {
VStack(alignment: .leading) {
RoktLayout(sdkTriggered: $sdkTriggered,
viewName: pageIdentifier,
locationName: location, // 埋め込みレイアウトを使用している場合
attributes: attributes,
onLoad: {
// Rokt プレースメントがロードされるときのオプションのコールバック
}, onUnLoad: {
// Rokt プレースメントがアンロードされるときのオプションのコールバック
},onShouldShowLoadingIndicator: {
// ローディングインジケーターを表示するオプションのコールバック
}, onShouldHideLoadingIndicator: {
// ローディングインジケーターを隠すオプションのコールバック
})
}.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
}
}
RoktLayout コンポーネントは、埋め込みレイアウトとオーバーレイレイアウトの両方に使用できます。
イベント
SDKは、各ページ上でのイベントをRokt.events APIを通じて提供します。
Rokt.events(viewName: "viewName") { roktEvent in
print("Roktイベントを受信しました \(roktEvent)")
}
イベントオブジェクト
| イベント | 説明 | パラメータ |
|---|---|---|
| ShowLoadingIndicator | SDKがRoktのバックエンドを呼び出す前にトリガーされます | |
| HideLoadingIndicator | SDKがRoktのバックエンドから成功または失敗を受信したときにトリガーされます | |
| OfferEngagement | ユーザーがオファーに関与したときにトリガーされます | placementId: String |
| PositiveEngagement | ユーザーがオファーに肯定的に関与したときにトリガーされます | placementId: String |
| FirstPositiveEngagement | ユーザーが初めてオファーに肯定的に関与したときにトリガーされます | placementId: String, setFulfillmentAttributes: func (attributes: [String: String]) |
| PlacementInteractive | プレースメントがレンダリングされ、ユーザーが操作可能になったときにトリガーされます | placementId: String |
| PlacementReady | プレースメントがディスプレイの準備ができているがコンテンツがまだレンダリングされていないときにトリガーされます | placementId: String |
| PlacementClosed | ユーザーによってプレースメントがクローズされたときにトリガーされます | placementId: String |
| PlacementCompleted | オファーの進行が終了し、表示するオファーがなくなったときにトリガーされます。 また、キャッシュがヒットしたが、以前に閉じられたため取得されたプレースメントが表示されない場合にもトリガーされます | placementId: String |
| PlacementFailure | 何らかの障害によりプレースメントが表示されなかったときにトリガーされます | placementId: String (optional) |
コールバック
Rokt iOS SDK は、execute に渡される以下のコールバックをサポートしています：
onLoad
onLoad コールバックは、プレースメントがロードされインタラクティブになったときに呼び出されます。このコールバックには引数がなく、返り値もありません。
onShouldShowLoadingIndicator
onShouldShowLoadingIndicator コールバックは、execute 呼び出しが成功した直後、SDK が Rokt のバックエンドへの呼び出しをトリガーする前に呼び出されます。これにより、プレースメントがロードされるのを待つ間に、ロードインジケーターの進行ビューを表示することができます。このコールバックには引数が不要で、返り値もありません。
このコールバックの動作は、Rokt iOS SDK のメジャーバージョン 3 からメジャーバージョン 4 の間で変更されています。コールバックが実行される前に 1 秒の遅延がなくなりました。メジャーバージョン 3 でこれらのコールバックを使用している場合は、メジャーバージョン 4 にアップグレードした際、ユーザーエクスペリエンスに影響がないか確認するために動作をテストしてください。必要であれば、アプリケーションのニーズに合った遅延動作を作成することができます。
onShouldHideLoadingIndicator
onShouldHideLoadingIndicator コールバックは、SDK が Rokt バックエンドからの成功または失敗の応答を取得したときに呼び出されます。進捗ビューや読み込みインジケーターをキャンセルするために使用できます。引数は必要なく、値を返しません。
onUnload
onUnload コールバックは、SDK がプレースメントを閉じたときに呼び出されます。また、execute 呼び出しが失敗した場合にもトリガーされます。引数は必要なく、値を返しません。
onEmbeddedSizeChange
onEmbeddedSizeChange は、選択された埋め込みプレースメントまたはレイアウトの高さが変更されたときに呼び出されます。選択されたプレースメント/レイアウトと新しい高さに対する引数が含まれていますが、値を返しません。