Rork × Mixpanel 完全導入ガイド：ユーザー行動分析でリテンションとLTVを最大化する

# Mixpanel React Native SDK をインストール
npx expo install mixpanel-react-native

import { Mixpanel } from 'mixpanel-react-native';
import { useEffect } from 'react';
 
// Mixpanelインスタンスをシングルトンとして管理
const trackAutomaticEvents = true;
export const mixpanel = new Mixpanel(
  process.env.EXPO_PUBLIC_MIXPANEL_TOKEN ?? '',
  trackAutomaticEvents
);
 
export default function RootLayout() {
  useEffect(() => {
    // アプリ起動時に初期化
    mixpanel.init();
    // 開発環境ではデバッグログを有効化
    if (__DEV__) {
      mixpanel.setLoggingEnabled(true);
    }
  }, []);
 
  // ... 以下にナビゲーション等の設定
}

# .env.local（Gitにコミットしないこと）
EXPO_PUBLIC_MIXPANEL_TOKEN=YOUR_MIXPANEL_PROJECT_TOKEN

import { mixpanel } from '../app/_layout';
 
// シンプルなイベント送信
mixpanel.track('Button Tapped', {
  screen: 'HomeScreen',
  button_name: 'Start Free Trial',
});
 
// ユーザーがサブスクリプションを開始した場合
mixpanel.track('Subscription Started', {
  plan: 'pro_monthly',
  price_usd: 2.99,
  trial_days: 7,
});
 
// 記事の閲覧イベント
mixpanel.track('Article Viewed', {
  article_id: 'rork-mixpanel-guide',
  category: 'analytics',
  reading_time_seconds: 0, // スクロール完了時に更新
});

// hooks/useTracking.ts
import { useCallback } from 'react';
import { mixpanel } from '../app/_layout';
 
type EventProperties = Record<string, string | number | boolean>;
 
export function useTracking() {
  const track = useCallback((eventName: string, properties?: EventProperties) => {
    try {
      mixpanel.track(eventName, properties);
    } catch (error) {
      // トラッキングエラーでアプリをクラッシュさせない
      console.warn('[Tracking] Failed to track event:', eventName, error);
    }
  }, []);
 
  const trackScreenView = useCallback((screenName: string) => {
    track('Screen Viewed', { screen_name: screenName });
  }, [track]);
 
  return { track, trackScreenView };
}

// screens/PremiumScreen.tsx
import { useTracking } from '../hooks/useTracking';
 
export function PremiumScreen() {
  const { track, trackScreenView } = useTracking();
 
  useEffect(() => {
    // 画面表示時のトラッキング
    trackScreenView('PremiumScreen');
  }, [trackScreenView]);
 
  const handleUpgrade = () => {
    // ボタンタップ時のトラッキング
    track('Upgrade Button Tapped', {
      source: 'premium_screen',
      current_plan: 'free',
    });
    // ... 決済処理
  };
 
  return (
    // ... UIコンポーネント
  );
}

import { mixpanel } from '../app/_layout';
 
// ログイン成功時にユーザーを識別
function onLoginSuccess(userId: string, userProfile: UserProfile) {
  // ユーザーIDを設定（以降のイベントはこのIDに紐付く）
  mixpanel.identify(userId);
 
  // ユーザープロパティを設定
  mixpanel.getPeople().set({
    $name: userProfile.displayName,     // Mixpanel予約プロパティ（$付き）
    $email: userProfile.email,
    $created: userProfile.createdAt,
    plan: userProfile.subscriptionPlan, // カスタムプロパティ
    country: userProfile.country,
    app_version: '1.2.0',
  });
 
  // ログインイベントをトラッキング
  mixpanel.track('User Logged In', {
    method: 'email', // or 'apple', 'google'
  });
}
 
// ログアウト時のリセット
function onLogout() {
  mixpanel.track('User Logged Out');
  // 匿名IDをリセット（次のセッションは別ユーザーとして扱う）
  mixpanel.reset();
}

// セッションカウントを1増やす
mixpanel.getPeople().increment('session_count', 1);
 
// 課金額の累積（LTV計算に使用）
mixpanel.getPeople().increment('total_revenue_usd', 2.99);

# 開発ビルドの作成
npx expo run:ios
# または
npx expo run:android