앱 내 이벤트 로그 QA 시스템 자체 개발기

0. 개발 계기

0.1 user_id가 안들어오는데요?

0.2 기존 QA 방법

1. 앱에서 웹뷰의 이벤트를 확인할 수 없어 QA를 하지 못하였다.

2. GA4에는 이벤트(이벤트명, 이벤트 파라미터)와 사용자 속성이 함께 저장되는데, 사용자 속성을 QA하지 못하였다.

1. 어떻게 해결해야 할까요?

1.1 요구사항 정리하기

1.2 기존에 존재하는 GA4 DebugView 활용하기

1. 데이터 엔지니어가 프론트엔드 개발 환경을 구축하여야 함
• 앱에서는 debugView를 켜기 위해 터미널 상에서 앱을 빌드해야 했고, 개발 환경 구축이 꽤 까다로운 React Native를 세팅하기 시간이 걸릴 것이라 판단했습니다.
• 또한 코드 저장소 관리 및 브랜치 설명, QA마다 발생하는 소통 비용이 클 것으로 예상했습니다.

2. 기기 인식이 불안정하고 user_id가 변경되면 새로운 기기가 생성되는 버그 존재
• 아래는 앱을 열고 사용자 속성이 변경될 때 기기 연결이 끊긴 모습입니다. 앱과 웹 모두 기기 인식이 딜레이가 있거나 불안정한 모습을 보였습니다.

2. 앱 내 이벤트 로그 시스템 개발하기

No.	문제 사항
P1	GA에 저장되는 사용자 속성을 확인할 수 없음
P2	앱의 토스트 팝업: 이벤트 파라미터가 많으면 확인이 어려움
P3	앱의 토스트 팝업: 단시간에 여러 이벤트가 발생하면 토스트가 발생하지 않음
P4	앱의 토스트 팝업: 단일 이벤트를 실시간으로만 확인할 수 있어 전체 로그들의 파악이 어려움

2.1 개발 과정

// store.ts
import { createStore, combineReducers } from 'redux';
import { eventReducer } from './eventQaReducer';

export const rootReducer = combineReducers({
  eventLog: eventReducer,
});

export type RootState = ReturnType<typeof rootReducer>;

export const store = createStore(rootReducer);

// reducer.ts

import {
  ADD_EVENT_QA,
  EventActionTypes,
  CLEAR_EVENT_QA,
  EventQaType,
} from './eventQaActions';

const initialState: EventQaType[] = [];

export const eventReducer = (
  state = initialState,
  action: EventActionTypes,
) => {
  switch (action.type) {
    case ADD_EVENT_QA:
      return [...state, action.payload];
    case CLEAR_EVENT_QA:
      return [];
    default:
      return state;
  }
};

// actions.ts
export const ADD_EVENT_QA = 'ADD_EVENT_QA';
export const CLEAR_EVENT_QA = 'CLEAR_EVENT_QA';

export type EventQaType = {
  name: string;
  params: any;
  time: string;
  gaUser: string | null;
};
export interface AddEventQaAction {
  type: typeof ADD_EVENT_QA;
  payload: EventQaType;
}

export interface ClearEventQaAction {
  type: typeof CLEAR_EVENT_QA;
}

export type EventActionTypes = AddEventQaAction | ClearEventQaAction;

export const addEventQa = (event: EventQaType): EventActionTypes => {
  return { type: ADD_EVENT_QA, payload: event };
};

export const clearEventQA = (): ClearEventQaAction => {
  return { type: CLEAR_EVENT_QA };
};

const App = () => {
 ...
  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <EventQaButtonAndModal />
        ...
      </Provider>
    </ApolloProvider>
  );
};

/**
 *  이벤트 debug 모드일 경우 EventQaModal에 이벤트를 전송하는 함수
 * @param name 이벤트명
 * @param params 이벤트 파라미터
 */
export const sendEventQaModal = async (name: string, params: any) => {{
    const gaUser = await AsyncStorage.getItem('gaUser');
    store.dispatch(
      addEventQa({
        name,
        params,
        time: dayjs().format('HH:mm:ss'),
        gaUser,
      }),
    );
};

/**
 * 일반 이벤트 로그 함수
 * @param event 이벤트 이름(특수 이벤트일 경우에 조회안됨)
 * @param params 해당 이벤트에 대응되는 변수 object
 */
const sendEvent = async <T extends keyof Events>(
  event: T,
  params?: Events[T],
) => {
  sendAdjustEvent(adjustToken[event], params);
  await analytics().logEvent(event, params);
  renderToast(event, { ...params });
  sendEventQaModal(event, params);
};

const EventQaButtonAndModal: React.FC = () => {
  const eventLogs = useSelector((state: RootState) => state.eventLog);

  return (
    <>
      <FloatingButton
        horizontalPosition={horizontalPosition}
        verticalPosition={verticalPosition}
      />
      <Modal
        animationType="slide"
        visible={isModal}
        onRequestClose={onModalClose}
      >
        <ModalContainer>
          ..
          <ModalContents>
            <Events>
              {eventLogs.length === 0 && (
                <Typography.Paragraph size={2} color={Colors.GRAY_900}>
                  기록된 이벤트가 없습니다.
                </Typography.Paragraph>
              )}
              {eventLogs.map((eventLog, index) => (
                <EventLog
                  key={`${eventLog.time}${eventLog.name}`}
                  eventLog={eventLog}
                  index={index}
                />
              ))}
            </Events>
          </ModalContents>
        </ModalContainer>
      </Modal>
    </>
  );
};
export default EventQaButtonAndModal;

2.2 개발 결과

2.3 피드백 반영하기

2.3.1 웹뷰 이벤트 핸들링

<WebView
	...
  onMessage={({ nativeEvent }) => {
    if (nativeEvent.data.includes('gtmEventData')) {
      const firstSplit = nativeEvent.data.split(' gtmEventData: ');
      const eventName = firstSplit[0].split('Console log: ')[1].trim();
      const eventParameters = firstSplit[1].trim() || '';

      sendEventQaModal(`🌐${eventName}`, JSON.parse(eventParameters));
    }
  }}
/>

2.3.2 사용성 개선하기

후기

References