PageSense iOS SDK — React Nativeブリッジ連携ガイド

PageSense iOS SDK — React Nativeブリッジ連携ガイド

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

概要  

このガイドでは、React Native Native Bridgeを使用して、PageSense iOS SDKをReact Nativeアプリケーションに連携する方法を説明します。このブリッジにより、React NativeのJavaScriptコードからiOS SDKの関数を呼び出し、モバイルアプリケーション内でFullStack実験機能を使用できます。
このガイドを完了すると、React Nativeアプリケーションから次のPageSense SDK関数をJavaScriptから直接呼び出せるようになります。
  • initialiseSDK
  • activateExperimentByContext
  • getVariationNameByContext
  • trackGoalByContext

React Native Native Bridgeとは  

React Native Native Bridgeは、JavaScriptランタイムとネイティブiOSコード間の通信レイヤーです。JavaScriptからネイティブ関数を呼び出し、プラットフォーム固有のSDK機能にアクセスし、ネイティブモジュールから応答を受け取ることができます。
JavaScriptはSwiftと直接やり取りできないため、React Nativeでは中間層としてブリッジが提供されています。ネイティブメソッドはSwiftで実装され、Objective-Cブリッジファイルを通じてReact Nativeに公開されます。

IdeaReact Native UI
↓
React Nativeラッパー（TypeScript/JavaScript)
↓
React Native Native Bridge
↓
Objective-Cブリッジモジュール（.m）
↓
Swiftネイティブモジュール（.swift）
↓
PageSense iOS SDK

ネイティブモジュールはSwiftで実装され、Objective-Cブリッジファイルを介してReact NativeのJavaScriptレイヤーに公開されます。登録されると、このモジュールにはReact NativeのNativeModules APIからアクセスできます。

前提条件  

  • Node.js
  • npm
  • React Native CLI
  • Xcode
  • CocoaPods
bash
node -v
npm -v
pod --version

PageSense iOS SDKのインストール  

PageSense iOS SDKはXCFrameworkとして配布されています。
  1. 次のPageSenseFramework.xcframework.zipをZohoPageSenseSDKリポジトリーのFrameworksフォルダーからダウンロードし、内容を展開します。
  2. 展開したフレームワークをiOSプロジェクトフォルダーに配置します。
/ProjectRoot/ios/Frameworks/PageSenseFramework.xcframework
  1. Xcodeでワークスペースを開き、次の場所に移動します。
［Target］→［General］→［Frameworks, Libraries and Embedded Content］
  1. PageSenseFramework.xcframeworkを追加し、オプションを［Embed & Sign］に設定します。

iOS向けReact Nativeライブラリー  

次のReact Nativeライブラリーが必要です。pod installをiosディレクトリーから実行すると、自動的にインストールされます。
  • React-Core
  • React-RCTBridge
  • React-RCTNetwork
  • React-RCTText
  • React-RCTImage
React Native Bridgeを実装するには、次のiOSフレームワークの依存関係が必要です。
  • React
  • RCTBridgeModule
  • Foundation

ネイティブブリッジモジュールの作成  

iOSのネイティブブリッジは、SwiftネイティブモジュールとObjective-Cブリッジファイルの2つの部分で実装します。

パート1 — Swiftネイティブモジュール  

PageSenseSDKModule.swiftをiOSアプリケーションディレクトリー内に作成します。
  1. /ProjectRoot/ios/SampleApp/PageSenseSDKModule.swift
  2. swift
  3. import Foundation
  4. import React
  5. import PageSenseFramework
  6. @objc(PageSenseSDKModule)
  7. class PageSenseSDKModule: NSObject {
  8.     private varclient: PageSenseClient?
  9.     private varisInitialized: Bool= false
  10.     private static let LOG_TAG= '[PageSenseSDK]'
  11.     @objc
  12.     static func requiresMainQueueSetup()-> Bool {
  13.         return false
  14.     }
  15.     @objc
  16.     func initialiseSDK(
  17.         _accountId: String,
  18. sdkKey: String,
  19. projectName: String,
  20. resolver resolve: @escaping RCTPromiseResolveBlock,
  21. rejecter reject: @escaping RCTPromiseRejectBlock
  22.     ) {
  23.         if self.isInitialized { resolve(true); return }
  24.         letpageSenseSDKOptions = PageSenseSDKOptions()
  25. pageSenseSDKOptions.logLevel = .DEBUG
  26. pageSenseSDKOptions.pollingInterval = 5
  27.         PageSense.shared.createNewPageSenseClient(
  28. sdkAccountIDForDC:accountId,
  29. sdkKey:sdkKey,
  30. projectname:projectName,
  31. sdkOptions:pageSenseSDKOptions
  32.         ) {pagesenseclient in
  33.             guard letclient = pagesenseclient else { resolve(false); return }
  34.             self.client = client
  35.             self.isInitialized = true
  36.             resolve(true)
  37.         }
  38.     }
  39.     @objc
  40.     func activateExperimentByContext(
  41.         _experimentName: String,
  42. userContext: NSDictionary,
  43. resolver resolve: @escaping RCTPromiseResolveBlock,
  44. rejecter reject: @escaping RCTPromiseRejectBlock
  45.     ) {
  46.         guard letclient = self.client,
  47.               letpageSenseUserContext = validateAndBuildUserContext(userContext) else {
  48.             resolve(nil); return
  49.         }
  50. client.activateExperiment(experimentName:experimentName,userContext:pageSenseUserContext) {variation in
  51.             resolve(variation)
  52.         }
  53.     }
  54.     @objc
  55.     func getVariationNameByContext(
  56.         _experimentName: String,
  57. userContext: NSDictionary,
  58. resolver resolve: @escaping RCTPromiseResolveBlock,
  59. rejecter reject: @escaping RCTPromiseRejectBlock
  60.     ) {
  61.         guard letclient = self.client,
  62.               letpageSenseUserContext = validateAndBuildUserContext(userContext) else {
  63.             resolve(nil); return
  64.         }
  65.         resolve(client.getVariationName(experimentName:experimentName,userContext:pageSenseUserContext))
  66.     }
  67.     @objc
  68.     func trackGoalByContext(_goalName: String,userContext: NSDictionary) {
  69.         guard letclient = self.client,
  70.               letpageSenseUserContext = validateAndBuildUserContext(userContext) else { return }
  71. client.trackGoal(goalName:goalName,userContext:pageSenseUserContext)
  72.     }
  73.     @objc
  74.     func trackGoalWithPropertiesByContext(
  75.         _goalName: String,
  76. userContext: NSDictionary,
  77. goalProperties: NSDictionary
  78.     ) {
  79.         guard letclient = self.client,
  80.               letpageSenseUserContext = validateAndBuildUserContext(userContext),
  81.               letgoalPropertiesMap = validateAndConvertGoalPropertiesNonEmpty(goalProperties) else { return }
  82. client.trackGoal(goalName:goalName,userContext:pageSenseUserContext,goalProperties:goalPropertiesMap)
  83.     }
  84.     private func validateAndBuildUserContext(_userContextDict: NSDictionary)-> PageSenseUserContext? {
  85.         guard letuserId = userContextDict['userId'] as? String,
  86. !userId.trimmingCharacters(in: .whitespaces).isEmpty else { return nil }
  87.         varuserAttributes: [String: String]= [:]
  88.         if letrawAttrs = userContextDict['userAttributes'] as? NSDictionary {
  89.             for (key,value) inrawAttrs {
  90.                 guard letk = key as? String, letv = value as? String else { return nil }
  91. userAttributes[k]= v
  92.             }
  93.         }
  94.         return PageSenseUserContext(userId:userId,userAttributes:userAttributes)
  95.     }
  96.     private func validateAndConvertGoalPropertiesNonEmpty(_goalPropertiesDict: NSDictionary)-> [GoalProperty: String]? {
  97.         ifgoalPropertiesDict.count == 0 { return nil }
  98.         varresult: [GoalProperty: String]= [:]
  99.         for (key,value) ingoalPropertiesDict {
  100.             guard letkeyString = key as? String,
  101.                   letgoalProperty = GoalProperty(rawValue:keyString),
  102.                   letvalueString = value as? String else { return nil }
  103. result[goalProperty]= valueString
  104.         }
  105.         returnresult
  106.     }
  107. }
パート2 — Objective-Cブリッジファイル  

同じディレクトリーにPageSenseSDKModule.mを作成します。
  1. /ProjectRoot/ios/SampleApp/PageSenseSDKModule.m
  2. objc
  3. #import <React/RCTBridgeModule.h>
  4. @interface RCT_EXTERN_MODULE(PageSenseSDKModule,NSObject)
  5. RCT_EXTERN_METHOD(initialiseSDK:(NSString *)accountId
  6. sdkKey:(NSString *)sdkKey
  7. projectName:(NSString *)projectName
  8. resolver:(RCTPromiseResolveBlock)resolve
  9. rejecter:(RCTPromiseRejectBlock)reject)
  10. RCT_EXTERN_METHOD(activateExperimentByContext:(NSString *)experimentName
  11. userContext:(NSDictionary *)userContext
  12. resolver:(RCTPromiseResolveBlock)resolve
  13. rejecter:(RCTPromiseRejectBlock)reject)
  14. RCT_EXTERN_METHOD(getVariationNameByContext:(NSString *)experimentName
  15. userContext:(NSDictionary *)userContext
  16. resolver:(RCTPromiseResolveBlock)resolve
  17. rejecter:(RCTPromiseRejectBlock)reject)
  18. RCT_EXTERN_METHOD(trackGoalByContext:(NSString *)goalName
  19. userContext:(NSDictionary *)userContext)
  20. RCT_EXTERN_METHOD(trackGoalWithPropertiesByContext:(NSString *)goalName
  21. userContext:(NSDictionary *)userContext
  22. goalProperties:(NSDictionary *)goalProperties)
  23. @end
Objective-Cブリッジングヘッダーの追加  

SwiftとObjective-C間の通信を有効にするには、以下を行います。
  1. 次の場所にブリッジングヘッダーファイルを作成します。
/ProjectRoot/ios/SampleApp/SampleApp-Bridging-Header.h
  1. Xcodeでプロジェクトを開き、［Build Settings］に移動します。
  2. ［Objective-C Bridging Header］を見つけ、値を以下に設定します。
SampleApp/SampleApp-Bridging-Header.h

GoalPropertyのマッピング  


iOSでは、PageSense SDKはゴールプロパティを[GoalProperty: String]として受け取ります。ここでGoalPropertyは、PageSenseFrameworkによって公開される、小文字のraw値を持つ列挙型です。React Nativeブリッジは、JavaScriptからゴールプロパティをNSDictionaryとして受け取ります。これは文字列キー/valueのペアで構成され、各小文字の文字列キーを対応するGoalProperty列挙型ケースに、GoalProperty(rawValue:)を使用してマッピングします。
JavaScriptキー
文字列値
iOS GoalProperty列挙型ケース
GoalProperty.REVENUE
'revenue'
GoalProperty.revenue

ベストプラクティス  

  • SDKの初期化は、プロジェクトごとにアプリケーションのライフサイクル中に1回だけ行い、実験を有効化する前に実行してください。
  • SDKの初期化に失敗しても、UIのレンダリングをブロックしないでください。必ずフォールバックUIを使用してください。
  • アプリケーションセッション全体でPageSenseClientインスタンスを保持してください。
  • ユーザーごとに一意のユーザーIDを作成し、全体で再利用してください。
  • ユーザーセッションごとに1回だけPageSenseUserContextを構築し、SDK呼び出し全体で再利用してください。
  • 収益ゴールを追跡する場合は、収益額を必ずセント単位の文字列として渡してください。ドル金額に100を掛け、最も近い整数に丸めます。
  • ハードコードされた文字列ではなく、JavaScriptラッパーによってエクスポートされるGoalProperty定数を使用してください。小文字の文字列値は、iOSのGoalProperty列挙型のraw値に直接マッピングされます。
  • nullバリエーションは必ず処理し、安全なデフォルトUIにフォールバックしてください。
  • ネイティブモジュールには、UIの状態ではなくSDK関連のオブジェクトのみを保存してください。
  • 特定のユーザー操作またはイベントが正常に完了した後に、ゴールをトリガーしてください。
  • 新規連携ではすべて、コンテキストベースのSDK関数（activateExperimentByContext、getVariationNameByContext、trackGoalByContext）を使用してください。



このドキュメントは、各手順をスムーズに進められるように作成されています。さらにサポートが必要な場合やご質問がある場合は、support@zohopagesense.com - までお気軽にお問い合わせください。いつでもサポートいたします！




              Zoho Campaigns Resources

                Zoho WorkDrive Resources




                  • Desk Community Learning Series


                  • Digest


                  • Functions


                  • Meetups


                  • Kbase


                  • Resources


                  • Glossary


                  • Desk Marketplace


                  • MVP Corner


                  • Word of the Day


                  • Ask the Experts






                          Latest Feature Updates



                                  • Related Articles

                                  • PageSense Android SDK — React Nativeブリッジ連携ガイド

                                    お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 概要 このガイドでは、React Native Native Bridgeを使用して、PageSense Android SDKをReact Nativeアプリケーションに組み込む方法を説明します。このブリッジにより、React ...

                                  • PageSense React Native — SDK関数リファレンス

                                    お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 概要 このドキュメントでは、AndroidとiOSのReact Native連携の両方で共通して使用されるJavaScriptラッパー（PageSenseSDKWrapper.js）について説明します。このラッパーは、React Native Native ...

                                  • PageSense iOS SDKの概要

                                    お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 FullStack A/Bテストとは 従来のA/Bテストは、ボタンの色の変更、見出しの移動、レイアウトのテストなど、視覚的な要素を対象とします。FullStack ...

                                  • PageSense React Native — SDK のカスタマイズ

                                    お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 概要 PageSense SDKには、初期化時に設定できる設定オプションがあります。これにより、ログ出力の動作や、SDKが更新されたプロジェクト設定を取得する頻度を制御できます。これらのオプションはネイティブモジュールで設定し、AndroidとiOSの両方に適用されます。 ...

                                  • PageSense iOS SDKの初期化

                                    お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 開始する前に PageSenseClientは、テストの有効化、バリエーションの取得、目標の追跡など、あらゆる操作の中核となるインターフェースです。SDKを初期化するまで、これらの操作は実行できません。 ...

                                  Resources

                                  Videos

                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                  eBooks

                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                  Webinars

                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                  CRM Tips

                                  Make the most of Zoho CRM with these useful tips.