얼마 전에, 회원가입한 유저가 어디에서 왔는지 유입을 알고 싶다는 요구사항이 있어서, 우리 서비스에 처음 들어올 때 referrer를 가지고 있다가 회원가입할 때 백엔드로 넘기는 일을 마무리했어요~
처음에는 많이 어려울 줄 알았는데, 생각보다는 쉽고 재밌었어요.ㅎㅎ 그래도 좀 고려해야 할 점이 있어서 글을 남기려고 해요~
일단 referrer url에 대해서 알아볼게요.
아! 참고로 referrer(참조자)가 올바른 철자인데, HTTP 헤더 referer은 referrer의 오타라고 해요~ 저는 referrer로 사용할게요.
referrer은 '현재 요청된 페이지의 링크 이전의 웹 페이지의 절대 혹은 부분 주소.'입니다.(참고: https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Referer)
지금 크롬을 쓰고 있다면, 마우스 우측 클릭 => 검사를 눌러서 개발자 도구를 열어보세요. 그리고 Console에 document.referrer 이라고 입력해보세요.
구글에서 dalseoin이라고 검색해서 제 블로그에 들어와봤습니다. 그래서 referrer이 구글로 나와있네요!
네이버에 dalseoin이라고 검색해서 제 블로그에 가봤어요.
그랬더니 referrer이 조금 더 자세히 나와있네요! 어떤 검색어를 입력했는지도 나와있네요.
이렇게 사이트마다 referrer을 얼마나 자세히 넘겨줄지, referrer을 넘길지 말지 정할 수 있어요.
티스토리에서도 '블로그 관리' > '유입 경로'를 볼 수 있는데, 이때 사이트 주소도 '(본인 블로그 주소)/manage/statistics/referrer'입니다 ~ 여기에도 referrer이라는 단어를 썼네요 ㅎ
요구사항을 설명하기 위해서 서비스를 대충 설명하면, 서비스 소개 사이트가 따로 있고, 회원가입하는 사이트도 따로 있어요. (도메인이 다름)
보통 외부에서 들어오는 사용자들은 검색을 해서 서비스 소개 사이트로 가고, 그 안에서도 이곳 저곳 돌아다니다가, 회원가입하는 사이트로 이동해서 회원가입을 할 텐데요. 그러니까 저는 서비스 소개 사이트로 이동하기 직전의 외부 사이트 주소를 알고, 가지고 있다가, 회원가입 사이트로 넘기고, 회원가입할 때 백엔드로 보내야 했어요.
어떻게 했냐면요~~
1. 처음 서비스 소개 사이트에 접근하면, 세션 스토리지에 referrer url을 저장했습니다. 처음 서비스 소개 사이트에 접근했는지 판단 기준은 세션 스토리지에 Referrer url이 있는가! 입니다. referrer url을 알아내는 방법은 document.referrer 을 사용하는 것입니다. [mdn 문서] document.referrer을 하면 링크를 통해서 현재 페이지에 오게 됐을 때, 그 전 페이지 URI정보를 반환합니다.
2. 서비스 소개 사이트 -> 회원가입 사이트로 이동할 때 (다른 도메인), query param으로 referrer url을 넘겼습니다.
3. 회원가입 사이트에 접근해서는
1) query param으로 referrer url이 있으면 그걸 세션 스토리지에 저장했습니다.
2) 없으면, referrer url을 세션 스토리지에 저장했습니다. (서비스 소개 사이트를 통해서 넘어온 게 아니라는 뜻일테니까요!)
4. 회원가입할 때 referrer url을 백엔드로 보냈습니다.
왜 세션 스토리지를 사용했을까요?
1. 새로고침해도 유지하고 싶었기 때문이고요~ (리액트 useState를 이용해서 값을 저장하면, 새로고침하면 사라져버려서요~)
2. 세션 스토리지는 탭이 닫히면 사라지기 때문에, referrer url을 저장하기에 딱 좋았어요. (처음 서비스 소개 사이트에 접근하면, 세션 스토리지에 referrer url을 저장했습니다. 처음 서비스 소개 사이트에 접근했는지 판단 기준은 세션 스토리지에 Referrer url이 있는가! 였습니다. 로컬 스토리지라면 브라우저를 다시 실행해도 유지되어서, 예전 referrer url이 남아있어서요~)
'프론트엔드💛' 카테고리의 다른 글
| 스크롤하면 카드가 뒤집어지는 효과 주기 😁💘 (IntersectionObserver) (0) | 2023.04.12 |
|---|---|
| 귀염뽀짝 카드 flip 애니메이션 효과 만들기 🌈🔮(HTML, CSS) (0) | 2023.04.12 |
| Prettier, Stylelint, ESLint 시작하기 (0) | 2023.03.28 |
| react hook form 공부(작성중) (0) | 2023.03.27 |
| [CSS] 처음 만나는 베지에 곡선(cubic-bezier) (0) | 2023.03.23 |