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

React Native SDK+ 統合ガイド

Platform
Target
Language

このページでは、Rokt Ecommerce React Native SDK+ の実装方法について説明します。SDK+ は、設定された画面でユーザーおよびトランザクションデータを Rokt に渡し、Rokt が確認画面でのオファーなどの関連するエクスペリエンスを表示できるようにします。

上記の Target および Language セレクターを使用して、デプロイメントプラットフォームと、従いたいネイティブコードの例を選択します。

注記

SDK+を初期化する際に、ステップ2でネイティブコードを数行書きます。他のステップはすべて、react-native-mparticleパッケージを通じてJavaScriptを使用します。

1. Add the Rokt SDK+ to Your React Native App#

1Install the React Native package#

React Native SDK+をアプリケーションの依存関係として追加します:

Install the React Native package
npm install react-native-mparticle --save

2Import the package into your app#

パッケージをReact Nativeアプリコードにインポートし、SDKのインスタンスを取得します:

Import the React Native package
import MParticle from 'react-native-mparticle';

ネイティブプロジェクトでSDK+の設定を続行します。Targetピルを使用して、iOSとAndroidを切り替えます。

上記のNPMインストールステップは、ReactフレームワークとコアiOSフレームワークを自動的に取り込みます。Rokt SDK+ for iOSは、ios/Podfileにポッド依存関係として追加されます。

3Add the Rokt SDK pod to your Podfile#

Rokt SDK+ポッドをios/Podfileに追加します:

ios/Podfile
pod 'RoktSDKPlus', '~> 9.2'

RoktのiOS SDKにはSwiftコードが含まれているため、React Nativeのデフォルトの静的リンクをpre_install例外で保持するか、プロジェクトをフレームワークに切り替える必要があります。プロジェクトに合ったパスを選択してください:

Linkage

4Configure your Podfile#

次のpre_installブロックをios/Podfileに追加します:

ios/Podfile (pre_install block)
pre_install do |installer|
installer.pod_targets.each do |pod|
  if pod.name == 'RoktSDKPlus' || pod.name == 'mParticle-Apple-SDK' || pod.name == 'mParticle-Rokt' || pod.name == 'Rokt-Widget'
    def pod.build_type
      Pod::BuildType.new(:linkage => :dynamic, :packaging => :framework)
    end
  end
end
end

5Install pods#

変更を適用するためにpod installを実行します:

Install pods
bundle exec pod install

2. Initialize the Rokt SDK+#

ネイティブ側でRokt SDK+を初期化します。SDK+は他のSDK+ API呼び出しの前に初期化する必要があります。Targetピルを使用して、iOSとAndroidを切り替えます。

AppDelegate ファイルに初期化スニペットを挿入します。your-key と your-secret を、Roktアカウントマネージャーから提供された値に置き換えてください。

注意

registerPaymentExtension を MParticle.sharedInstance().start(with:) の後、selectShoppableAds の前に呼び出してください。これはiOSでのShoppable Ads配置に必要です。

AppDelegate initialization (Swift)
import mParticle_Apple_SDK
import RoktPaymentExtension

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
  // Initialize the SDK
  let options = MParticleOptions(key: "your-key",
  secret: "your-secret")
  // Specify the data environment with environment:
  // Set it to .development if you are still testing your integration.
  // Set it to .production if your integration is ready for production data.
  // The default is .autoDetect which attempts to detect the environment automatically
  options.environment = .development
  MParticle.sharedInstance().start(with: options)

  // Register after MParticle.sharedInstance().start(), before selectShoppableAds
  if let paymentExt = RoktPaymentExtension(
      applePayMerchantId: "merchant.com.yourapp.rokt"
  ) {
      MParticle.sharedInstance().rokt.registerPaymentExtension(paymentExt)
  }
  return true
}

初期化スニペットを挿入すると、以下のカスタマイズ可能なフィールドが表示されます：

1Entering your Rokt key and secret#

your-key と your-secret を MParticleOptions(key:secret:) に設定し、Roktアカウントマネージャーから提供された値に置き換えてください。

2Setting your data environment#

options.environment をテスト中は .development に設定してデータを開発環境にルーティングし、ライブ顧客活動を本番環境に送信するには .production に設定します。

3Registering the payment extension#

RoktPaymentExtension を MParticle.sharedInstance().start(with:) の後、selectShoppableAds の前に登録して、Shoppable Adsの支払い（Apple Payを含む）を有効にします。merchant.com.yourapp.rokt をApple PayのマーチャントIDに置き換えてください。iOSでのすべてのShoppable Ads配置に必要です。Stripeの公開可能キーはmParticle Rokt kit設定（mParticleダッシュボード）で設定されており、コードではApple PayのマーチャントIDのみを渡します。RoktPaymentExtension はSwiftタイプです。AppDelegate がObjective-Cの場合は、小さなSwiftファイルからこれを行います。

注記

ユーザーを識別し、追加のユーザー属性を設定するには、以下のステップ3：ユーザーを識別するを参照してください。初期化時にユーザーのメールがない場合は、後でユーザーを識別できます — 身元エラーの処理についてはエラー処理を参照してください。

3. Identify the User#

SDK+初期化スクリプトは、スクリプトの identifyRequest オブジェクトで提供された識別子を使用して現在のユーザーを識別します。SDK初期化後、ユーザーがログイン、ログアウト、または識別子を提供するたびに（たとえば、チェックアウト時）、以下に説明する適切な方法を使用してユーザーの身元を同期し続ける必要があります。

サポートされているユーザー識別子サポートされているユーザー識別子 への直接リンク

サポートされているユーザー識別子を表示
フィールドタイプ説明
emailstring顧客の生のハッシュされていないメールアドレスを渡します。
mobilestring顧客の電話番号をE.164形式で渡します。
customeridstring内部の顧客/アカウント識別子を渡します。ログインしているユーザーにはすべての画面で送信してください。
otherstringSHA-256でハッシュされたメールを渡します。生のメールを提供できない場合にのみ使用してください — email と other の両方を渡さないでください。（Androidパスのみ。）
other2stringSHA-256でハッシュされた携帯番号を渡します。生の携帯番号を提供できない場合にのみ使用してください — mobile と other2 の両方を渡さないでください。（Androidパスのみ。）
emailSha256stringSHA-256でハッシュされたメールを渡します。生のメールを提供できない場合にのみ使用してください — email と emailSha256 の両方を渡さないでください。（iOSパスのみ。）
mobileSha256stringSHA-256でハッシュされた携帯番号を渡します。生の携帯番号を提供できない場合にのみ使用してください — mobile と mobileSha256 の両方を渡さないでください。（iOSパスのみ。）

ユーザーを識別するには:

1Create an IdentityRequest object#

ユーザーの識別子を含む IdentityRequest オブジェクトを作成します。ユーザーの生のハッシュされていないメールアドレスを email フィールドに統合する必要があります。

2Set additional attributes via the identity callback#

追加のユーザー属性を設定するには、アイデンティティコールバックを使用します。identifyRequest が成功した場合、コールバック内で設定したユーザー属性は識別されたユーザーに割り当てられます。

3Send the request using the method that matches the user's action#

ユーザーのアクションに一致するメソッドに identifyRequest（およびオプションの identityCallback）を渡します:

  • MParticle.Identity.login: ユーザーがログインまたはアカウントを作成したときに呼び出します。
  • MParticle.Identity.identify: ログイン遷移なしでセッション中にユーザーのメールを取得したときに呼び出します（例：ゲストがチェックアウト時にメールを入力する場合）。
  • MParticle.Identity.logout: ユーザーがログアウトしたときに呼び出します。

これらのメソッドを呼び出すことで、SDKの現在のユーザーの状態の記録が遷移します。login と logout メソッドは、Roktの帰属を改善するために対応するイベントも自動的にログに記録します。

例えば、Jane Smithという名前のユーザーを j.smith@example.com というメールアドレス、+13125551515 という携帯番号、cust_10482 という顧客IDで識別するには:

Identify Jane Smith
// 1. Create the identifyRequest object
const request = new MParticle.IdentityRequest();
// Preferred: pass the customer's raw, unhashed email.
// If you can only provide a SHA-256-hashed email, remove .email and use other instead — do not pass both.
request.email = 'j.smith@example.com';
request.other = 'SHA-256 hashed email';  // only if raw email unavailable
// If you can only provide a SHA-256-hashed mobile number, use other2 instead of mobile — do not pass both.
// (Called 'other2' on Android and 'mobileSha256' on iOS; both use this same field.)
request.other2 = 'SHA-256 hashed mobile number';  // only if raw mobile unavailable
request.mobile = '+13125551515';
request.customerId = 'cust_10482';

// 2. User attributes are set using the identity callback
const identityCallback = (error, userId) => {
  if (error) {
      console.debug(error);
  } else {
      const user = new MParticle.User(userId);
      user.setUserAttribute('firstname', 'Jane');
      user.setUserAttribute('lastname', 'Smith');
  }
};
// 3. Call one of the following methods that best matches the user's action:
MParticle.Identity.login(request, identityCallback); // Call when the user logs in or creates an account
MParticle.Identity.identify(request, identityCallback); // Call when you obtain the user's email mid-session, but not during a login
MParticle.Identity.logout({}); // Call when the user logs out

4. Set User Attributes#

ユーザーがアプリをナビゲートする際に、段階的にユーザー属性を設定します。チェックアウト時だけではありません。設定する属性が多いほど、Roktは顧客をよりよく解決し、関連するオファーを提供できます。

Set user attributes
import MParticle from 'react-native-mparticle';

// Retrieve the current user. This will only succeed if you have identified the user during SDK+ initialization or by calling the identify method.
MParticle.Identity.getCurrentUser((currentUser) => {
  if (currentUser) {
      // Once you have the current user, you can set user attributes with:
      currentUser.setUserAttribute('custom-attribute-name', 'custom-attribute-value');
      // Note: all user attributes (including list attributes and tags) must have distinct names.

      // Rokt recommends setting as many of the following user attributes as possible:
      currentUser.setUserAttribute('firstname', 'John');
      currentUser.setUserAttribute('lastname', 'Doe');
      // Phone numbers can be formatted either as '1234567890', or '+1 (234) 567-8901'
      currentUser.setUserAttribute('mobile', '3125551515');
      currentUser.setUserAttribute('age', '33');
      currentUser.setUserAttribute('gender', 'M');
      currentUser.setUserAttribute('billingcity', 'Brooklyn');
      currentUser.setUserAttribute('billingstate', 'NY');
      currentUser.setUserAttribute('billingzipcode', '123456');
      currentUser.setUserAttribute('dob', 'yyyymmdd');
      currentUser.setUserAttribute('title', 'Mr');
      currentUser.setUserAttribute('language', 'en');
      currentUser.setUserAttribute('predictedltv', '136.23');

      // You can create a user attribute to contain a list of values
      currentUser.setUserAttributeArray('favorite-genres', ['documentary', 'comedy', 'romance', 'drama']);

      // To remove a user attribute, call removeUserAttribute and pass in the attribute name.
      currentUser.removeUserAttribute('attribute-to-remove');
  }
});

ユーザー属性ユーザー属性 への直接リンク

収集できる限り多くの以下の項目を設定してください:

すべてのユーザー属性を表示
フィールドタイプ説明
firstnamestring顧客の名。パーソナライズに使用されます。
lastnamestring顧客の姓。パーソナライズに使用されます。
mobilestring電話番号は 1112345678 または +1 (222) 345-6789 の形式で。識別解決と関連性に使用されます。
ageinteger顧客の年齢。dob の代替。適格性と関連性に使用されます。
dobstring生年月日、yyyymmdd。age の代替。適格性と関連性に使用されます。
genderstring顧客の性別。例: M、F、Male、Female。関連性に使用されます。
titlestring敬称。例: Mr、Mrs、Ms。パーソナライズに使用されます。
languagestring購入に関連するISO 639-1言語コード。関連性に使用されます。
billingcitystring請求先の市。関連性に使用されます。
billingstatestring請求先の州/県/地域。関連性と適格性に使用されます。
billingzipcodestring完全なZIPまたは郵便番号（米国の優先はZIP+4）。識別解決と関連性に使用されます。
billingaddress1string請求先の住所1行目。識別解決と関連性に使用されます。
billingaddress2string請求先の住所2行目。識別解決に使用されます。
countrystringISO 3166-1 alpha-2国コード（例: US、GB、AU）。適格性と関連性に使用されます。
birthyearinteger顧客の生年（例: 1990）。適格性と関連性に使用されます。
newcustomerboolean初めての購入者かどうか。関連性に使用されます。
customertypestringユーザーが認証されているかどうか（guest / logged_in）。関連性に使用されます。
loyaltytierstringパートナーのロイヤルティプログラムの階層。関連性と適格性に使用されます。
loyaltyidstringロイヤルティプログラムのメンバーID。識別解決に使用されます。
predictedltvdecimal通常はパートナーの機械学習モデルからの予測される総生涯価値。関連性のために使用されます。
subscriptionstatusstring該当する場合のサブスクリプション状態 (active, trial, churned, paused, none)。関連性と適格性のために使用されます。
customersegmentstringパートナー内部のセグメンテーション（例: vip, at_risk, new, reactivated）。関連性のために使用されます。
acquisitionchannelstring顧客が取得されたチャネル。関連性のために使用されます。

すべてのユーザー属性（リスト属性を含む）は、異なる名前を持たなければなりません。

5. Track Funnel Events#

画面ビュー、コマースイベント、およびカスタムイベントを追跡し、Roktが各顧客がどの段階にいるかを理解できるようにします。

Event category

画面の名前（例: "homepage", "product_detail_page"）を使用してMParticle.logScreenEvent()を呼び出します。追加のカスタム属性を情報オブジェクトに含めます。

Log a screen view
import MParticle from 'react-native-mparticle';

MParticle.logScreenEvent('homepage', {
  'custom-attribute': 'custom-value',
});

6. Show a Placement#

Roktがコンテンツを表示する支払い画面や確認画面ごとに、selectPlacementsを呼び出します。画面タイプとテストまたは本番環境であるかを指定するために、次のページ識別子のいずれかを含めます:

  • stg.rokt.conf: A confirmation screen in a staging (or testing) environment.
  • prod.rokt.conf: A confirmation screen in a production environment.
  • stg.rokt.payments: A payments screen in a staging (or testing) environment.
  • prod.rokt.payments: A payments screen in a production environment.

画面が読み込まれるとすぐに、すべての関連属性が利用可能になったらselectPlacementsを呼び出します。最低限、email、firstname、lastname、billingzipcode、およびconfirmationrefを渡します。完全なリストはPlacement attributesを参照してください。

Pay+

Pay+配置の場合、各画面でのselectPlacements呼び出しにpaymenttypeとpaymentServiceProviderを含めます。paymentServiceProviderは支払い画面で利用可能な支払い方法を伝え、paymenttypeはユーザーが支払った方法を伝えます。

配置属性配置属性 への直接リンク

これらの属性を attributes マップ内の selectPlacements に渡します。常に最新の値を提供してください — ここで渡された属性は、以前の setUserAttribute 呼び出しを上書きします。

すべての配置属性を表示
フィールド型説明
emailstring顧客のメールアドレス（ハッシュ化されていない）。アイデンティティ解決に使用されます。
firstnamestring顧客の名。パーソナライゼーションに使用されます。
lastnamestring顧客の姓。パーソナライゼーションに使用されます。
mobilestringE.164形式の顧客の携帯電話番号。アイデンティティ解決に使用されます。
confirmationrefstring注文/確認参照番号。関連性と重複排除に使用されます。
currencystring取引通貨（ISO 4217、例: USD, GBP, AUD）。関連性に使用されます。
countrystringISO 3166-1 alpha-2の国コード。適格性と関連性に使用されます。
languagestring顧客の希望言語（ISO 639-1）。関連性に使用されます。
totalpricedecimal税金と送料を含むカートの合計値。関連性に使用されます。
amountstring税金と送料を除くカート小計。totalprice とは異なります。関連性に使用されます。
couponCodestring注文に適用されたプロモーションコード（ある場合）。関連性に使用されます。
newcustomerboolean初めての購入者かどうか。関連性に使用されます。
customertypestringguest または logged_in。関連性に使用されます。
valuedecimal顧客の累積購入額（例: "2340.00"）。関連性に使用されます。
subscriptionstatusstring該当する場合のサブスクリプション状態（active, trial, churned, paused, none）。関連性と適格性に使用されます。
customersegmentstringパートナー内部セグメンテーション（例: vip, at_risk, new, reactivated）。関連性に使用されます。
paymenttypestring選択された支払い方法（credit_card, paypal, apple_pay など）。Pay+の適格性に使用されます。
paymentServiceProviderstringページで受け入れられる支払い方法のカンマ区切りリスト（例: applepay,paypal,cardpayment）。値は小文字でスペースを含まない必要があります。受け入れられる値の完全なリストについては、Payment Service Providerを参照してください。Pay+の適格性に使用されます。
ccbinstringクレジットカードのBIN（6-8桁）。関連性のために使用されます。
billingnamestring請求名。アイデンティティ解決に使用されます。
billingaddress1string請求先の住所。アイデンティティ解決と関連性に使用されます。
billingaddress2string請求先のアパート/ユニット。アイデンティティ解決に使用されます。
billingcitystring請求先の市区町村。関連性のために使用されます。
billingstatestring請求先の州または省。関連性のために使用されます。
billingzipcodestring請求先の郵便番号/郵便コード。アイデンティティ解決と関連性に使用されます。
shippingmethodstring選択された配送方法（standard、express、next_day）。関連性のために使用されます。
shippingnamestring配送名。関連性のために使用されます。
shippingaddress1string配送先の住所。関連性のために使用されます。
shippingcitystring配送先の市区町村。関連性のために使用されます。
shippingstatestring配送先の州または省。関連性のために使用されます。
shippingzipcodestring配送先の郵便番号または郵便コード。関連性のために使用されます。
shippingcountrystring配送先の国（ISO 3166-1 alpha-2）。関連性のために使用されます。
cartItemsarrayカートラインオブジェクトの構造化された配列。関連性のために使用されます。
adsexperiencestringShoppable Adsのエクスペリエンスを意図的にターゲットにする場合は"shoppable"を渡します。iOSのみで使用されます。
Placement position

オーバーレイプレースメントは、Roktが管理するコンテナ内で確認画面の上にレンダリングされ、アプリの既存のレイアウトに変更を加える必要はありません。

オーバーレイプレースメントを挿入するには、確認画面が読み込まれたらselectPlacementsを呼び出します:

Overlay placement
import MParticle from 'react-native-mparticle';

const attributes = {
  // Identity
  'email': 'j.smith@example.com',
  'firstname': 'Jenny',
  'lastname': 'Smith',
  'mobile': '+13125551515',

  // Transaction
  'confirmationref': '54321',
  'currency': 'USD',
  'country': 'US',
  'language': 'en',
  'totalprice': '149.99',
  'couponCode': 'SUMMER20',

  // Customer context
  'newcustomer': 'false',
  'customertype': 'logged_in',
  'value': '2340.00',
  'subscriptionstatus': 'active',
  'customersegment': 'vip',

  // Payment (include paymenttype and paymentServiceProvider for Pay+)
  'paymenttype': 'credit_card',
  'paymentServiceProvider': 'cardpayment',
  'ccbin': '411112',

  // Billing address
  'billingaddress1': '123 Main St',
  'billingcity': 'Brooklyn',
  'billingstate': 'NY',
  'billingzipcode': '11201',

  // Shipping
  'shippingmethod': 'express',
  'shippingaddress1': '175 Varick St',
  'shippingcity': 'New York',
  'shippingstate': 'NY',
  'shippingzipcode': '10014',
  'shippingcountry': 'US',
};

const roktConfig = MParticle.Rokt.createRoktConfig('light');

MParticle.Rokt.selectPlacements(
  'RoktExperience', // identifier
  attributes,       // attributes map
  {},               // placeholders (empty for overlay)
  roktConfig,       // configuration
);

オプションの関数オプションの関数 への直接リンク

関数目的
MParticle.Rokt.close()オーバーレイプレースメントを自動的に閉じる。

追加の設定追加の設定 への直接リンク

オプションのパラメータとしてRoktConfigを渡して、プレースメントUIをカスタマイズします（例：ダーク/ライトモード、キャッシング）。

selectPlacements with RoktConfig
import MParticle from 'react-native-mparticle';

const roktConfig = MParticle.Rokt.createRoktConfig(
  'light',
  MParticle.Rokt.createCacheConfig(1200, { 'email': 'j.smith@example.com', 'orderNumber': '123' }),
);

MParticle.Rokt.selectPlacements(
  'RoktExperience',
  attributes,
  {},
  roktConfig,
);
注記

識別子RoktExperienceまたは埋め込み識別子RoktEmbedded1を異なる値に更新したい場合は、Roktアカウントマネージャーに連絡して、Roktプレースメントが一貫して設定されていることを確認してください。

Events APIEvents API への直接リンク

SDK+は、NativeEventEmitterメカニズムを通じてプレースメントのライフサイクルイベントを提供します。

Subscribe to placement events
import { NativeEventEmitter } from 'react-native';
import MParticle from 'react-native-mparticle';

const eventManagerEmitter = new NativeEventEmitter(MParticle.RoktEventManager);

eventManagerEmitter.addListener('RoktEvents', data => {
  console.log(`event received ${JSON.stringify(data)}`);
});

標準イベント標準イベント への直接リンク

すべての標準イベントを表示
イベント説明パラメータ
ShowLoadingIndicatorSDK+がRoktバックエンドを呼び出す前にトリガーされます。
HideLoadingIndicatorSDK+がRoktバックエンドからの成功または失敗を受け取ったときにトリガーされます。
PlacementInteractiveプレースメントがレンダリングされ、操作可能になったときにトリガーされます。placementId: String
PlacementReadyプレースメントが表示準備ができたが、まだコンテンツがレンダリングされていないときにトリガーされます。placementId: String
OfferEngagementユーザーがオファーに関与したときにトリガーされます。placementId: String
PositiveEngagementユーザーがオファーに積極的に関与したときにトリガーされます。placementId: String
FirstPositiveEngagementユーザーが初めてオファーに積極的に関与したときにトリガーされます。placementId: String
OpenUrlユーザーがパートナーアプリに送信するように設定されたURLを押したときにトリガーされます。placementId: String, url: String
PlacementClosedユーザーによってプレースメントが閉じられたときにトリガーされます。placementId: String
PlacementCompletedオファーの進行が終了し、表示するオファーがもうない場合にトリガーされます。また、キャッシュがヒットしたが、以前に却下されたために取得されたプレースメントが表示されない場合にもトリガーされます。placementId: String
PlacementFailureプレースメントが何らかの失敗により表示できなかった場合、または表示するプレースメントがない場合にトリガーされます。placementId: String (optional)
CartItemInstantPurchaseカタログアイテムの購入がユーザーによって開始されたときにトリガーされます（iOSのみ）。placementId: String, cartItemId: String, catalogItemId: String, currency: String, description: String, linkedProductId: String, totalPrice: number, quantity: number, unitPrice: number

7. Appendix#

Appendix A: アプリケーション設定Appendix A: アプリケーション設定 への直接リンク

アプリケーションは、RoktConfig を通じて設定を渡すことで、SDK+がシステムのデフォルトではなく、アプリのカスタム設定を使用するようにできます。

ColorMode オブジェクトColorMode オブジェクト への直接リンク

値説明
lightアプリケーションはライトモードです
darkアプリケーションはダークモードです
systemアプリケーションはシステムのカラーモードをデフォルトとします

EdgeToEdgeDisplay (Androidのみ)EdgeToEdgeDisplay (Androidのみ) への直接リンク

このブール値は、Rokt SDK+がAndroidでエッジツーエッジのディスプレイモードでレンダリングするかどうかを制御します（デフォルトは true）。アプリがエッジツーエッジのディスプレイをサポートしていない場合は、false に設定します。

EdgeToEdgeDisplay
import com.mparticle.rokt.RoktConfig

val roktConfig = RoktConfig.Builder()
    .edgeToEdgeDisplay(true)
    .build()

CacheConfig オブジェクトCacheConfig オブジェクト への直接リンク

パラメータ説明
cacheDurationRokt SDK+がエクスペリエンスをキャッシュする秒単位のオプションの期間です。許可される最大値は90分です。提供されないか無効な場合、デフォルトは90分です。
cacheAttributesキャッシュキーとして使用するオプションの属性です。nullの場合、selectPlacements で送信されたすべての属性がキャッシュキーとして使用されます。
RoktConfig with ColorMode and CacheConfig
import MParticle from 'react-native-mparticle';

// Cache the experience for 1200 seconds, using email and orderNumber as the cache key.
const roktConfig = MParticle.Rokt.createRoktConfig(
    'light',
    MParticle.Rokt.createCacheConfig(
        1200,
        { 'email': 'j.smith@example.com', 'orderNumber': '123' }
    ),
);

MParticle.Rokt.selectPlacements(
    'RoktExperience',
    attributes,
    {},
    roktConfig,
);

Appendix B: RoktLayoutView コンポーネントAppendix B: RoktLayoutView コンポーネント への直接リンク

埋め込みプレースメントの場合、React Native SDK+は RoktLayoutView コンポーネントを提供し、アプリのビュー階層にRoktプレースメントを統合するための宣言的アプローチを提供します。RoktLayoutView は、ノードハンドルを手動で管理する必要なく、埋め込みプレースメントタイプをサポートします。

Embedded placement with RoktLayoutView
import React from 'react';
import { findNodeHandle, View } from 'react-native';
import MParticle, { RoktLayoutView } from 'react-native-mparticle';

const MyConfirmationScreen = () => {
    const placeholder1 = React.createRef();

    const handleSelectPlacements = () => {
        const placeholders = {
            RoktEmbedded1: findNodeHandle(placeholder1.current),
        };

        const attributes = {
            'email': 'j.smith@example.com',
            'firstname': 'Jenny',
            'lastname': 'Smith',
            'billingzipcode': '90210',
            'confirmationref': '54321',
        };

        MParticle.Rokt.selectPlacements(
            'RoktExperience',
            attributes,
            placeholders,
        );
    };

    return (
        <View>
            {/* Your confirmation screen content */}
            <RoktLayoutView ref={placeholder1} placeholderName="RoktEmbedded1" />
        </View>
    );
};

パラメータパラメータ への直接リンク

パラメータ型説明
refRefプレースホルダーマップのネイティブノードハンドルを取得するために使用されるReact refです。
placeholderNamestring埋め込みビューの識別子（例: "RoktEmbedded1"）、selectPlacements に渡されるプレースホルダーマップのキーと一致する必要があります。

Appendix C: エラーハンドリングAppendix C: エラーハンドリング への直接リンク

IDSync APIはアプリの状態において中心的な役割を果たすことを目的としており、高速かつ高可用性を備えています。アプリがインターネット接続なしでユーザーのログイン、ログアウト、または状態の変更を防ぐのと同様に、これらのAPIをゲート操作として扱い、一貫したユーザー状態を維持してください。SDK+はAPIコールを自動的に再試行しませんが、ビジネスロジックに従って再試行できるようにコールバックAPIを提供します。

エラーハンドリングを実装しない場合、大規模なデータの一貫性の問題が発生する可能性があります。

IDSync error handling
import MParticle from 'react-native-mparticle';

const request = new MParticle.IdentityRequest();
request.email = 'j.smith@example.com';

MParticle.Identity.identify(request, (error, userId) => {
    if (error) {
        // Inspect error.code to determine the cause:
        // - Network errors: retry the request
        // - Throttle errors (429): retry with backoff
        console.debug('Identity error:', error);
    } else {
        // Proceed with the identified user
        const user = new MParticle.User(userId);
        user.setUserAttribute('firstname', 'Jane');
    }
});

iOS エラーコードiOS エラーコード への直接リンク

iOSでは、ネイティブのMPIdentityErrorResponseCode列挙型が以下のクライアント側コードを定義しています。原因を特定するために、ネイティブのonIdentifyCompleteコールバックでerror.codeを確認してください：

MPIdentityErrorResponseCode説明
MPIdentityErrorResponseCodeRequestInProgressIDSync HTTPリクエストは、すでに進行中のため実行されませんでした。
MPIdentityErrorResponseCodeClientSideTimeoutTCP接続のタイムアウトによりIDSync HTTPリクエストが失敗しました。
MPIdentityErrorResponseCodeClientNoConnectionネットワークカバレッジの不足によりIDSync HTTPリクエストが失敗しました。
MPIdentityErrorResponseCodeSSLErrorSSL設定の問題によりIDSync HTTPリクエストが失敗しました。
MPIdentityErrorResponseCodeOptOutオプトアウトのためSDK+が無効になっているためIDSync HTTPリクエストは実行されませんでした。
MPIdentityErrorResponseCodeUnknown不明なエラーによりIDSync HTTPリクエストが失敗しました。

上記のクライアント側コードに加えて、error.codeにはサーバー生成のHTTPステータスコードが含まれる場合があります：

値説明
400無効なリクエストボディによりIDSync HTTPコールが失敗しました。エラーの詳細を確認してください。
401認証エラーによりIDSync HTTPコールが失敗しました。APIキーが正しいことを確認してください。
403この操作がアカウントに対してプロビジョニングされていないためIDSync HTTPコールが失敗しました。Roktアカウントマネージャーに連絡して有効にしてください。
429IDSync HTTPコールがスロットルされ、指数バックオフで再試行する必要があります。これはユーザーの「ホットキー」または予想以上のIDSyncボリュームを引き起こす不正な実装を示している可能性があります。
5xxRoktサーバー側の問題によりIDSync HTTPコールが失敗しました。詳細についてはアカウント担当者に連絡してください。

Android エラーコードAndroid エラーコード への直接リンク

Androidでは、IDSync APIは常に基礎となるHTTPレスポンスのHTTPステータスコードとボディを返します。クライアント側の失敗（デバイスのオフライン、タイムアウト、無効なリクエスト）の場合、SDK+はIdentityApi.UNKNOWN_ERRORを返します。スロットリング（HTTP 429）の場合、IdentityApi.THROTTLE_ERRORを返します。失敗リスナーで両方を処理してください：

Android IDSync error handling (Kotlin)
MParticle.getInstance()?.Identity()?.identify(identifyRequest)
    ?.addFailureListener { identityHttpResponse ->
        if (identityHttpResponse?.httpCode == IdentityApi.UNKNOWN_ERROR) {
            // Device is likely offline — retry the request
        } else if (identityHttpResponse?.httpCode == IdentityApi.THROTTLE_ERROR) {
            // Throttled (429) — retry with backoff
        }
    }

Appendix D: WebからネイティブへのセッションIDの受け渡しAppendix D: WebからネイティブへのセッションIDの受け渡し への直接リンク

ユーザーの操作がウェブとネイティブプラットフォームの両方にまたがる場合、Web SDK+からReact Native SDK+にセッションIDを渡すことで、一貫したRoktセッションを維持できます。これは、ユーザーがWebView（支払いページなど）でアクションを完了し、ネイティブアプリに戻って確認するハイブリッドフローに役立ちます。

Web SDK+からのセッションIDの取得Web SDK+からのセッションIDの取得 への直接リンク

selectPlacementsを呼び出した後、セッションIDは選択コンテキストで利用可能です:

Retrieve sessionId from the selection context
const selection = await launcher.selectPlacements({
    identifier: "checkout",
    attributes: {
        email: "user@example.com",
        // ... other attributes
    }
});

const sessionId = await selection.context.sessionId;
注記

The session ID is a unique GUID assigned to the current user journey. It is useful for debugging and for correlating a user's activity across your web and native surfaces.

ディープリンクを使用してセッションIDをネイティブアプリに渡します:

Deep-link to native app
const deepLink = `myapp://confirmation?sessionId=${encodeURIComponent(sessionId)}`;
window.location.href = deepLink;

セッションIDの設定セッションIDの設定 への直接リンク

ネイティブプラットフォームコードでディープリンクからセッションIDを抽出し、React Nativeレイヤーがロードされる前に、SDK+に渡してからselectPlacementsを呼び出します。これをネイティブのAppDelegate（iOS）またはActivity（Android）で処理します:

Set sessionId from deep link (React Native)
import { Linking } from 'react-native';
import MParticle from 'react-native-mparticle';

// Listen for incoming deep links
Linking.addEventListener('url', ({ url }) => {
    const sessionId = new URL(url).searchParams.get('sessionId');
    if (sessionId) {
        void MParticle.Rokt.setSessionId(sessionId);
    }
});

注意事項注意事項 への直接リンク

  • セッションが使用されるように、setSessionIdをselectPlacementsの前に呼び出してください。
  • 空の文字列は無視され、セッションは更新されません。
  • クエリパラメータとして渡す際には、常にセッションIDをURLエンコードしてください。

8. Test Your Integration#

SDK+が正しく初期化され、イベントがログに記録されることを確認するには:

1Enable verbose SDK+ logging#

初期化前に詳細なSDK+ログを有効にして、送信されている内容を確認できるようにします。

Enable verbose SDK+ logging
// For iOS verbose logging, add to your Swift AppDelegate:
// MParticle.sharedInstance().logLevel = .verbose

// For Android verbose logging, add to your Application class before MParticle.start():
// MParticle.setLogLevel(MParticle.LogLevel.VERBOSE)

2Build and run against a development key#

環境をDevelopmentに設定してアプリをビルドおよび実行します。

3Trigger selectPlacements#

配置がレンダリングされるべき画面でselectPlacementsをトリガーし、配置がロードされることを確認します。

4Verify events#

イベントがログに記録され、identifyRequest呼び出しが成功することを確認します。

トラブルシューティングトラブルシューティング への直接リンク

プレースメントがレンダリングされない、またはイベントが表示されない場合は、Rokt SDK+ エラーについてネイティブコンソール（iOSの場合はXcode、Androidの場合はLogcat）を確認してください。一般的な問題は次のとおりです：

初期化エラー初期化エラー への直接リンク

  • ネイティブ初期化で使用しているキーとシークレットが、Roktアカウントマネージャーから提供された値と一致していることを確認してください。
  • ネイティブSDK+の start 呼び出しが、selectPlacements やイベントログの呼び出しの前に実行されていることを確認してください。
  • iOSのショッパブル広告の場合、RoktPaymentExtension が start() の後、selectShoppableAds の前に登録されていることを確認してください。

アイデンティティエラーアイデンティティエラー への直接リンク

アイデンティティコールバックがエラーとともに発生した場合、エラーコードとリトライガイダンスについては エラーハンドリング を参照してください。エラーハンドリングがないと、大規模なデータ整合性の問題が発生する可能性があります。

プレースメントがレンダリングされないプレースメントがレンダリングされない への直接リンク

  • プレースメントの identifier（例：RoktExperience）が、Roktアカウントマネージャーが設定したものと一致していることを確認してください。
  • 埋め込みプレースメントの場合、埋め込みビューの識別子（例：RoktEmbedded1）が placeholderName と RoktLayoutView コンポーネントで一致していることを確認してください。
  • 属性マップに少なくとも email、firstname、lastname、billingzipcode、および confirmationref が含まれていることを確認してください。
  • インタースティシャルプレースメントの場合、Platform.OS === 'ios' を確認してから selectShoppableAds を呼び出してください — インタースティシャルプレースメントはAndroidではサポートされていません。
この記事は役に立ちましたか？