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

React Native SDK 統合ガイド

このページでは、Rokt Ecommerce のための React Native SDK を実装して、チェックアウト時により関連性の高い顧客体験を提供する方法を説明します。SDK は、設定されたページで発火し、ユーザーとトランザクションデータを Rokt に戻してパーソナライズと測定を行うことで、これらの体験（確認ページでのオファー表示など）をトリガーし、追跡することを可能にします。

専任のアカウント担当者が、React Native アプリでターゲットにしているプラットフォームのアカウント設定をサポートします。彼らは、iOS と Android の SDK を初期化するために必要な key と secret を提供し、顧客に最も関連性の高い体験を提供するために必要な追加リソースも供給します。

注記

これらの指示を完了するには開発リソースが必要です。追加の支援が必要な場合は、Rokt のアカウントマネージャーにお問い合わせください。Shopify ストアは、Rokt Ecommerce アプリ を使用して数秒で Rokt プレースメントを設定できます — コーディングは不要です！

1. React Native セットアップ​

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

npm install react-native-mparticle --save

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

import MParticle from 'react-native-mparticle';

React Native プラグインをインストールした後、以下の手順に従って Rokt SDK をモバイルアプリまたはウェブサイトに統合し続けます。アカウントマネージャーから提供された key と secret を必要な場所に必ず含めてください。そうしないと、アプリやサイトを起動する際にログにエラーが表示されます。

1.1. iOSアプリにRokt SDKを追加する​

上記のNPMインストールステップにより、ReactフレームワークとコアiOSフレームワークがプロジェクトに自動的に含まれます。Rokt Kitはios/Podfileにポッド依存関係として追加する必要があります。ただし、アプリとその他の依存関係に応じて、次の2つの方法のいずれかで統合する必要があります：

CocoaPodsを使用して、アプリケーションにRokt SDKを含めます：

CocoaPods​

CocoaPodsを使用してRokt Kitを統合するには、Podfileに次のように指定します：

ios/Podfile
pod 'mParticle-Rokt','~> 8.0'

  1. 静的ライブラリはReact Nativeのデフォルトですが、Rokt iOS SDKにはSwiftコードが含まれているため、Podfileにプリインストールコマンドの形で例外を追加する必要があります。

    pre_install do |installer|
      installer.pod_targets.each do |pod|
        if 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

    次に、以下のコマンドを実行します

    bundle exec pod install

  2. フレームワークはSwift開発のデフォルトであり、React Nativeでは推奨されませんがサポートされています。さらに、フレームワークが静的または動的にビルドされるかどうかを定義できます。

Podfileを更新して動的にリンクされたフレームワークを使用できるようにするには、次の行をコメントアウトします（flipperがある場合）

# :flipper_configuration => flipper_config,

次に、以下のいずれかのコマンドを実行します

USE_FRAMEWORKS=static bundle exec pod install

または

USE_FRAMEWORKS=dynamic bundle exec pod install

1.2. Rokt SDKを初期化する​

SDKを初期化するには、以下の初期化スニペットをAppDelegateファイルに挿入します:

注意
  • your-keyとyour-secretを、専任のRoktチームから提供されたキーとシークレットに置き換えてください。
import mParticle_Apple_SDK

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // SDKを初期化する
    let options = MParticleOptions(key: "your-key",
    secret: "your-secret")
    // データ環境を指定する:
    // 統合をテスト中の場合は.developmentに設定してください。
    // 統合が本番データの準備ができた場合は.productionに設定してください。
    // デフォルトは.autoDetectで、自動的に環境を検出しようとします
    options.environment = .development
    MParticle.sharedInstance().start(with: options)
    return true
}

さらなるセットアップ​

さらなるヘルプについては、完全なiOS SDK Integration Guideを参照してください。

2. ユーザー属性の追跡​

Rokt SDK を使用して、イベントとは別にユーザー属性を収集できます。ユーザー属性は、イベントを追跡する際のカスタム属性とは別です。SDK は、特定のセッションで収集されたユーザー属性を、同じセッションでトリガーされたイベントと関連付けます。

ユーザー属性を収集するには、Rokt SDK を初期化した直後に、イベントをログに記録する前に次のコードを実行する必要があります。

import MParticle from 'react-native-mparticle';

// 現在のユーザーを取得します。これは、SDK の初期化時または identify メソッドを呼び出すことでユーザーを識別した場合にのみ成功します。
MParticle.Identity.getCurrentUser((currentUser) => {
  if (currentUser) {
    console.log('Current user:', currentUser);
    currentUser.setUserAttribute('custom-attribute-name', 'custom-attribute-value');
    // 注意: すべてのユーザー属性（リスト属性やタグを含む）は、異なる名前を持つ必要があります。

    // Rokt は、可能な限り次のユーザー属性を設定することを推奨します：
    currentUser.setUserAttribute('firstname', 'John');
    currentUser.setUserAttribute('lastname', 'Doe');
    // 電話番号は '1234567890' または '+1 (234) 567-8901' の形式でフォーマットできます
    currentUser.setUserAttribute('mobile', '3125551515');
    currentUser.setUserAttribute('age', '33');
    currentUser.setUserAttribute('gender',  'M');
    currentUser.setUserAttribute('city', 'Brooklyn');
    currentUser.setUserAttribute('state', 'NY');
    currentUser.setUserAttribute('zip', '123456');
    currentUser.setUserAttribute('dob', 'yyyymmdd');
    currentUser.setUserAttribute('title', 'Mr');
    currentUser.setUserAttribute('language', 'en');
    currentUser.setUserAttribute('value', '52.25');
    currentUser.setUserAttribute('predictedltv', '136.23');

    // ユーザー属性に値のリストを含めることができます
    const attributeList = [
      'documentary',
      'comedy',
      'romance',
      'drama',
    ];
    currentUser.setUserAttributeArray('favorite-genres', attributeList);
    // ユーザー属性を削除するには、removeUserAttribute を呼び出し、属性名を渡します。すべてのユーザー属性は同じキー空間を共有します。
    currentUser.removeUserAttribute('attribute-to-remove');
  } else {
    console.log('No current user found');
  }
});

###3. ファネルイベントのキャプチャ

Rokt SDKを使用すると、イベントトラッキングを実装して、アプリ内でのユーザーの旅を説明するデータを収集できます。このデータを使用して、ユーザーエクスペリエンスを最適化することができます。

SDKで記録できる主なイベントタイプは3つあります。

  • スクリーンビューイベント: これらは、アプリの画面が読み込まれたときにトリガーできるイベントです。
  • カスタムイベント: これは、アプリに特有の情報を追跡するために作成する自由形式のイベントです。
  • コマースイベント: これは、ショッピング体験のさまざまな段階を説明できるeコマースに特有のイベントで、カートへのアイテム追加や最終購入を含みます。

Rokt SDKを初めて統合する際は、スクリーンビューのトラッキングを実装することから始めてください。カスタムイベントやコマースイベントのトラッキングについては、付録を参照してください。

スクリーンビューのトラッキング​

トラッキングできる最も基本的なイベントタイプの1つがスクリーンビューです。スクリーンビューをログに記録するには、画面が読み込まれるとすぐにMParticle.logScreenEvent()メソッドを呼び出し、画面の名前を文字列として渡し、任意の説明属性を含むハッシュマップを渡します。

渡す名前は、'homepage'や'product detail page'のような限られたセットの画面の1つであるべきです。

import MParticle from 'react-native-mparticle';

const screenInfo = {
  'rating': '5',
  'property_type': 'hotel',
};
MParticle.logScreenEvent('Screen Name', screenInfo);

4. プレースメントの表示​

Rokt SDKの主な価値は、selectPlacementsメソッドを通じて解放されます。このメソッドは、提供された属性に基づいてお客様に非常に関連性の高いプレースメント（またはレイアウト）を提供します。

Roktの統合が初期化されたら、レイアウトがレンダリングされるページからselectPlacementsメソッドを呼び出すことができます。ユーザーに最適な体験を保証するために、可能な限り早く、必要なすべての属性が利用可能になった時点で呼び出すべきです。

selectPlacementsを呼び出す際には、少なくともemail、firstname、lastname、billingzipcode、およびconfirmationref属性を提供する必要があります。

import MParticle from 'react-native-mparticle';

const attributes = {
    'email': 'j.smith@example.com',
    'firstname': 'Jenny',
    'lastname': 'Smith',
    'mobile': '(555)867-5309',
    'postcode': '90210',
    'country': 'US'
};

// アプリがダークモードかライトモードかに応じてプレースメントUIをカスタマイズできる`RoktConfig`などのオプションパラメータを渡すこともできます。埋め込みビューやイベントなどの追加のオプションパラメータは下に示されています。
const roktConfig = MParticle.Rokt.createRoktConfig(
  'dark',
  MParticle.Rokt.createCacheConfig(20, attributes),
);

MParticle.Rokt.selectPlacements(
  'RoktExperience', // identifier - string
  attributes, // attributes - map
  {}, // placeholders (see below) - map
  roktConfig, // configurations - object
);

##オプション機能

埋め込みプレースメント​

埋め込みプレースメントは、上記のオーバーレイプレースメントと同じ推奨事項と要件を共有しますが、UIにプレースメントビューを埋め込むことができます。

import React, { ComponentRef } from 'react';
import { findNodeHandle } from 'react-native';
import MParticle, { RoktLayoutView } from 'react-native-mparticle';

const placeholder1 = React.createRef<ComponentRef<typeof RoktLayoutView>>();

const showRoktLayout = () => {
  const placeholders = {
    Location1: findNodeHandle(placeholder1.current),
  };
  MParticle.Rokt.selectPlacements(
    'RoktEmbeddedExperience', // 識別子 - 文字列
    attributes, // 属性 - マップ（上記の例の変数）
    placeholders, // プレースホルダー - マップ
  );
};

// ビューヒエラルキーに `RoktLayoutView` を統合
<RoktLayoutView ref={placeholder1} placeholderName="Location1" />

イベント​

SDKはまた、NativeEventEmitter メカニズムを通じてイベントを提供します。

import { NativeEventEmitter } from 'react-native';

const eventManagerEmitter = new NativeEventEmitter(MParticle.RoktEventManager);

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

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

##付録

アプリケーション設定の使用​

アプリケーションは、独自のアプリケーション環境から設定を渡すことができるようになりました。これにより、Rokt SDK はシステムのデフォルトに依存せずに、アプリケーションのカスタム設定を使用することができます。

ColorMode オブジェクト​
値説明
lightアプリケーションはライトモードです
darkアプリケーションはダークモードです
systemアプリケーションはシステムのカラーモードにデフォルト設定されます
CacheConfig オブジェクト​
パラメータ説明
cacheDurationRokt SDK がエクスペリエンスをキャッシュする秒単位のオプションの期間。許可される最大値は90分で、デフォルト（値が提供されないか無効な場合）は90分です。
cacheAttributesキャッシュキーとして使用するオプションの属性。null の場合、selectPlacements で送信されたすべての属性がキャッシュキーとして使用されます。
const roktConfig = MParticle.Rokt.createRoktConfig(
  'dark',
  MParticle.Rokt.createCacheConfig(20, attributes),
);

MParticle.Rokt.selectPlacements(
  'RoktExperience', // identifier - string
  attributes, // attributes - map (variable from above example)
  {}, // placeholders - map
  roktConfig, // configurations - object
);

カスタムイベントのトラッキング​

上記の指示に従ってプレースメントと画面ビューのトラッキングを実装した後、追加のイベントトラッキングを実装したい場合があります。

MParticle.Event オブジェクトを使用して、イベント名、イベントタイプ、およびカスタム属性のマップを渡すことで、カスタムイベントを定義してトラッキングすることができます。

Kotlin と Java の両方でサポートされているカスタムイベントタイプは次のとおりです：

  • Navigation - アプリ内のユーザーナビゲーションフローとページ遷移をトラッキング
  • Location - ユーザーの位置に基づくインタラクションと移動を記録
  • Search - 検索クエリと検索関連のユーザーアクションをキャプチャ
  • Transaction - 金銭取引と購入関連の活動をログ
  • UserContent - レビュー、コメント、投稿などのユーザー生成コンテンツをトラッキング
  • UserPreference - ユーザー設定、好み、カスタマイズの選択を記録
  • Social - ソーシャルメディアのインタラクションと共有活動をキャプチャ
import MParticle from 'react-native-mparticle';

const event = new MParticle.Event()
    .setName('Test event')
    .setType(MParticle.EventType.Other)
    .setInfo({ 'Test key': 'Test value' })
MParticle.logMPEvent(event)

コマースイベントのトラッキング​

コマースイベントをトラッキングするには、3つのステップが必要です：

  1. 購入される製品を定義する
  2. トランザクションの概要を含むオブジェクトを作成する
  3. 製品の定義とトランザクションの概要を含むイベントをログに記録する
import MParticle from 'react-native-mparticle';

// 1. 製品を作成する
const customAttributes = {
  'ocean-view': 'true',
  'balcony': 'false',
};
const product = new MParticle.Product('Double Room - Econ Rate', 'econ-1', 100.00, 4);

// 上記で作成したカスタム属性のマップを含める
product.customAttributes = customAttributes;

// 2. トランザクションを要約する
const transactionAttributes = new MParticle.TransactionAttributes('12345')
  .setRevenue(430.00)
  .setTax(30.00);

// 3. 購入イベントをログに記録する
const commerceEvent = MParticle.CommerceEvent.createProductActionEvent(MParticle.ProductActionType.Purchase, [product], transactionAttributes);

// 購入イベントのオプションのカスタム属性は、キー/値の文字列ペアのマップとして追加できます
commerceEvent.customAttributes = {'sale': 'true', 'phone-booking': 'true'};
MParticle.logCommerceEvent(commerceEvent);
この記事は役に立ちましたか？
Last updated Oct 29, 2025