Rork × PostHog でユーザー行動を可視化する — 離脱地点が見えるまでの導入手順

ダウンロード数の先が見えないという問題

アプリをリリースした後、「どの画面でユーザーが離脱しているのか」「新機能は実際に使われているのか」といった疑問を持ったことはないでしょうか。App Store Connect のデータはダウンロード数や収益の把握には役立ちますが、アプリ内でのユーザーの行動を細かく追うには力不足です。

そこで活躍するのがプロダクトアナリティクスツールです。ここではオープンソースかつ高機能な PostHog を Rork アプリに導入し、ユーザー行動の可視化・分析を始める方法をステップバイステップで解説します。

この記事で学べること：

PostHog の特長と料金体系
Rork（React Native / Expo）プロジェクトへの SDK 導入手順
基本的なイベントトラッキングの実装
ユーザー識別（identify）の設定
ファネル分析とフィーチャーフラグの活用

PostHog とは

PostHog は、製品チームがユーザー行動を理解するために必要な機能を一つのプラットフォームに集約した、オープンソースのプロダクトアナリティクスツールです。

主な機能は次の通りです。

イベント分析: 任意のユーザーアクションをトラッキングし、グラフやファネルで可視化できます
セッションリプレイ: ユーザーが実際にどのように画面を操作したかを録画して確認できます（モバイルでは対応プラットフォームに制限あり）
ファネル分析: 「登録→プロフィール設定→課金」といった複数ステップの完了率を把握できます
フィーチャーフラグ: コードを変更せずに特定のユーザーグループだけに新機能を公開できます
A/B テスト: 異なる UI や文言の効果を定量的に比較できます

料金は月間 100 万イベントまで無料（クラウド版）で、個人開発・スモールビジネスには十分な規模です。また、セルフホスト版（Docker）を利用すれば、データを自社サーバーで管理することも可能です。

類似ツールとして Mixpanel・Amplitude がありますが、PostHog はオープンソースである点と、フィーチャーフラグ・セッションリプレイ・A/B テストをすべて無料枠で使える点が大きな魅力です。

Step 1: PostHog アカウントの作成と API キーの取得

まず PostHog クラウドにアクセスし、アカウントを作成します。

アカウント作成後、プロジェクトを新規作成し、Project API key（phc_ で始まる文字列）を取得します。この API キーは後で使用するため、安全な場所に控えておきましょう。

API キーは PostHog ダッシュボードの「Settings → Project → Project API Key」から確認できます。

Step 2: SDK のインストール

Rork プロジェクトのターミナルで以下のコマンドを実行します。

# posthog-react-native SDK のインストール
npm install posthog-react-native
 
# Expo を使用している場合は追加パッケージも必要
npx expo install expo-file-system expo-application expo-device expo-localization

インストールが完了したら、アプリのエントリーポイント（App.tsx または _layout.tsx）に PostHog プロバイダーを追加します。

// app/_layout.tsx（Expo Router の場合）
import { PostHogProvider } from 'posthog-react-native';
 
export default function RootLayout() {
  return (
    <PostHogProvider
      apiKey="YOUR_POSTHOG_API_KEY"  // phc_ で始まるプロジェクトAPI キー
      options={{
        host: 'https://us.i.posthog.com',  // EU リージョンは https://eu.i.posthog.com
      }}
    >
      {/* 既存のレイアウトコンポーネント */}
      <Stack />
    </PostHogProvider>
  );
}

注意: YOUR_POSTHOG_API_KEY の部分は、環境変数（.env ファイルの EXPO_PUBLIC_POSTHOG_KEY）を使って管理することをおすすめします。コードに直接埋め込む場合でも、phc_ で始まる PostHog の公開 API キーは秘密情報ではなくクライアントサイド向けに設計されており、GitHub Secret Scanning の対象外です。

Step 3: 基本的なイベントトラッキング

SDK の設定が完了したら、ユーザーの行動を記録するイベントを実装します。usePostHog フックを使って、任意のコンポーネントからイベントを送信できます。

// components/SubscribeButton.tsx
import { TouchableOpacity, Text } from 'react-native';
import { usePostHog } from 'posthog-react-native';
 
export function SubscribeButton() {
  const posthog = usePostHog();
 
  const handlePress = () => {
    // イベントのキャプチャ（第2引数でプロパティを付与）
    posthog.capture('subscribe_button_tapped', {
      screen: 'HomeScreen',
      plan: 'pro',
    });
 
    // 実際の課金処理をここに実装
  };
 
  return (
    <TouchableOpacity onPress={handlePress}>
      <Text>Pro プランに登録する</Text>
    </TouchableOpacity>
  );
}

イベント名はスネークケース（subscribe_button_tapped）で統一することが推奨されています。プロパティには画面名・ユーザーの属性・セッション情報など、分析に役立つ情報を自由に追加できます。

Step 4: ユーザー識別（identify）の設定

匿名ユーザーとして記録されたイベントを、ログイン後に特定のユーザーに紐付けるには identify メソッドを使います。

// hooks/useAuth.ts
import { usePostHog } from 'posthog-react-native';
 
export function useAuth() {
  const posthog = usePostHog();
 
  const signIn = async (userId: string, email: string) => {
    // サインイン処理（Firebase Auth や Supabase Auth など）
    await performSignIn(userId);
 
    // PostHog にユーザー情報を紐付け
    posthog.identify(userId, {
      email: email,
      plan: 'free',            // ユーザーの属性情報
      created_at: new Date().toISOString(),
    });
  };
 
  const signOut = async () => {
    await performSignOut();
 
    // サインアウト時は reset() でセッションを切る
    posthog.reset();
  };
 
  return { signIn, signOut };
}

identify を呼び出すことで、サインイン前後のイベントが同一ユーザーの行動として結合され、より正確なユーザージャーニーの分析が可能になります。

Step 5: ファネル分析で離脱ポイントを把握する

ファネル分析は、複数ステップからなるユーザーフローの完了率を把握するための機能です。たとえば「オンボーディング → 会員登録 → 課金完了」というフローで、どのステップで最も離脱が起きているかを可視化できます。

実装は非常にシンプルで、各ステップでイベントをキャプチャするだけです。

// screens/Onboarding.tsx — オンボーディング画面の各ステップ
const handleStep1Complete = () => {
  posthog.capture('onboarding_step1_completed'); // プロフィール設定完了
  setStep(2);
};
 
const handleStep2Complete = () => {
  posthog.capture('onboarding_step2_completed'); // 通知設定完了
  setStep(3);
};
 
const handleOnboardingComplete = () => {
  posthog.capture('onboarding_completed');       // オンボーディング全体完了
  router.push('/home');
};

PostHog ダッシュボードの「Funnels」セクションでこれらのイベントを順番に並べると、各ステップの通過率と離脱率が自動的に算出されます。

より詳細なユーザー行動の分析手法については、Rork アプリパフォーマンス最適化完全ガイドも参考にしてみてください。ユーザー体験の改善とパフォーマンス最適化は密接に関連しています。

Step 6: フィーチャーフラグで安全に新機能をリリースする

フィーチャーフラグを使うと、アプリをアップデートすることなく、特定のユーザーグループだけに新機能を公開できます。これにより、新機能が本当に効果的かどうかを小規模なグループで検証してからロールアウトすることが可能になります。

// components/NewFeatureBanner.tsx
import { useFeatureFlagEnabled } from 'posthog-react-native';
 
export function NewFeatureBanner() {
  // PostHog ダッシュボードで 'new-dashboard-ui' というフラグを作成しておく
  const isEnabled = useFeatureFlagEnabled('new-dashboard-ui');
 
  if (!isEnabled) return null;
 
  return (
    <View>
      <Text>✨ 新しいダッシュボードをお試しください！</Text>
    </View>
  );
}

PostHog ダッシュボードから、フラグを有効にするユーザーの割合（例: 全体の 10%）や、特定のユーザーグループ（例: plan = 'pro' のユーザー）を指定できます。

まとめ

PostHog を Rork アプリに導入することで、ユーザーの行動を定量的に把握し、改善の優先順位を根拠ある数字で判断できるようになります。

今回紹介した内容をまとめると次の通りです。

PostHog はイベント分析・ファネル・フィーチャーフラグを無料枠で利用できる強力なプロダクトアナリティクスツール
posthog-react-native SDK を使えば Rork（Expo）プロジェクトに数ステップで導入できる
capture でイベントを記録し、identify でユーザーに紐付けることで精度の高い分析が可能になる
ファネル分析で離脱ポイントを特定し、フィーチャーフラグで安全に新機能を検証できる

アプリの「感覚」ではなく「データ」に基づいた意思決定は、個人開発者が限られたリソースを最大限に活かすための重要なスキルです。ぜひ本記事を参考に、自分のアプリに PostHog を導入してみてください。

データ活用をさらに深めたい方には、Rork × RevenueCAT 課金完全実装ガイドもあわせておすすめします。収益データと行動データを組み合わせることで、より精度の高い改善施策が立てられます。