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);
      },
    );
  });
}

// ❌ 私が最初に書いた版。動くように見えて、二か所で計測を失います
let cumulativeScore = 0;
 
export async function reportEvent(event: Event): Promise<void> {
  const next = Math.min(63, cumulativeScore + SCORE_MAP[event]);
  if (next > cumulativeScore) {
    cumulativeScore = next;
    appsFlyer.updateConversionValueWithErrorCallback(next, (e) => console.warn(e));
  }
}

// src/lib/conversion-value.ts
import AsyncStorage from '@react-native-async-storage/async-storage';
import appsFlyer from 'react-native-appsflyer';
import { updateSkanConversionValue, type CoarseValue } from './skan';
 
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,
};
 
const STORE_KEY = 'skan:cumulative-fine';
 
// fine の到達点から coarse を決めます。しきい値は自分の LTV 分布に合わせて調整してください
function toCoarse(fine: number): CoarseValue {
  if (fine >= 32) return 'high';   // 課金トライアル到達
  if (fine >= 8) return 'medium';  // 初回コンテンツ閲覧以降
  return 'low';
}
 
async function readScore(): Promise<number> {
  const raw = await AsyncStorage.getItem(STORE_KEY);
  const parsed = Number(raw);
  return Number.isFinite(parsed) ? parsed : 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. 累積スコアはストレージから読み直す（プロセス内変数だと再起動で 0 に戻ります）
  const current = await readScore();
  const next = Math.min(63, current + SCORE_MAP[event]);
  if (next <= current) return;
 
  await AsyncStorage.setItem(STORE_KEY, String(next));
 
  // 3. fine と coarse を同時に更新する。トライアル到達時は window を閉じて即座に送出させる
  await updateSkanConversionValue({
    fine: next,
    coarse: toCoarse(next),
    lockWindow: event === 'trial_started',
  });
}

// modules/skan/ios/SkanModule.swift — Expo Modules API の薄いブリッジ
import ExpoModulesCore
import StoreKit
 
public class SkanModule: Module {
  public func definition() -> ModuleDefinition {
    Name("Skan")
 
    AsyncFunction("update") { (fine: Int, coarse: String, lockWindow: Bool, promise: Promise) in
      // iOS 16.1 未満は coarse の概念そのものが無いため fine だけを送ります
      guard #available(iOS 16.1, *) else {
        if #available(iOS 15.4, *) {
          SKAdNetwork.updatePostbackConversionValue(fine) { error in
            if let error { promise.reject("skan", error.localizedDescription) } else { promise.resolve(nil) }
          }
        } else {
          promise.resolve(nil)
        }
        return
      }
 
      let coarseValue: SKAdNetwork.CoarseConversionValue = {
        switch coarse {
        case "high": return .high
        case "medium": return .medium
        default: return .low
        }
      }()
 
      SKAdNetwork.updatePostbackConversionValue(fine, coarseValue: coarseValue, lockWindow: lockWindow) { error in
        if let error { promise.reject("skan", error.localizedDescription) } else { promise.resolve(nil) }
      }
    }
  }
}

// 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 — react-native-adjust v5 系
import { Adjust, AdjustConfig, AdjustEvent } from 'react-native-adjust';
 
export function initAdjust(appToken: string) {
  const config = new AdjustConfig(
    appToken,
    __DEV__ ? AdjustConfig.EnvironmentSandbox : AdjustConfig.EnvironmentProduction,
  );
  config.setLogLevel(__DEV__ ? AdjustConfig.LogLevelDebug : AdjustConfig.LogLevelError);
  config.setAttributionCallbackListener((attribution) => {
    console.log('[Adjust] attribution', attribution);
  });
  // v4 では Adjust.create(config) でした。v5 で initSdk に変わっています
  Adjust.initSdk(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/attribution-store.ts — Adjust のアトリビューションを一度だけ保存して使い回す
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Adjust, AdjustConfig } from 'react-native-adjust';
 
const KEY = 'adjust:attribution';
 
type StoredAttribution = {
  network: string;
  campaign: string;
  adgroup: string;
  creative: string;
  savedAt: number;
};
 
export function attachAttributionStore(config: AdjustConfig): void {
  // initSdk より前に呼ぶこと。後からでは受け取れません
  config.setAttributionCallbackListener(async (attribution) => {
    const next: StoredAttribution = {
      network: attribution.network || 'unknown',
      campaign: attribution.campaign || 'unknown',
      adgroup: attribution.adgroup || 'unknown',
      creative: attribution.creative || 'unknown',
      savedAt: Date.now(),
    };
    // 内容が変わったときにも呼ばれるため、上書き保存で最新を保ちます
    await AsyncStorage.setItem(KEY, JSON.stringify(next));
  });
}
 
export async function readStoredAttribution(): Promise<StoredAttribution | null> {
  const raw = await AsyncStorage.getItem(KEY);
  return raw ? (JSON.parse(raw) as StoredAttribution) : null;
}

// src/lib/revenuecat-skan-bridge.ts
import AsyncStorage from '@react-native-async-storage/async-storage';
import Purchases, { CustomerInfo } from 'react-native-purchases';
import { reportEvent } from './conversion-value';
 
const SENT_KEY_PREFIX = 'skan:sent:';
 
// リスナーはリニューアルでも発火します。同じイベントを二度送らないための門番です
async function sendOnce(event: 'trial_started' | 'paid_started', payload: Record<string, unknown>) {
  const key = `${SENT_KEY_PREFIX}${event}`;
  if (await AsyncStorage.getItem(key)) return;
  await AsyncStorage.setItem(key, '1');
  await reportEvent(event, payload);
}
 
export function bindRevenueCatToSKAN() {
  Purchases.addCustomerInfoUpdateListener((info: CustomerInfo) => {
    const active = info.entitlements.active['pro'];
    if (!active) return;
 
    const payload = { product: active.productIdentifier };
    // periodType は 'TRIAL' / 'NORMAL' / 'INTRO' を返します。大文字小文字の取り違えに注意
    if (String(active.periodType).toUpperCase() === 'TRIAL') {
      void sendOnce('trial_started', payload);
    } else {
      void sendOnce('paid_started', payload);
    }
  });
}

// 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 });
  },
};