[React Native] Amplitude로 앱 사용자 이벤트(행동) 추적하기

1. 설치

npm install @amplitude/analytics-react-native
npm install @react-native-async-storage/async-storage

 

**문제됐던 부분**

설치 후 ios에 pod install 해줘야 했는데, XCode 버전 문제로 인해 Mac Software Update 하려고 보니 또 용량문제로..(다음 맥은 꼭 용량 큰걸로..)

 

드라이브 옮기고 등의 작업 해준 이후에!

다!시!

XCode 재설치 후

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -license accept

이후

드디어!

brew install cocoapods
ios에서 pod install

로 이슈 마무리..

 

2. 재시작

npm start -- --reset-cache

 

3. https://app.amplitude.com/와 연동하기(초기화하기)

방법 1) 타임스탬프 기반

React.useEffect(() => {
  const initAmplitude = async () => {
    try {
      // userId 설정 (사용자 고유 ID)
      const userId = 'user_' + Date.now();
      //init 옆은 amplitude에 만든 프로젝트의 API 가져온 것(env로 사용해야겠죵)
      await amplitude.init('2b645b2935a1e99120e0e4222e1af075', userId);
      console.log('Amplitude 초기화 성공! User ID:', userId);
    } catch (error) {
      console.error('Amplitude 초기화 실패:', error);
    }
  };
  
  initAmplitude();
}, []);

방법 2) AsyncStorage에 저장해서 재사용

import AsyncStorage from '@react-native-async-storage/async-storage';

React.useEffect(() => {
  const initAmplitude = async () => {
    try {
      // 저장된 userId 가져오기 또는 새로 생성
      let userId = await AsyncStorage.getItem('amplitude_user_id');
      if (!userId) {
        userId = 'user_' + Date.now() + '_' + Math.random().toString(36).substring(7);
        await AsyncStorage.setItem('amplitude_user_id', userId);
      }
      await amplitude.init('2b645b2935a1e99120e0e4222e1af075', userId);
      console.log('Amplitude 초기화 성공! User ID:', userId);
    } catch (error) {
      console.error('Amplitude 초기화 실패:', error);
    }
  };
  
  initAmplitude();
}, []);

방법 3) 로그인 시스템 있는 앱이면,

const userId = currentUser.email; // 또는 currentUser.id
await amplitude.init('2b645b2935a1e99120e0e4222e1af075', userId);

 

4. React Native용 Amplitude의 함수들 사용하기

// MainScreen.js 상단에 import 추가
import * as amplitude from '@amplitude/analytics-react-native';

const searchAuthor = authorName => {
  amplitude.track('Author_Clicked', {
    authorName: authorName,
    bookTitle: book.title,
    country: country
  });
  //나머지 기존 코드(버튼 등!)

  <TouchableOpacity
    style={styles.navItem}
    onPress={() => {
      amplitude.track('Play_Clicked');
      console.log('[Amplitude] Tracked: Play_Clicked');
      setActiveTab('home');
    }}
  >

이런 식으로 추적하고 싶은 버튼이나 기능에 대하여 amplitude.track('blabla'); 코드를 삽입해줌.

 

결과다 짜잔!

 

 

 

 

이를 통하여 앞으로 앱 사용자의 행동 추적을 통해 더욱 더 개선시킬 방법을 구안할 것!