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

プレースメントを追加

Roktパートナー向けに、Rokt SDK for React Nativeを使用してアプリのコンテンツの上にオーバーレイプレースメントを表示できます。

始める前に​

Rokt React Native SDKが統合されていることを確認してください。

オーバーレイプレースメント​

SDKのインポート​

SDKをアプリケーションのJavaScript/TypeScriptファイルにインポートします:

import { Rokt } from "@rokt/react-native-sdk";

SDKの実行​

適切なカスタマー属性を追加することで、希望するタイミングでSDKを実行します。Roktプレースメントは、Roktプラットフォームで設定できる短い遅延の後に表示されます。

Rokt統合に含まれるカスタマー属性を指定できます。利用可能なデータフィールドの詳細については、attributesページをご覧ください。追加の属性を統合したい場合は、以下のサンプルに新しい属性ごとに追加のコード行を加えることができます。

メジャーバージョン 3​

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")
);

メジャーバージョン 4​

const attributes = {
  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のインポート​

Rokt SDKをJavaScript/TypeScriptファイルにインポートします:

import { Rokt, RoktEmbeddedView } from "@rokt/react-native-sdk";

プレースホルダー参照を作成​

コンポーネント内にプレースホルダー参照を作成します:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.placeholder1 = React.createRef();
    ...
  }
}

RoktEmbeddedViewをあなたのビューに追加​

RoktEmbeddedViewをコンポーネントの返されるJSXに追加します。executeメソッドが呼び出されると、Roktの埋め込み配置がこのプレースホルダーに挿入されます:

<RoktEmbeddedView
  ref={this.placeholder1}
  placeholderName={"RoktEmbedded1"}
></RoktEmbeddedView>

Rokt React Native SDKを実行​

適切な顧客属性を送信して、希望するポイントでSDKを実行します。Roktの配置は、Roktプラットフォームを通じて設定可能な短い遅延の後に表示されます。

Rokt統合に含まれる顧客属性を指定できます。利用可能なデータフィールドに関する詳細はattributesページにあります。追加の属性を統合したい場合は、下記のサンプルに各新しい属性のための追加のコード行を加えることができます。

メジャーバージョン 3​

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")
);

メジャーバージョン 4​

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);
注記

ViewName（“RoktEmbeddedExperience”）は、SDKを複数の場所で実行する際に変更できます。この設定により、SDKがアプリ内のどのコンテキストで実行されているかに応じて、異なる体験を表示できます。ViewNameを変更する場合は、Roktチームと連携して、Roktシステム内で適切な調整が行われるようにしてください。

コールバック​

React Native SDKのメジャーバージョン3は、executeメソッドに渡される単一のonLoadコールバックをサポートしています。メジャーバージョン4から、React Native SDKはすべてのネイティブRokt SDKコールバックをサポートしています。これらのコールバックは、NativeEventEmitterを使用することでコンポーネントで受け取ることができます。以下では、SDKのメジャーバージョン4でこれらのコールバックを利用する方法を説明します。

必要なイベントモジュールをインポートする​

SDKをアプリケーションのJavaScript/TypeScriptファイルにインポートします:

import { RoktEventManager } from '@rokt/react-native-sdk';
import { NativeEventEmitter } from 'react-native';

NativeEventEmitterを作成する​

RoktEventManagerをnativeModuleとして使用して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(`イベント ${data.viewName}`);
      break;
    case 'HideLoadingIndicator':
      console.log(`イベント ${data.viewName}`);
      break;
    case 'OfferEngagement':
      console.log(`イベント ${data.viewName} ${data.placementId}`);
      break;
    case 'PositiveEngagement':
      console.log(`イベント ${data.viewName} ${data.placementId}`);
      break;
    case 'FirstPositiveEngagement':
      console.log(`イベント ${data.viewName} ${data.placementId}`);
      break;
    case 'PositiveEngagement':
      console.log(`イベント ${data.viewName} ${data.placementId}`);
      break;
    case 'PlacementInteractive':
      console.log(`イベント ${data.viewName} ${data.placementId}`);
      break;
    case 'PlacementReady':
      console.log(`イベント ${data.viewName} ${data.placementId}`);
      break;
    case 'PlacementClosed':
      console.log(`イベント ${data.viewName} ${data.placementId}`);
      break;
    case 'PlacementCompleted':
      console.log(`イベント ${data.viewName} ${data.placementId}`);
      break;
    case 'PlacementFailure':
      console.log(`イベント ${data.viewName} ${data.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)

"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が配置を閉じるときに呼び出されます。実行呼び出しが失敗した場合にもトリガーされます。

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