React Nativeでスクロールやタップを追跡する方法を徹底解説

npm install react-native-gesture-handler

npm install react-native-reanimated

npm install @react-native-firebase/analytics

import React from 'react';
import { TouchableOpacity, Text, Alert } from 'react-native';

const TapTracker = () => {
  const handleTap = () => {
    Alert.alert('タップイベントが発生しました！');
  };

  return (
    <TouchableOpacity onPress={handleTap} style={{ padding: 20, backgroundColor: '#ccc' }}>
      <Text>ここをタップ</Text>
    </TouchableOpacity>
  );
};

export default TapTracker;

<TouchableOpacity
  onPressIn={() => console.log('タップ開始')}
  onPressOut={() => console.log('タップ終了')}
>
  <Text>タップ操作を追跡</Text>
</TouchableOpacity>

import { GestureHandlerRootView, TapGestureHandler } from 'react-native-gesture-handler';

const TapTracker = () => {
  const onSingleTap = () => {
    console.log('シングルタップが検出されました');
  };

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <TapGestureHandler onActivated={onSingleTap}>
        <Text>タップを試してください</Text>
      </TapGestureHandler>
    </GestureHandlerRootView>
  );
};

export default TapTracker;

import analytics from '@react-native-firebase/analytics';

const handleTap = async () => {
  await analytics().logEvent('tap_event', {
    item: 'button_click',
    timestamp: new Date().toISOString(),
  });
  console.log('イベントがログに記録されました');
};

import React from 'react';
import { ScrollView, Text, StyleSheet } from 'react-native';

const ScrollTracker = () => {
  const handleScroll = (event) => {
    console.log('スクロール位置:', event.nativeEvent.contentOffset.y);
  };

  return (
    <ScrollView
      onScroll={handleScroll}
      scrollEventThrottle={16} // スクロールイベントの頻度を設定
      style={styles.scrollView}
    >
      <Text style={styles.item}>スクロールしてみてください！</Text>
      {[...Array(50)].map((_, i) => (
        <Text key={i} style={styles.item}>
          アイテム {i + 1}
        </Text>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: { padding: 20 },
  item: { marginVertical: 10, fontSize: 16 },
});

export default ScrollTracker;

import React from 'react';
import { FlatList, Text, StyleSheet } from 'react-native';

const FlatListScrollTracker = () => {
  const data = Array.from({ length: 100 }, (_, i) => `アイテム ${i + 1}`);

  const handleScroll = (event) => {
    console.log('現在のスクロール位置:', event.nativeEvent.contentOffset.y);
  };

  return (
    <FlatList
      data={data}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
      onScroll={handleScroll}
      scrollEventThrottle={16}
    />
  );
};

const styles = StyleSheet.create({
  item: { padding: 20, fontSize: 16 },
});

export default FlatListScrollTracker;

const handleScroll = (event) => {
  const position = event.nativeEvent.contentOffset.y;
  if (position > 300) {
    console.log('特定の位置に達しました！');
  }
};

import analytics from '@react-native-firebase/analytics';

const handleScroll = async (event) => {
  await analytics().logEvent('scroll_event', {
    position: event.nativeEvent.contentOffset.y,
    timestamp: new Date().toISOString(),
  });
  console.log('スクロールイベントが記録されました');
};

import analytics from '@react-native-firebase/analytics';

const logCustomEvent = async () => {
  await analytics().logEvent('favorite_item', {
    item_id: '12345',
    item_name: 'React Native Guide',
    category: 'Books',
  });
  console.log('カスタムイベントが記録されました');
};

import React, { createContext, useContext } from 'react';
import analytics from '@react-native-firebase/analytics';

const AnalyticsContext = createContext();

export const AnalyticsProvider = ({ children }) => {
  const logEvent = async (eventName, params) => {
    await analytics().logEvent(eventName, params);
    console.log(`${eventName} イベントが記録されました`);
  };

  return (
    <AnalyticsContext.Provider value={{ logEvent }}>
      {children}
    </AnalyticsContext.Provider>
  );
};

export const useAnalytics = () => useContext(AnalyticsContext);

import React from 'react';
import { Button } from 'react-native';
import { useAnalytics } from './AnalyticsContext';

const FavoriteButton = () => {
  const { logEvent } = useAnalytics();

  const handleFavorite = () => {
    logEvent('favorite_item', {
      item_id: '67890',
      item_name: 'Advanced React Native',
    });
  };

  return <Button title="お気に入り登録" onPress={handleFavorite} />;
};

export default FavoriteButton;

const logStoryCompletion = async (storyId) => {
  await analytics().logEvent('story_completed', {
    story_id: storyId,
    timestamp: new Date().toISOString(),
  });
  console.log('ストーリー完了イベントが記録されました');
};

import analytics from '@react-native-firebase/analytics';

const logScrollEvent = async (position) => {
  await analytics().logEvent('scroll_position', { position });
  console.log('スクロール位置を記録しました');
};

const anonymizedData = {
  userId: null,
  event: 'user_action',
  timestamp: new Date().toISOString(),
};

const anonymizedIp = ip.replace(/\.\d+$/, '.0');

import { Alert } from 'react-native';

const requestConsent = () => {
  Alert.alert(
    'データ利用について',
    'このアプリでは、アクティビティ追跡のためにデータを収集します。詳細はプライバシーポリシーをご覧ください。',
    [
      { text: '同意しない', style: 'cancel' },
      { text: '同意する', onPress: () => console.log('同意取得') },
    ]
  );
};

import SInfo from 'react-native-sensitive-info';

SInfo.setItem('user_session', 'encrypted_token', {
  sharedPreferencesName: 'myAppPrefs',
  keychainService: 'myKeychain',
});

import { Linking, Text } from 'react-native';

const PrivacyPolicy = () => {
  return (
    <Text onPress={() => Linking.openURL('https://yourwebsite.com/privacy-policy')}>
      プライバシーポリシーはこちら
    </Text>
  );
};

const [trackingEnabled, setTrackingEnabled] = useState(true);

const toggleTracking = () => {
  setTrackingEnabled(!trackingEnabled);
  console.log(trackingEnabled ? 'トラッキング有効' : 'トラッキング無効');
};

<TouchableOpacity onPress={() => console.log('タップイベントが記録されました')}>
  <Text>ボタン</Text>
</TouchableOpacity>

const logEvent = async () => {
  try {
    await analytics().logEvent('custom_event', { key: 'value' });
    console.log('イベントが記録されました');
  } catch (error) {
    console.error('イベント記録に失敗:', error);
  }
};

<ScrollView
  onScroll={(event) => console.log('スクロール位置:', event.nativeEvent.contentOffset.y)}
  scrollEventThrottle={16} // 推奨値：16ms
>
  <Text>スクロールコンテンツ</Text>
</ScrollView>

import debounce from 'lodash.debounce';

const handleScroll = debounce((event) => {
  console.log('最適化されたスクロール位置:', event.nativeEvent.contentOffset.y);
}, 200);

Alert.alert(
  'データ収集について',
  'このアプリはユーザーのアクティビティを追跡します。同意しますか？',
  [
    { text: 'いいえ', style: 'cancel' },
    { text: 'はい', onPress: () => console.log('同意を取得しました') },
  ]
);

useEffect(() => {
  const listener = () => console.log('イベント発生');
  const unsubscribe = navigation.addListener('focus', listener);

  return () => {
    unsubscribe(); // リスナーを削除
  };
}, [navigation]);

const sendData = async (data) => {
  try {
    await fetch('https://api.example.com/event', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: { 'Content-Type': 'application/json' },
    });
    console.log('データ送信成功');
  } catch (error) {
    console.error('データ送信失敗:', error);
    setTimeout(() => sendData(data), 5000); // 再試行
  }
};

const trackProductView = async (productId, productName) => {
  await analytics().logEvent('view_product', {
    product_id: productId,
    product_name: productName,
    timestamp: new Date().toISOString(),
  });
  console.log('商品閲覧イベントを記録しました');
};

const trackAddToCart = async (productId, quantity) => {
  await analytics().logEvent('add_to_cart', {
    product_id: productId,
    quantity: quantity,
    timestamp: new Date().toISOString(),
  });
  console.log('カート追加イベントを記録しました');
};

const trackCheckoutStep = async (step) => {
  await analytics().logEvent('checkout_progress', {
    step: step,
    timestamp: new Date().toISOString(),
  });
  console.log(`チェックアウトステップ${step}を記録しました`);
};

if (cart.items.length > 0 && timeSinceLastVisit > 24 * 60 * 60) {
  sendNotification('あなたのカートが残っています！購入をお忘れなく！');
}