Rork アプリで広告アトリビューションを正確に測る実装 — AppsFlyer・Adjust・SKAdNetwork 4.0・ATT 統合

# Step 1: 依存パッケージの追加
npx expo install react-native-appsflyer
 
# Step 2: app.json に Config Plugin を登録（必須）
# プラグインが Info.plist に SKAdNetworkItems を自動注入する

{
  "expo": {
    "plugins": [
      [
        "react-native-appsflyer",
        {
          "shouldUseStrictMode": true
        }
      ]
    ],
    "ios": {
      "infoPlist": {
        "NSUserTrackingUsageDescription": "あなたに合った広告とコンテンツをお届けするために、限定的な情報を計測させてください。設定からいつでも変更できます。"
      }
    }
  }
}

// src/lib/attribution.ts
import appsFlyer from 'react-native-appsflyer';
import { getTrackingPermissionsAsync, requestTrackingPermissionsAsync, PermissionStatus } from 'expo-tracking-transparency';
import { Platform } from 'react-native';
 
const APPSFLYER_DEV_KEY = process.env.EXPO_PUBLIC_APPSFLYER_DEV_KEY!;
const APPSFLYER_APP_ID = process.env.EXPO_PUBLIC_APPSFLYER_APP_ID!; // App Store の数値ID
 
export async function initAttribution(): Promise<void> {
  // 1. ATT のステータスを最終確定させる（許諾済み/拒否済みなら何もしない）
  if (Platform.OS === 'ios') {
    const current = await getTrackingPermissionsAsync();
    if (current.status === PermissionStatus.UNDETERMINED) {
      // 必要に応じて事前説明 UI を出してから次の関数を呼ぶ
      await requestTrackingPermissionsAsync();
    }
  }
 
  // 2. ATT 確定後に SDK を初期化（順序が逆だと IDFA を取りこぼす）
  return new Promise((resolve, reject) => {
    appsFlyer.initSdk(
      {
        devKey: APPSFLYER_DEV_KEY,
        isDebug: __DEV__,
        appId: APPSFLYER_APP_ID,
        onInstallConversionDataListener: true, // 初回インストール属性を取得
        onDeepLinkListener: true,              // OneLink ディープリンクをハンドリング
        timeToWaitForATTUserAuthorization: 60, // ATT 許諾待ち最大秒数
      },
      (result) => {
        console.log('[Attribution] init success', result);
        resolve();
      },
      (error) => {
        console.warn('[Attribution] init failed', error);
        reject(error);
      },
    );
  });
}

// src/lib/conversion-value.ts
import appsFlyer from 'react-native-appsflyer';
 
type Event =
  | 'app_open'
  | 'onboarding_completed'
  | 'first_content_view'
  | 'account_created'
  | 'trial_started';
 
const SCORE_MAP: Record<Event, number> = {
  app_open: 1,
  onboarding_completed: 4,
  first_content_view: 8,
  account_created: 16,
  trial_started: 32,
};
 
let cumulativeScore = 0;
 
export async function reportEvent(event: Event, payload?: Record<string, unknown>): Promise<void> {
  // 1. AppsFlyer に通常イベントを送信（ダッシュボードで分析用）
  appsFlyer.logEvent(event, payload ?? {}, () => {}, (err) => {
    console.warn('[Attribution] logEvent error', err);
  });
 
  // 2. SKAN 用に累積スコアを更新（既存値より下げない）
  const next = Math.min(63, cumulativeScore + SCORE_MAP[event]);
  if (next > cumulativeScore) {
    cumulativeScore = next;
    appsFlyer.updateConversionValueWithErrorCallback(
      next,
      (e) => console.warn('[Attribution] updateCV error', e),
    );
  }
}

// src/components/PrePromptATT.tsx
import { useEffect, useState } from 'react';
import { Modal, Text, View, Pressable, StyleSheet } from 'react-native';
import { getTrackingPermissionsAsync, requestTrackingPermissionsAsync, PermissionStatus } from 'expo-tracking-transparency';
import { initAttribution } from '../lib/attribution';
 
export function PrePromptATT() {
  const [visible, setVisible] = useState(false);
 
  useEffect(() => {
    (async () => {
      const { status } = await getTrackingPermissionsAsync();
      if (status === PermissionStatus.UNDETERMINED) setVisible(true);
    })();
  }, []);
 
  const onAllow = async () => {
    setVisible(false);
    await requestTrackingPermissionsAsync(); // ここで OS のダイアログが出る
    await initAttribution();                  // 許諾結果が確定してから SDK を立ち上げる
  };
 
  if (!visible) return null;
 
  return (
    <Modal animationType="fade" transparent>
      <View style={styles.backdrop}>
        <View style={styles.card}>
          <Text style={styles.title}>あなたに合ったおすすめのために</Text>
          <Text style={styles.body}>
            次の画面で「許可」を選んでいただくと、興味に近いコンテンツや
            お得な情報を表示できるようになります。設定からいつでも変更できます。
          </Text>
          <Pressable onPress={onAllow} style={styles.cta}>
            <Text style={styles.ctaText}>つづける</Text>
          </Pressable>
        </View>
      </View>
    </Modal>
  );
}
 
const styles = StyleSheet.create({
  backdrop: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', padding: 24 },
  card: { backgroundColor: '#fff', borderRadius: 16, padding: 24 },
  title: { fontSize: 18, fontWeight: '700', marginBottom: 8 },
  body: { fontSize: 14, lineHeight: 22, color: '#444', marginBottom: 16 },
  cta: { backgroundColor: '#000', paddingVertical: 14, borderRadius: 12, alignItems: 'center' },
  ctaText: { color: '#fff', fontSize: 15, fontWeight: '600' },
});

// src/lib/deep-link.ts
import appsFlyer from 'react-native-appsflyer';
import { router } from 'expo-router';
 
let unsubscribeOnDeepLink: (() => void) | null = null;
 
export function setupDeepLinking() {
  // OneLink からのリンクを受け取り、適切な画面へ遷移
  unsubscribeOnDeepLink = appsFlyer.onDeepLink((res) => {
    if (res.deepLinkStatus !== 'FOUND') return;
    const data = res.data as { deep_link_value?: string; sub1?: string };
 
    // deep_link_value にスキーマを定義（例: "campaign:summer-sale"）
    if (data.deep_link_value?.startsWith('campaign:')) {
      const campaignId = data.deep_link_value.split(':')[1];
      router.push(`/campaign/${campaignId}` as never);
      return;
    }
 
    if (data.deep_link_value?.startsWith('content:')) {
      const contentId = data.deep_link_value.split(':')[1];
      router.push(`/content/${contentId}` as never);
    }
  });
 
  // 念のため初回インストール時の Conversion Data も拾う
  appsFlyer.onInstallConversionData((res) => {
    if (res.data?.is_first_launch === 'true' && res.data?.deep_link_value) {
      const value = String(res.data.deep_link_value);
      console.log('[DeepLink] first launch with', value);
    }
  });
}
 
export function teardownDeepLinking() {
  unsubscribeOnDeepLink?.();
  unsubscribeOnDeepLink = null;
}

// src/lib/attribution-debug.ts
import appsFlyer from 'react-native-appsflyer';
 
/**
 * 本番リリース直前にだけ呼び出すデバッグ用ヘルパー。
 * Test Devices 登録後にこの関数を1度実行し、
 * AppsFlyer 管理画面の Live Events に表示されるか確認する。
 */
export function fireDebugEvents() {
  if (!__DEV__) return; // 本番ビルドでは絶対に実行しない
  appsFlyer.logEvent('debug_app_open', { source: 'self_test' }, () => {}, () => {});
  appsFlyer.logEvent('debug_onboarding_completed', { variant: 'A' }, () => {}, () => {});
  appsFlyer.logEvent('debug_account_created', { provider: 'apple' }, () => {}, () => {});
}

// src/lib/attribution-adjust.ts
import { Adjust, AdjustConfig, AdjustEvent } from 'react-native-adjust';
 
export function initAdjust(appToken: string) {
  const config = new AdjustConfig(appToken, AdjustConfig.EnvironmentProduction);
  config.setLogLevel(__DEV__ ? AdjustConfig.LogLevelDebug : AdjustConfig.LogLevelError);
  config.setAttributionCallbackListener((attribution) => {
    console.log('[Adjust] attribution', attribution);
  });
  Adjust.create(config);
}
 
export function trackPurchase(eventToken: string, amount: number, currency: string) {
  const event = new AdjustEvent(eventToken);
  event.setRevenue(amount, currency);
  // Conversion Value の更新は OS 側に任せ、媒体別の解析はコールバックパラメータで管理する
  event.addCallbackParameter('plan_id', 'pro_monthly');
  Adjust.trackEvent(event);
}

// src/lib/revenuecat-skan-bridge.ts
import Purchases, { CustomerInfo } from 'react-native-purchases';
import { reportEvent } from './conversion-value';
 
export function bindRevenueCatToSKAN() {
  Purchases.addCustomerInfoUpdateListener((info: CustomerInfo) => {
    const active = info.entitlements.active['pro'];
    if (active) {
      if (active.periodType === 'trial') {
        void reportEvent('trial_started', { product: active.productIdentifier });
      } else {
        // 本課金開始時は累積スコアを最大値（63）にクランプして、媒体側の ROAS 最大値を確実に反映
        void reportEvent('trial_started', { product: active.productIdentifier });
      }
    }
  });
}

// Cloudflare Workers — SKAN postback receiver
export default {
  async fetch(request: Request, env: { SKAN_KV: KVNamespace }): Promise<Response> {
    if (request.method !== 'POST') return new Response('OK', { status: 200 });
    const payload = await request.json<Record<string, unknown>>();
 
    // 必要最小限のスキーマで保存（個人情報は含めない）
    const key = `${payload['source-app-id'] ?? 'unknown'}:${payload['transaction-id']}`;
    await env.SKAN_KV.put(key, JSON.stringify(payload), {
      expirationTtl: 60 * 60 * 24 * 90, // 90 日保存
    });
    return new Response('stored', { status: 200 });
  },
};