본문 바로가기
반응형

전체 글

 (126)
[GA4/GTM] 유입경로 탐색으로 이탈률 추적하기 최근 사내 서비스에서 리뷰 작성 기능을 새로 붙이면서, 실제로 유저가 어디에서 많이 이탈하는지 보고 싶어 졌습니다.이 포스트에서는 그때 사용했던 GTM + GA4 유입경로 탐색 분석 셋업 과정을 정리했습니다. 유입경로 탐색을 사용한 이유 ✨당시 상황서비스 A에 경험 리뷰 남기기 기능 릴리즈.리뷰 요청 -> 반응 클릭 -> 리뷰 작성 -> 제출까지 각 단계별 이탈률이 보고 싶었음.단순 페이지 뷰가 아니라, 이벤트 기준 퍼널로 보고 싶었음.나중에 실험(A/B)까지 연결해서, 지표 -> 가설 -> 실험 -> 개선 사이클을 돌리는 것을 목표. 그래서 아래와 같이 구조를 잡았습니다.GTM으로 리뷰 플로우의 각 단계를 이벤트로 정의GA4에서 해당 이벤트/파라미터를 맞춤 정의로 등록탐색 -> 유입경로 탐색 분석에서 ..
[GA4/GTM] dataLayer 이벤트 파라미터가 의도치 않게 누적되는 문제 최근에 실제 서비스의 트래킹하는 과정에서 “이거 한 번쯤은 다 겪겠는데?” 싶은 이슈가 있어서, 정리해두면 괜찮겠다는 생각이 글을 작성했습니다. 실무 프로젝트에서 겪은 케이스이고, dataLayer 동작 방식 + event_params 기반 설계까지 GTM/GA4 구조를 고민하는 분들께 레퍼런스처럼 활용될 수 있을 거라 생각합니다. 발생한 오류 🔥event_params 누적 문제클릭 이벤트마다 아래와 같은 파라미터를 보내고 있었습니다.page_namelog_typebottom_sheet_typelast_reached_stepstep_1_completed ~ step_4_completedbanner_id, banner_name그 외 상황별 context들 바텀시트, 모달이 섞인 플로우를 구현하는 과정에서..
GA4와 GTM을 활용한 웹사이트 이벤트 추적 (BigQuery, Redash 데이터 시각화) 기존엔 어떤 페이지에서 이탈하는지, 어떤 버튼이 눌리는지 전혀 알 수 없는 상태였기 때문에, GA4와 GTM을 도입하게 되었습니다.공식 문서는 난해하고 정보도흩어져 있어, 처음 접하는 분들도 이해할 수 있도록 설정부터 이벤트 추적까지 내용을 정리해 봤습니다. GA4와 GTM 도입 이유 ✨기존 서비스는 사용자 행동에 대한 데이터 수집 체계가 전혀 없었습니다.버튼 클릭, 페이지 이탈 경로 등 사용자 흐름을 파악할 수 없는 상태였습니다.GA4와 GTM을 연동해 행동 기반 이벤트를 수집하고, 이를 통해 사용자 데이터를 분석할 수 있도록 개선하기 위해 도입했습니다. GA4와 GTM이란❓GA4 (Google Analytics 4)💡 GA4는 구글에서 제공하는 최신 웹 분석 도구로, 사용자의 행동 데이터를 수집하..
[트러블 슈팅] 로컬은 되는데 CI는 왜 안 되죠?(react-hook-form 빌드 오류 디버깅) 평소처럼 PR을 보냈는데 갑자기 Github Actons에서 타입 에러로 빌드가 실패하는 일이 발생했습니다.그래서 해당 포스트에서는 빌드 오류를 해결한 내용에 대해 정리해보려고 합니다. 발생한 오류 🔥기존에 정상적으로 빌드되먼 PR이 갑자기 GitHub Actions에서 빌드 실패 문제가 발생했습니다.로컬에서는 동일한 코드가 정상 빌드가 됐고 오류 위치는 `react-hook-form`의 `watch()` 함수 사용 부분에서 오류가 발생했습니다. 해결 과정 🔎1. 로컬 vs CI 환경 비교항목로컬Github Actions (CI)yarn.lock✅ 존재❌ 존재하지 않음 (.gitignore에 포함 됨)react-hook-form 버전7.43.5 또는 7.58.17.61.0 (최신 패치 자동 설치됨)..
프론트엔드 개발환경 자동화 스크립트 만들기 (setup.sh) 한 줄로 개발 환경을 셋업 할 수 있는 자동화 스크립트 setup.sh를 이번 포스트를 통해 공유해보려 합니다. 자동화 스크립트 추가 이유 ✨특히 아래 작업들이 반복적으로 문제를 일으켰습니다:Node.js, Yarn, Git 설치 누락.nvmrc, .env.local 등 필수 파일 누락Node.js 버전 미스매치로 인한 런타임 오류Husky hook 미적용으로 인한 커밋 실패 프로젝트를 처음 클론하고 개발 환경을 세팅하는 과정에서 버전 불일치 등으로 인해 시작부터 시간을 허비한 경험이 있습니다.이런 경험을 다른 사람들은 겪지 않았으면 하는 마음에, 환경설정 자동화의 필요성을 절실히 느꼈습니다. 사용 방법 📖❗스크립트 실행 후 IDE 재시작은 필수입니다.chmod +x setup.sh./setup.sh ..
[트러블 슈팅] Windows 호환성 오류 + WSL2 개발환경 설치 yarn 설치 오류 발생발생한 오류 🔥GitHub에서 프로젝트를 클론 한 뒤, yarn 명령어를 입력했지만 다음과 같은 오류 메시지를 마주했습니다. 왜 이런 일이 발생할까? 🔎해당 오류는 Windows 환경에서 패키지 이름에 포함된 특수 문자열이나 버전 표기 방식 때문에 발생할 수 있습니다. 📌 구체적인 원인-2.0-2@1.1.0처럼 버전 숫자와 하이픈이 반복되는 패턴은 Windows 파일 시스템에서 인식 오류를 유발할 수 있습니다.일부 패키지 매니저 또는 경로 해석기에서 이 이름을 정상적으로 처리하지 못합니다. 해결 방법 ✨✅ 가장 권장되는 방법: WSL2 환경에서 개발하기 Windows 환경의 한계를 극복하려면 리눅스 환경에서 작업하는 것이 가장 확실한 해결책입니다.그래서 WSL2(Wind..
TanStack Query로 낙관적 업데이트 구현 (구인/구직 찜) 사용자가 버튼을 클릭했을 때, 서버 응답을 기다리느라 반응이 느리면 사용자는 해당 기능이 오류가 발생했다고 생각을 할 수도 있습니다. 그래서 이번 게시글에서는 `TanStack Query`의 낙관적 업데이트(Optimistic Update)를 활용해 서버 응답을 기다리지 않고도 즉각적으로 UI가 반응할 수 있도록 구현한 내용을 공유해보려고 합니다. 구현 시나리오: 구인/구직 게시물 찜하기 ✨- 사용자가 찜 버튼을 누르면 즉시 UI 변경.- 서버 요청 실패 시 이전 상태로 롤백.- 찜 상태는 게시물 상세 쿼리에 반영되어야 하며, 관련 쿼리 무효화. UI 컴포넌트 📖const RecruitDetailPage = () => { const { favoriteMutate } = useFavoriteMutati..
next-intl을 이용한 다국어 처리 국내 서비스라고 하더라도 글로벌 사용자를 고려해 다국어 지원을 지원하고 있습니다. 이번 프로젝트에서는 `next-intl`을 사용해 간단하고 일관성 있는 다국어 처리 구조를 만들었고, 그 구조와 사용 패턴에 대해 소개해보려고 합니다.next-intl 사용 이유 ✨서버와 클라이언트에서 일관된 처리`next-intl` 은 Next.js의 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 모두에서 일관된 방식으로 데이터를 처리할 수 있습니다. 자동 로딩 및 타입 지원 다국어 메시지 파일을 자동으로 로드하고, Typescript와의 호환성을 제공하여 타입 안정성을 보장해 주기 때문에 실수를 줄이고 편리하게 작업할 수 있습니다. locale 기반 포맷팅 지원숫자, 날짜, 시간 등 다양한 포맷을 lo..

티스토리툴바