配置を追加
Roktのパートナー向けに、Rokt SDK for React Nativeを使用してアプリのコンテンツの上にオーバーレイ配置を表示できます。
始める前に
Rokt React Native SDKがアプリケーションに統合されていることを確認してください。
オーバーレイ配置
SDKをインポート
アプリケーションのJavaScript/TypeScriptファイルにSDKをインポートします:
import { Rokt } from "@rokt/react-native-sdk";
SDKを実行
適切な顧客属性を追加して、希望するポイントでSDKを実行します。その後、短い遅延の後にRoktの配置が表示されます。この遅延はRoktプラットフォームで設定可能です。
Rokt統合に含める顧客属性を指定することができます。利用可能なデータフィールドの詳細はattributesページで確認できます。さらに多くの属性を統合したい場合は、下記のサンプルに新しい属性ごとに追加のコード行を加えることができます。
メジャーバージョン 3
- JavaScript
- TypeScript
const attributes = {
email: "j.smith@example.com",
firstname: "Jenny",
lastname: "Smith",
mobile: "(323) 867-5309",
postcode: "90210",
country: "US",
};
Rokt.execute("RoktExperience", attributes, {}, () =>
console.log("Placement Loaded")
);
const attributes: Record<string, string> = {
email: "j.smith@example.com",
firstname: "Jenny",
lastname: "Smith",
mobile: "(323) 867-5309",
postcode: "90210",
country: "US",
};
Rokt.execute("RoktExperience", attributes, {}, () =>
console.log("Placement Loaded");
);
メジャーバージョン 4
- JavaScript
- TypeScript
const attributes = {
email: "j.smith@example.com",
firstname: "Jenny",
lastname: "Smith",
mobile: "(323) 867-5309",
postcode: "90210",
country: "US",
};
Rokt.execute("RoktExperience", attributes, {});
const attributes: Record<string, string> = {
email: "j.smith@example.com",
firstname: "Jenny",
lastname: "Smith",
mobile: "(323) 867-5309",
postcode: "90210",
country: "US",
};
Rokt.execute("RoktExperience", attributes, {});
ViewName
(“RoktExperience”) は、アプリ内で SDK が実行されるコンテキストに応じて異なる体験を表示するために、複数の場所で SDK を実行する際に変更できます。ViewName を変更する場合は、Rokt システム内で一致する調整が行われるよう Rokt チームと協力してください。
埋め込み配置
SDKのインポート
JavaScript/TypeScriptファイルにRokt SDKをインポートします:
import { Rokt, RoktEmbeddedView } from "@rokt/react-native-sdk";
プレースホルダー参照を作成
コンポーネント内でプレースホルダー参照を作成します:
- JavaScript
- TypeScript
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.placeholder1 = React.createRef();
...
}
}
class MyComponent extends React.Component<MyProps, MyState> {
constructor(props: MyProps) {
super(props);
this.placeholder1 = React.createRef();
...
}
}
ビューにRoktEmbeddedViewを追加する
コンポーネントの返されるJSXにRoktEmbeddedView
を追加します。execute
メソッドが呼び出されると、Roktの埋め込みプレースメントがこのプレースホルダーに注入されます:
<RoktEmbeddedView
ref={this.placeholder1}
placeholderName={"RoktEmbedded1"}
></RoktEmbeddedView>
Rokt React Native SDKを実行する
適切な顧客属性を送信して、望ましいポイントでSDKを実行します。その後、RoktプレースメントはRoktプラットフォームを通じて設定可能な短い遅延の後に表示されます。
Roktの統合に含める顧客属性を指定できます。利用可能なデータフィールドの詳細は、attributesページをご覧ください。より多くの属性を統合したい場合は、以下のサンプルコードに新しい属性ごとに追加のコード行を追加することができます。
メジャーバージョン3
- JavaScript
- TypeScript
const placeholders = {
RoktEmbedded1: findNodeHandle(this.placeholder1.current),
};
const attributes = {
email: "j.smith@example.com",
firstname: "Jenny",
lastname: "Smith",
mobile: "(323) 867-5309",
postcode: "90210",
country: "US",
};
Rokt.execute("RoktEmbeddedExperience", attributes, placeholders, () =>
console.log("Placement Loaded")
);
const placeholders: Record<string, number | null> = {
RoktEmbedded1: findNodeHandle(this.placeholder1.current),
};
const attributes: Record<string, string> = {
email: "j.smith@example.com",
firstname: "Jenny",
lastname: "Smith",
mobile: "(323) 867-5309",
postcode: "90210",
country: "US",
};
Rokt.execute("RoktEmbeddedExperience", attributes, placeholders, () =>
console.log("Placement Loaded");
);
メジャーバージョン 4
- JavaScript
- TypeScript
const placeholders = {
RoktEmbedded1: findNodeHandle(this.placeholder1.current),
};
const attributes = {
email: "j.smith@example.com",
firstname: "Jenny",
lastname: "Smith",
mobile: "(323) 867-5309",
postcode: "90210",
country: "US",
};
Rokt.execute("RoktEmbeddedExperience", attributes, placeholders);
const placeholders: Record<string, number | null> = {
RoktEmbedded1: findNodeHandle(this.placeholder1.current),
};
const attributes: Record<string, string> = {
email: "j.smith@example.com",
firstname: "Jenny",
lastname: "Smith",
mobile: "(323) 867-5309",
postcode: "90210",
country: "US",
};
Rokt.execute("RoktEmbeddedExperience", attributes, placeholders);
ViewName
(“RoktEmbeddedExperience”)は、複数の場所でSDKを実行する際に変更することができます。この設定により、アプリ内でSDKが実行される文脈に応じて異なるエクスペリエンスを表示することができます。ViewName
を変更する場合は、Roktチームと連携してRoktシステム内での調整を確実に行うようにしてください。
コールバック
React Native SDK のメジャーバージョン 3 では、execute
メソッドに渡される単一の onLoad
コールバックをサポートしています。メジャーバージョン 4 からは、React Native SDK はすべてのネイティブ Rokt SDK コールバックをサポートしています。これらのコールバックは、NativeEventEmitter
を使用してコンポーネントで受け取ることができます。以下に、メジャーバージョン 4 の SDK でこれらのコールバックを利用する方法について説明します。
必要なイベントモジュールをインポートする
アプリケーションの JavaScript/TypeScript ファイルに SDK をインポートします:
import { RoktEventManager } from '@rokt/react-native-sdk';
import { NativeEventEmitter } from 'react-native';
NativeEventEmitter を作成する
nativeModule
として RoktEventManager
を使用して NativeEventEmitter
を作成します:
const eventManagerEmitter = new NativeEventEmitter(RoktEventManager);
クラスコンポーネントを使用している場合は、クラスの外側でこれを作成することができます。
「RoktEvents」エミッタへのリスナーを追加する
バージョン 4.3.0
以降、「RoktEvents」チャンネルにサブスクライブしてSDKからのすべてのイベントを受け取ることができます。
eventType
を「RoktEvents」としてエミッタにリスナーを追加し、コールバックタイプに応じてアクションを実行します:
eventManagerEmitter.addListener('RoktEvents', (data) => {
switch (data.event) {
case 'ShowLoadingIndicator':
console.log(`Event ${data.viewName}`);
break;
case 'HideLoadingIndicator':
console.log(`Event ${data.viewName}`);
break;
case 'OfferEngagement':
console.log(`Event ${data.viewName} ${data.placementId}`);
break;
case 'PositiveEngagement':
console.log(`Event ${data.viewName} ${data.placementId}`);
break;
case 'FirstPositiveEngagement':
console.log(`Event ${data.viewName} ${data.placementId}`);
break;
case 'PositiveEngagement':
console.log(`Event ${data.viewName} ${data.placementId}`);
break;
case 'PlacementInteractive':
console.log(`Event ${data.viewName} ${data.placementId}`);
break;
case 'PlacementReady':
console.log(`Event ${data.viewName} ${data.placementId}`);
break;
case 'PlacementClosed':
console.log(`Event ${data.viewName} ${data.placementId}`);
break;
case 'PlacementCompleted':
console.log(`Event ${data.viewName} ${data.placementId}`);
break;
case 'PlacementFailure':
console.log(`Event ${data.viewName} ${data.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 (オプション) |
"RoktCallback" エミッターにリスナーを追加する
"RoktCallback" の eventType
を持つエミッターにリスナーを追加し、コールバックのタイプに応じてアクションを実行します:
eventManagerEmitter.addListener(
"RoktCallback",
(event) => {
switch (event.callbackValue) {
case "onLoad":
// onLoad
case "onUnLoad":
// onUnLoad
case "onShouldShowLoadingIndicator":
// onShouldShowLoadingIndicator
case "onShouldHideLoadingIndicator":
// onShouldHideLoadingIndicator
default:
// default
}
}
)
クラスコンポーネントを使用している場合、componentDidMount
でリスナーを追加し、componentWillUnmount
でリスナーを削除します:
eventManagerEmitter.removeAllListeners("RoktCallback");`
コールバックタイプ
onLoad
onLoad
コールバックは、プレースメントがロードされてインタラクティブになったときに呼び出されます。
onShouldShowLoadingIndicator
onShouldShowLoadingIndicator
は、SDKがRoktバックエンドに対して呼び出しをトリガーする直前に、成功した実行呼び出しで呼び出されます。これは、プレースメントの読み込みを待つ間に、読み込みインジケーターの進行状況ビューを表示するために使用できます。
onShouldHideLoadingIndicator
onShouldHideLoadingIndicator
コールバックは、SDKがRoktバックエンドから成功または失敗のレスポンスを取得した時に呼び出されます。これは、進行状況ビューまたは読み込みインジケーターをキャンセルするために使用できます。
onUnLoad
onUnLoad
コールバックは、SDKがプレースメントを閉じるときに呼び出されます。実行呼び出しが失敗した場合にもトリガーされます。