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

プレースメントを追加

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をインポートする​

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を使用してコンポーネント内で受け取ることができます。以下では、SDKのメジャーバージョン4でこれらのコールバックを利用する方法を説明します。

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

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

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

"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 呼び出しが失敗した場合にもトリガーされます。

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