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

配置を追加

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​

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のインポート​

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

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 を使用してコンポーネントで受け取ることができます。以下に、メジャーバージョン 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;
  }
});

イベントオブジェクト​

イベント説明その他のプロパティ
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 (オプション)

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

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