광고 노출 수를 측정해주세요! 컴포넌트 노출 트래킹 작업기.

작성 : 2023-09-20수정 : 2023-09-20

목차 펼치기

요구사항

유료 광고 구좌에서 광고가 사용자에게 보여졌는지, 또 어떤 광고가 보여졌는지 트래킹하는 기능이 필요하다!

구좌 : 광고가 들어갈 수 있는 자리


기능 도출

  1. 사용자 뷰포트에 타겟이 포함되었을 때 이벤트를 보내야한다.

  2. 고속 스크롤링 등 실제 사용자가 ‘봤다’고 판단할 수 없는 경우를 고려한다.

  3. 다른 컴포넌트에서 쉽게 사용할 수 있어야한다.

  4. 트래킹으로 인한 네트워크 이슈가 없어야 한다.

  5. 사용자가 ‘봤다’고 판단한 컴포넌트는 리렌더링 되기 전까지는 다시 체크하지 않는다.


먼저 사용자가

‘봤다

’라고 판단할 기준을 정의하면 다음과 같다.

  • 타겟 영역의 80%가 뷰포트에 진입했을 때

    • 굳이 타겟의 모든 영역이 진입하지 않아도 봤다고 정의할 수 있다.

    • 80%의 교차점을 트리거로 했을 때, 해상도 대응이 되어 있지 않다면 작은 해상도에서는 절대 ‘봤다’고 할 수 없을 수도 있지만 이 부분은 제외한다.

  • 뷰포트에 1초 이상 노출되었을 때

    • 고속 스크롤링 시 타겟이 뷰포트에 진입하였어도, 사용자가 봤다고 할 수 없다.

이를 통해 트리거를 구현한다.


작업내용

  • 1번 기능

    을 지원하기 위해

    Intersection Observer API

    를 활용하여 뷰포트 내에 들어왔는 지를 감지한다.

    • 메인 쓰레드 밖에서 비동기로 동작하여 성능 이슈 없이 감지할 수 있다.

    • 타겟이 뷰포트 내에 교차된 정도에 따라 콜백함수를 실행할 수 있다.

  • 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

    변수를 추가하여 노출 및 트래킹 상태를 표시한다.




Wanna get in touch?

All Icons byiconiFy