プレースメントを追加
始める前に
アプリケーションに Rokt iOS SDK が既に統合されていることを確認してください。その手順はこちらに記載されています。
オーバーレイプレースメント
Rokt iOS SDK を希望するViewController
で実行し、すべての適切な顧客属性を追加します。以下のサンプルコードでは、ViewDidLoad
を使用して Rokt のオーバーレイプレースメントを表示しています。
SDK は、ビューがロードおよびアンロードされたときのオプションのコールバックイベントを提供します。
- Swift
- Objective-C
- 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は、ビューのロード時とアンロード時にオプションのコールバックイベントを提供します。
- Swift
- Objective-C
- 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
コンポーネントは、埋め込みレイアウトとオーバーレイレイアウトの両方に使用できます。