Rork + Superwall でペイウォールをA/Bテストして課金率を高める実装ガイド

# npm の場合
npm install @superwall/superwall-reactnative
 
# yarn の場合
yarn add @superwall/superwall-reactnative

# EAS Build でdevelopment buildを作成
eas build --profile development --platform ios

import Superwall from '@superwall/superwall-reactnative';
import { Platform } from 'react-native';
 
// App.tsx または app/_layout.tsx
const SUPERWALL_API_KEY = Platform.OS === 'ios'
  ? 'pk_ios_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'   // SuperwallダッシュボードのiOS APIキー
  : 'pk_android_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; // Android APIキー
 
// 環境変数で管理することを推奨
// const SUPERWALL_API_KEY = process.env.EXPO_PUBLIC_SUPERWALL_API_KEY;
 
Superwall.configure(SUPERWALL_API_KEY);

import Superwall from '@superwall/superwall-reactnative';
 
// プレミアム機能ボタンを押した時にペイウォールを表示
const handlePremiumFeature = async () => {
  await Superwall.shared.register('premium_feature_tapped');
  // register() の後に続くコードは、ユーザーがサブスクライブした場合のみ実行される
  // (Superwallがサブスクリプション状態を自動的に確認する)
  navigateToPremiumFeature();
};

// 機能ごとに異なるplacementを使用
const placements = {
  // AIチャット機能を使おうとした時
  aiChat: 'ai_chat_gate',
  // エクスポート機能を使おうとした時
  exportData: 'export_feature_gate',
  // 設定画面のUpgradeボタン
  settingsUpgrade: 'settings_upgrade_tapped',
};
 
// 使用例
await Superwall.shared.register(placements.aiChat);

import Superwall, {
  PurchaseController,
  PurchaseResult,
  RestorationResult,
} from '@superwall/superwall-reactnative';
import Purchases from 'react-native-purchases'; // RevenueCat
 
class RCPurchaseController extends PurchaseController {
  // サブスクリプションの購入
  async purchaseFromAppStore(productId: string): Promise<PurchaseResult> {
    try {
      const { customerInfo } = await Purchases.purchaseStoreProduct(
        // productIdからStoreProductを取得する必要がある
        // 実際の実装ではSuperwallから渡されるproductを使う
        { productIdentifier: productId } as any
      );
 
      // 購入後のサブスクリプション状態をチェック
      if (
        customerInfo.entitlements.active['pro'] \!== undefined
      ) {
        return PurchaseResult.Purchased;
      }
      return PurchaseResult.Cancelled;
    } catch (error: any) {
      if (error.userCancelled) {
        return PurchaseResult.Cancelled;
      }
      return PurchaseResult.Failed;
    }
  }
 
  // 購入履歴の復元
  async restorePurchases(): Promise<RestorationResult> {
    try {
      const customerInfo = await Purchases.restorePurchases();
      if (Object.keys(customerInfo.entitlements.active).length > 0) {
        return RestorationResult.Restored;
      }
      return RestorationResult.NothingToRestore;
    } catch {
      return RestorationResult.Failed;
    }
  }
}
 
// App初期化時にPurchaseControllerを渡す
const controller = new RCPurchaseController();
Superwall.configure(SUPERWALL_API_KEY, { purchaseController: controller });

import Superwall, {
  SuperwallEventInfo,
  SuperwallDelegate,
} from '@superwall/superwall-reactnative';
import { Mixpanel } from 'mixpanel-react-native'; // Mixpanelの例
 
class AnalyticsDelegate extends SuperwallDelegate {
  async handleSuperwallEvent(eventInfo: SuperwallEventInfo): Promise<void> {
    // Superwallが発火するイベントをMixpanelに転送
    const { event } = eventInfo;
 
    switch (event.type) {
      case 'paywallOpen':
        Mixpanel.track('Paywall Viewed', {
          placement: event.paywallInfo.identifier,
          experiment: event.paywallInfo.experiment?.id,
          variant: event.paywallInfo.experiment?.variant.id,
        });
        break;
 
      case 'transactionComplete':
        Mixpanel.track('Purchase Completed', {
          placement: event.paywallInfo.identifier,
          productId: event.transaction?.productIdentifier,
          amount: event.transaction?.price,
        });
        break;
 
      case 'paywallClose':
        Mixpanel.track('Paywall Dismissed', {
          placement: event.paywallInfo.identifier,
          closedByUser: true,
        });
        break;
    }
  }
}
 
// delegateを設定
Superwall.shared.delegate = new AnalyticsDelegate();