[FEAT] google analytics 고도화하여 "땅콩" 서비스에 필요한 데이터 수집 #449
Conversation
frontend/public/index.html
Outdated
|
|
||
| gtag('config', 'G-3BFVVPQT0Z'); | ||
| if (process.env.NODE_ENV == 'production') { |
There was a problem hiding this comment.
🙏 제안 🙏
오호 개발도메인에선 안잡히는줄 알았는데 잡히는군요 prod 빌드해서 그런가?? prod 환경만 찍히는걸 위한 코드라면 fe-cd-dev 스크립트에서 dev로 빌드해야될 것 같아요!
index.html에서 process.env.NODE_ENV가 잘 찍히나요?? dev빌드해서 콘솔로 확인해보면 좋을 것 같아요!
There was a problem hiding this comment.
public 폴더에서는 환경 변수가 인식되지 않더라고요.... 그래서 분기를 어떻게 처리할까 고민하다가
window.location.origin 사용하여 배포 환경에서만 구글 애널리틱스가 활성화되도록 변경하였습니다.
frontend/src/hooks/useGetUserInfo.ts
Outdated
| if (roomId && data?.roomId && Number(roomId) !== data?.roomId) { | ||
| navigate('/', { replace: true }); | ||
| } | ||
| }, []); |
There was a problem hiding this comment.
💭 질문 💭
useGetUserInfo가 여러번 호출되면 useEffect도 여러번 실행될 것 같은데 어떻게 생각하시나요??
처음 접속했을 때 확인하는 거라면 페이지 당 한번만 실행되어야 할 것 같아요!
There was a problem hiding this comment.
음, 그렇겠군요. 그리고 지금 생각해보니 함수의 "단일 책임 원칙"에도 맞지 않는 것 같네요.
URL과 유저 정보를 비교하는 부분을 별도의 함수로 분리하였습니다!
| category: 'User Engagement', | ||
| action: 'time_spent_per_page', | ||
| label: page, | ||
| value: timeSpent / 1000, |
There was a problem hiding this comment.
💭 질문 💭
오호 이렇게 value를 넣으면 값이 누적되는 건가요?? 해당 이벤트는 이 value를 가져서 보내면 GA에서 이벤트값을 누적해주는 방식인가요?
There was a problem hiding this comment.
네, 위처럼 action을 만들고 Google Analytics에서 action 이름에 맞게 커스텀 데이터를 추가해주면 데이터가 수집이 되더라고요
|
|
||
| const GameResultPage = () => { | ||
| useIsRoomInitial(); | ||
| useGAPageTimeSpentGA('게임 결과 페이지'); |
There was a problem hiding this comment.
🙏 제안 🙏
매칭 결과 페이지가 좋을 것 같아요!
github-actions
bot
added
D-1
| const { data } = useQuery({ | ||
| queryKey: [QUERY_KEYS.getUserInfo, roomId], | ||
| queryFn: getUserInfo, | ||
| staleTime: USER_INFO_STALE_TIME, | ||
| }); | ||
|
|
||
| if (roomId && data?.roomId && Number(roomId) !== data?.roomId) { | ||
| navigate('/', { replace: true }); | ||
| } |
There was a problem hiding this comment.
💭 질문 💭
이제 이 코드가 삭제되어도 괜찮은건가요 ?
|
|
||
| const useGAInitializeGA = () => { | ||
| useEffect(() => { | ||
| ReactGA.initialize('G-3BFVVPQT0Z'); |
There was a problem hiding this comment.
🙏 제안 🙏
해당 넘버도 환경 변수로 만들어서 사용하는 것은 어떨까요? 민감 정보는 아니지만 외부에서 가짜 트래픽을 전송하여 분석 데이터를 왜곡할 수도 있다고 하네요 ?!
| ReactGA.event({ | ||
| category: 'User Engagement', | ||
| action: 'vote', | ||
| label: '오른쪽 버튼 클릭', |
There was a problem hiding this comment.
🙏 제안 🙏
왼쪽 버튼보다 첫번째 선택지 또는 왼쪽 선택지 이런 식이 더 명확하지 않을까요 ?!
Issue Number
#430
As-Is
기존에는 google analytics가 기본 설정만 되어 있어 구체적인 사용자 데이터를 얻기 어려웠다
To-Be
google analytics를 고도화하여 우리 서비스에 필요한 구체적인 데이터를 수집하도록 변경
추가로 수집된 데이터
왼쪽: 게임 참여 인원 수
오른쪽: 게임 시작 횟수
그 외
GA표시를 추가하였음Check List
Test Screenshot
(Optional) Additional Description
폴더 분리
google Analytics는 기능을 구현하는 코드가 아니기 때문에 별도의 폴더에 파일들을 모으는 것이 좋다고 판단하여
src/lib/googleAnalytics폴더에 관련 코드들을 모아둠🌸 Storybook 배포 주소