광고 노출 수를 측정해주세요! 컴포넌트 노출 트래킹 작업기.
목차 펼치기
요구사항
유료 광고 구좌에서 광고가 사용자에게 보여졌는지, 또 어떤 광고가 보여졌는지 트래킹하는 기능이 필요하다!
구좌 : 광고가 들어갈 수 있는 자리
기능 도출
기능 도출
사용자 뷰포트에 타겟이 포함되었을 때 이벤트를 보내야한다.
고속 스크롤링 등 실제 사용자가 ‘봤다’고 판단할 수 없는 경우를 고려한다.
다른 컴포넌트에서 쉽게 사용할 수 있어야한다.
트래킹으로 인한 네트워크 이슈가 없어야 한다.
사용자가 ‘봤다’고 판단한 컴포넌트는 리렌더링 되기 전까지는 다시 체크하지 않는다.
먼저 사용자가
‘봤다’라고 판단할 기준을 정의하면 다음과 같다.
타겟 영역의 80%가 뷰포트에 진입했을 때
굳이 타겟의 모든 영역이 진입하지 않아도 봤다고 정의할 수 있다.
80%의 교차점을 트리거로 했을 때, 해상도 대응이 되어 있지 않다면 작은 해상도에서는 절대 ‘봤다’고 할 수 없을 수도 있지만 이 부분은 제외한다.
뷰포트에 1초 이상 노출되었을 때
고속 스크롤링 시 타겟이 뷰포트에 진입하였어도, 사용자가 봤다고 할 수 없다.
이를 통해 트리거를 구현한다.
작업내용
메인 쓰레드 밖에서 비동기로 동작하여 성능 이슈 없이 감지할 수 있다.
타겟이 뷰포트 내에 교차된 정도에 따라 콜백함수를 실행할 수 있다.
- 2번 기능
을 지원하기 위해 Intersection Observer API로 실행되는 콜백함수에서 setTimeout을 사용해 일정 시간 뒤에 타겟이 뷰포트 내부에 있는 지 여부를 체크하도록 한다.
아래 데이터를 활용하여, 뷰포트 내에 타겟이 존재하는지 확인한다.
뷰포트의 크기
타겟의 크기
뷰포트 내에서 타겟의 위치
타겟이 뷰포트 내부에 보여지고 있다고 판단할 교차 기준
- 3번 기능
을 지원하기 위해 ViewTracker라는 선언적 컴포넌트를 생성하고, 타겟 컴포넌트를 Wrapping하여 적용하도록 한다.
ViewTracker는 타겟 컴포넌트와 동일한 크기로 오버레이 되는 Element를 생성하여, 타겟과 동일하게 감지되게 한다.
- 4번 기능
을 지원하기 위해 ViewTracker에서 발생한 이벤트는 debounce를 적용하여 API를 호출한다.
가장 마지막에 실행된 ViewTracker 이벤트에서 debounce 시간 동안 생성된 이벤트를 bulk로 전송한다.
- 5번 기능
을 지원하기 위해
SEND_STATUS의
SENDED상태를 체크하여, 사용자가 ‘봤다’고 판단하면 callback을 탈출한다.
중복으로 전송되는 것을 방지하기 위해 별도의 State를 통해 내부 상태를 관리한다.
개발 편의를 위해
DEBUG_MODE변수를 추가하여 노출 및 트래킹 상태를 표시한다.