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

プレースメントを追加する (レガシー)

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 をビューに追加する​

コンポーネントの返される JSX に RoktEmbeddedView を追加します。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(`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;
    case 'OpenUrl':
      console.log(`Event ${data.viewName} ${data.placementId} ${data.url}`);
    default:
      // 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)
OpenUrlユーザーがパートナーアプリに送信するように設定されたURLを押したときにトリガーされますviewName: String, placementId: String, url: String

"RoktCallback" エミッターにリスナーを追加する​

eventType が "RoktCallback" のエミッターにリスナーを追加し、コールバックの種類に応じてアクションを実行します:

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 バックエンドへの呼び出しをトリガーする直前に、execute 呼び出しが成功した際に呼び出されます。これは、プレースメントの読み込みを待っている間に、ローディングインジケーターの進行ビューを表示するために使用できます。

onShouldHideLoadingIndicator​

onShouldHideLoadingIndicator コールバックは、SDK が Rokt バックエンドから成功または失敗のレスポンスを取得したときに呼び出されます。これは、進行ビューやローディングインジケーターをキャンセルするために使用できます。

onUnLoad​

onUnLoad コールバックは、SDK がプレースメントを閉じるときに呼び出されます。また、execute 呼び出しが失敗した場合にもトリガーされます。

この記事は役に立ちましたか？
Last updated Oct 29, 2025