Rork アプリのグロース戦略 — ユーザー獲得からリテンションまでの実装パターン

// src/hooks/useOnboarding.ts
import { useState, useEffect, useCallback } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";
 
interface OnboardingStep {
  id: string;
  trigger: "first_open" | "first_action" | "day_2" | "feature_discovery";
  title: string;
  description: string;
  targetElement?: string; // ツールチップの対象要素
  completed: boolean;
}
 
const ONBOARDING_STEPS: OnboardingStep[] = [
  {
    id: "welcome",
    trigger: "first_open",
    title: "ようこそ！",
    description: "3つのステップでアプリの使い方をご紹介します",
    completed: false,
  },
  {
    id: "create_first",
    trigger: "first_open",
    title: "最初のタスクを作成",
    description: "＋ボタンをタップして、最初のタスクを追加してみましょう",
    targetElement: "add-button",
    completed: false,
  },
  {
    id: "discover_ai",
    trigger: "first_action",
    title: "AIアシスタントを試す",
    description: "タスクを長押しすると、AIが優先度を提案します",
    targetElement: "task-item",
    completed: false,
  },
  {
    id: "notification_setup",
    trigger: "day_2",
    title: "リマインダーを設定",
    description: "通知を有効にすると、大切なタスクを忘れません",
    targetElement: "settings-icon",
    completed: false,
  },
];
 
export function useOnboarding() {
  const [steps, setSteps] = useState<OnboardingStep[]>(ONBOARDING_STEPS);
  const [currentStep, setCurrentStep] = useState<OnboardingStep | null>(null);
 
  useEffect(() => {
    loadProgress();
  }, []);
 
  const loadProgress = async () => {
    const saved = await AsyncStorage.getItem("onboarding_progress");
    if (saved) {
      const completed = JSON.parse(saved) as string[];
      setSteps((prev) =>
        prev.map((s) => ({
          ...s,
          completed: completed.includes(s.id),
        }))
      );
    }
  };
 
  const completeStep = useCallback(async (stepId: string) => {
    setSteps((prev) => {
      const updated = prev.map((s) =>
        s.id === stepId ? { ...s, completed: true } : s
      );
      const completedIds = updated.filter((s) => s.completed).map((s) => s.id);
      AsyncStorage.setItem(
        "onboarding_progress",
        JSON.stringify(completedIds)
      );
      return updated;
    });
    setCurrentStep(null);
  }, []);
 
  const getNextStep = useCallback(
    (trigger: OnboardingStep["trigger"]) => {
      return steps.find((s) => s.trigger === trigger && !s.completed) || null;
    },
    [steps]
  );
 
  return { steps, currentStep, setCurrentStep, completeStep, getNextStep };
}

// src/utils/analytics.ts
import AsyncStorage from "@react-native-async-storage/async-storage";
 
interface AnalyticsEvent {
  event: string;
  timestamp: string;
  properties?: Record<string, string | number | boolean>;
}
 
class AppAnalytics {
  private queue: AnalyticsEvent[] = [];
  private readonly BATCH_SIZE = 20;
  private readonly FLUSH_INTERVAL = 60000; // 60秒
 
  constructor() {
    // 定期的にバッチ送信
    setInterval(() => this.flush(), this.FLUSH_INTERVAL);
  }
 
  async track(event: string, properties?: Record<string, string | number | boolean>) {
    const analyticsEvent: AnalyticsEvent = {
      event,
      timestamp: new Date().toISOString(),
      properties: {
        ...properties,
        // コホート分析用: インストール日を常に付与
        install_date: await this.getInstallDate(),
        // セッション内の行動回数
        session_events: await this.getSessionEventCount(),
      },
    };
 
    this.queue.push(analyticsEvent);
 
    if (this.queue.length >= this.BATCH_SIZE) {
      await this.flush();
    }
  }
 
  private async getInstallDate(): Promise<string> {
    let date = await AsyncStorage.getItem("install_date");
    if (!date) {
      date = new Date().toISOString().split("T")[0];
      await AsyncStorage.setItem("install_date", date);
    }
    return date;
  }
 
  private async getSessionEventCount(): Promise<number> {
    const count = await AsyncStorage.getItem("session_event_count");
    const newCount = (parseInt(count || "0") + 1);
    await AsyncStorage.setItem("session_event_count", String(newCount));
    return newCount;
  }
 
  private async flush() {
    if (this.queue.length === 0) return;
 
    const events = [...this.queue];
    this.queue = [];
 
    try {
      // Supabase や Firebase にバッチ送信
      await fetch("https://your-api.example.com/analytics", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ events }),
      });
    } catch {
      // 送信失敗時はキューに戻す
      this.queue.unshift(...events);
    }
  }
}
 
export const analytics = new AppAnalytics();
 
// 使用例
// analytics.track("task_created", { category: "work" });
// analytics.track("ai_suggestion_accepted");
// analytics.track("premium_cta_viewed", { location: "settings" });

// src/services/notification-segments.ts
 
interface UserSegment {
  id: string;
  name: string;
  condition: (user: UserProfile) => boolean;
  notification: {
    title: string;
    body: string;
    timing: string; // cron 形式
    maxFrequency: "daily" | "weekly" | "biweekly";
  };
}
 
interface UserProfile {
  installDate: Date;
  lastActiveDate: Date;
  totalSessions: number;
  isPremium: boolean;
  features_used: string[];
}
 
const SEGMENTS: UserSegment[] = [
  {
    id: "new_inactive",
    name: "新規 × 非アクティブ（1-3日）",
    condition: (u) => {
      const daysSinceInstall = daysBetween(u.installDate, new Date());
      const daysSinceActive = daysBetween(u.lastActiveDate, new Date());
      return daysSinceInstall <= 3 && daysSinceActive >= 1;
    },
    notification: {
      title: "作成したタスクを確認しませんか？",
      body: "AIがあなたのタスクに新しい提案を用意しています ✨",
      timing: "0 10 * * *",      // 毎日10時
      maxFrequency: "daily",
    },
  },
  {
    id: "engaged_free",
    name: "アクティブ × 無料ユーザー",
    condition: (u) => {
      const daysSinceActive = daysBetween(u.lastActiveDate, new Date());
      return daysSinceActive <= 2 && !u.isPremium && u.totalSessions >= 5;
    },
    notification: {
      title: "今週のアクティビティレポート 📊",
      body: "先週より生産性が15%向上しました！詳細を見る",
      timing: "0 9 * * 1",       // 毎週月曜9時
      maxFrequency: "weekly",
    },
  },
  {
    id: "churning",
    name: "離脱リスク（7-14日間非アクティブ）",
    condition: (u) => {
      const daysSinceActive = daysBetween(u.lastActiveDate, new Date());
      return daysSinceActive >= 7 && daysSinceActive <= 14;
    },
    notification: {
      title: "お久しぶりです 👋",
      body: "新機能が追加されました。30秒で確認できます",
      timing: "0 18 * * 3",      // 水曜18時
      maxFrequency: "biweekly",
    },
  },
];
 
function daysBetween(a: Date, b: Date): number {
  return Math.floor((b.getTime() - a.getTime()) / (1000 * 60 * 60 * 24));
}
 
export function getUserSegments(user: UserProfile): UserSegment[] {
  return SEGMENTS.filter((s) => s.condition(user));
}

// src/features/referral/referralSystem.ts
import * as Sharing from "expo-sharing";
import AsyncStorage from "@react-native-async-storage/async-storage";
 
interface ReferralConfig {
  rewardForInviter: "premium_7days" | "feature_unlock" | "badge";
  rewardForInvitee: "premium_3days" | "feature_unlock";
  maxReferrals: number;
}
 
const REFERRAL_CONFIG: ReferralConfig = {
  rewardForInviter: "premium_7days",
  rewardForInvitee: "premium_3days",
  maxReferrals: 20,
};
 
export async function generateReferralLink(userId: string): Promise<string> {
  // ユニークなリファラルコードを生成
  const code = `ref_${userId}_${Date.now().toString(36)}`;
  await AsyncStorage.setItem("my_referral_code", code);
 
  // ディープリンク付きの共有URL
  return `https://myapp.example.com/invite?ref=${code}&utm_source=referral&utm_medium=share`;
}
 
export async function shareApp(userId: string): Promise<void> {
  const link = await generateReferralLink(userId);
 
  const message = [
    "このアプリ、AIがタスクを自動で整理してくれてすごく便利！",
    "招待リンクから登録すると、プレミアム機能を3日間無料で試せます 🎁",
    "",
    link,
  ].join("\n");
 
  if (await Sharing.isAvailableAsync()) {
    await Sharing.shareAsync(link, {
      dialogTitle: "友達にアプリを紹介",
      mimeType: "text/plain",
    });
  }
}
 
// 期待される出力:
// 共有ダイアログが表示され、ユーザーが選択したアプリ（LINE, X, メール等）で
// リファラルリンク付きのメッセージが送信される

// src/utils/funnel.ts
 
type FunnelStep =
  | "app_opened"
  | "onboarding_started"
  | "first_task_created"
  | "ai_feature_used"
  | "notification_enabled"
  | "day_3_retained"
  | "premium_viewed"
  | "premium_purchased";
 
const FUNNEL_ORDER: FunnelStep[] = [
  "app_opened",
  "onboarding_started",
  "first_task_created",
  "ai_feature_used",
  "notification_enabled",
  "day_3_retained",
  "premium_viewed",
  "premium_purchased",
];
 
export async function trackFunnelStep(step: FunnelStep) {
  const funnelData = await AsyncStorage.getItem("funnel_data");
  const data: Record<string, string> = funnelData
    ? JSON.parse(funnelData)
    : {};
 
  if (!data[step]) {
    data[step] = new Date().toISOString();
    await AsyncStorage.setItem("funnel_data", JSON.stringify(data));
 
    // バックエンドに送信
    analytics.track("funnel_step", {
      step,
      step_index: FUNNEL_ORDER.indexOf(step),
      time_since_install: getTimeSinceInstall(),
    });
  }
}
 
function getTimeSinceInstall(): number {
  // インストールからの経過秒数を返す
  return 0; // 実装省略
}
 
// 使用例:
// ユーザーが初めてタスクを作成したとき
// trackFunnelStep("first_task_created");