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

PageSense SDKの機能

PageSense SDKでは、次の関数を利用できます。

1. import { NativeModules } from 'react-native';
2. // Extract the native module exposed through the React Native bridge.
3. const { PageSenseSDKModule } = NativeModules;
4. /**
5.  * PageSenseSDKWrapper provides a JavaScript interface for interacting
6.  * with the PageSense SDK through the React Native Native Bridge.
7.  */
8. class PageSenseSDKWrapper {
9.     /**
10.      * Initialise the PageSense SDK. Should be called once during application startup.
11.      *
12.      * @param {string} accountId - PageSense account identifier.
13.      * @param {string} sdkKey - SDK key used for authentication.
14.      * @param {string} projectName - Name of the PageSense project.
15.      *
16.      * @returns {Promise<boolean>}
17.      * Returns:
18.      * - true → SDK initialized successfully
19.      * - false → initialization failed
20.      */
21.     async initialiseSDK(accountId, sdkKey, projectName) {
22.         try {
23.             this._validateString(accountId, 'accountId');
24.             this._validateString(sdkKey, 'sdkKey');
25.             this._validateString(projectName, 'projectName');
26.             const result = await PageSenseSDKModule.initialiseSDK(
27.                 accountId,
28.                 sdkKey,
29.                 projectName,
30.             );
31.             return result === true;
32.         } catch (error) {
33.             console.log('[PageSenseSDK] initialiseSDK error:', error);
34.             return false;
35.         }
36.     }
37.     /**
38.      * Activates an experiment and returns the assigned variation.
39.      *
40.      * @param {string} experimentName - Name of the experiment.

1. /**
2. * ルートアプリケーションコンポーネントは、React Native
3. * アプリケーションの起動時にPageSense SDKを初期化します。SDKの初期化処理が完了した後にのみ、アプリケーションUIがレンダリングされます。
4. * これにより、画面の読み込み時に実験をすぐに実行できます。
5. *
6. * @returns {JSX.Element}
7. */
8. export default function App() {
9. /**
10. * PageSense SDKの初期化が完了したかどうかを追跡します。
11. * @type {[boolean, Function]}
12. */
13. const [sdkReady, setSdkReady] = useState(false);
14. /**
15. * コンポーネントのマウント時に1回実行されます。
16. * ラッパー経由でPageSense SDKを初期化します。
17. */
18. useEffect(() => {
19. /**
20. * PageSense SDKクライアントを初期化します。
21. * @returns {Promise<void>}
22. */
23. async function initializeSDK() {
24. try {
25. // ネイティブのPageSenseクライアントを初期化するためにSDKラッパーを呼び出します
26. const result = await PageSenseSDKWrapper.initialiseSDK(
27. 'PAGESENSE_ACCOUNT_ID', // PageSenseアカウントID
28. 'PAGESENSE_SDK_KEY', // SDKキー
29. 'PAGESENSE_PROJECT_NAME', // プロジェクト名
30. );
31. console.log('PageSense SDKの初期化に成功しました：', result);
32. setSdkReady(true);
33. } catch (error) {
34. console.log('PageSense SDKの初期化エラー：', error);
35. // SDKの初期化に失敗しても、アプリの処理は続行します
36. setSdkReady(true);
37. }
38. }
39. initializeSDK();
40. }, []);
41. if (!sdkReady) {
42. return (
43. <View style={styles.loadingContainer}>
44. <ActivityIndicator size='large' />
45. <Text style={styles.loadingText}>アプリを初期化しています...</Text>
46. </View>
47. );
48. }
49. return (
50. ....アプリケーションUIの実装
51. );
52. }

実験の有効化

ユーザーが適切なバリエーションに割り当てられ、UIや機能に関連する変更がすぐに適用されるよう、画面の読み込み時に実験を実行する必要があります。これにより、画面がアクティブになると同時に実験がトリガーされ、一貫した動作と正確なバリエーション割り当てが実現します。たとえば、React Nativeコンポーネントでは、App.jsxやApp.js、または関連する画面コンポーネントのuseEffectなどのライフサイクルメソッド内で実験を呼び出すことで、画面のマウント時に1回実行できます。

1. /**
2. * 指定した実験の目標イベントをトラッキングします。
3. */
4. PageSenseSDKWrapper.trackGoal(
5. 'EXPERIMENT_NAME', // 目標イベントに関連付けられた実験
6. 'USER_ID', // 一意のユーザー識別子
7. 'GOAL_NAME', // PageSenseで定義された目標名
8. USER_ATTIBUTES); // PageSense SDKに渡される任意のユーザー属性 - （キー／値のペア）