목록React (3)
오늘도 버터
GA4 탐색으로 클릭 수 분석하고 UX 개선하기 서비스를 운영하다 보면 “유저가 어디서 이탈하는지”를 명확히 파악하는 것이 가장 중요합니다.이번 글에서는 GA4의 탐색(Exploration) 기능을 활용해 단계별 클릭 수를 분석하고, 이를 기반으로 UX 문구를 개선한 과정을 공유합니다. 1. GA4 탐색(Exploration) – 새 탐색 분석 만들기 GA4 좌측 메뉴에서 탐색 → 새 탐색 분석을 선택합니다.탐색 기능은 기본 리포트보다 훨씬 자유롭게 데이터를 조합할 수 있어, 유저 행동 흐름을 분석하는 데 적합합니다 2. 측정기준 선택 - 이벤트 이름 다음으로 측정기준에 이벤트 이름을 추가합니다.이 단계는 “어떤 행동을 기준으로 볼 것인가”를 정하는 과정입니다.예를 들어버튼 클릭, 다음 단계 이동..
지난 글에 이어서 오늘은 react 프로젝트에 gtm을 적용해보겠습니다. 1. SPA에서 이벤트 트래킹, 어떤 방식을 선택할까?본격적인 적용에 앞서, SPA에서 이벤트를 추적하는 방식들을 비교해보고 왜 dataLayer push 방식을 선택했는지 설명하겠습니다. 방식 1: data-id + 정규식DOM에서 data-id 속성을 찾아 패턴 매칭으로 이벤트를 발생시키는 방식입니다.문제점- 같은 data-id가 여러 위치(헤더, 본문, 모달 등)에서 사용되면 어디서 발생한 이벤트인지 구분 불가- 한 번 클릭에 중복 이벤트 발생 가능 - React 리렌더링 타이밍과 맞지 않는 경우 발생 방식 2: History Change 트리거React Router가 URL을 변경할 때 GTM의 History Chang..
프론트엔드 개발하다 보면 언젠간 마주치는 순간이 있습니다."사용자가 어떤 버튼을 많이 클릭하는지 알고 싶어요.""어느 페이지에서 이탈이 많이 일어나나요?""광고 통해 들어온 사람들 구매율 좀 측정해주세요."그래서 당연히 Google Analytics 설치하려고 검색하는데가이드마다 자꾸 같이 나오는 낯선 이름, Google Tag Manager"GA와 GTM?" ,"둘 다 구글 껀데 왜 따로 있는 거지?"둘 다 "데이터 추적"이라고 하니 더 헷갈렸습니다.결론부터 말하면, 이 둘은 역할이 다릅니다. 하지만 함께 쓸 때 제대로 빛납니다.오늘은 GTM과 GA의 차이를 정리하고자 합니다.1. GTM이란? - 똑똑한 데이터 수집 관리자웹사이트에서는 수많은 일이 일어납니다. 페이지 조회, 버튼 클릭, 동영상 재생,..