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

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

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

始める前に始める前に への直接リンク

Rokt React Native SDKがアプリケーションに統合されていることを確認してください。

オーバーレイプレースメントオーバーレイプレースメント への直接リンク

SDKをインポートするSDKをインポートする への直接リンク

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

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

SDKを実行するSDKを実行する への直接リンク

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

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

メジャーバージョン 3メジャーバージョン 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メジャーバージョン 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 のインポート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 に RoktEmbeddedView を追加します。execute メソッドが呼び出されると、このプレースホルダーに Rokt の埋め込みプレースメントが挿入されます:

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

Rokt React Native SDK を実行するRokt React Native SDK を実行する への直接リンク

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

Rokt 統合に含める顧客属性を指定できます。利用可能なデータフィールドの詳細は、attributes ページで確認できます。より多くの属性を統合したい場合は、以下のサンプルに新しい属性ごとに追加のコード行を追加できます。

メジャーバージョン 3メジャーバージョン 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メジャーバージョン 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 を作成するNativeEventEmitter を作成する への直接リンク

RoktEventManager を nativeModule として NativeEventEmitter を作成します：

const eventManagerEmitter = new NativeEventEmitter(RoktEventManager);

クラスコンポーネントを使用している場合は、クラスの外部でこれを作成することができます。

"RoktEvents" エミッターにリスナーを追加する"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" エミッターにリスナーを追加する"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");`

コールバックの種類コールバックの種類 への直接リンク

onLoadonLoad への直接リンク

onLoad コールバックは、プレースメントがロードされ、インタラクティブになったときに呼び出されます。

onShouldShowLoadingIndicatoronShouldShowLoadingIndicator への直接リンク

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

onShouldHideLoadingIndicatoronShouldHideLoadingIndicator への直接リンク

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

onUnLoadonUnLoad への直接リンク

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

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