웹 SDK 연동 테스트

대상:
개발자
마지막 업데이트:

한눈에 보기: 웹 SDK PBA 플러그인 연동 테스트하는 법

PBA 웹 이벤트 테스트

테스트 페이지 사용 원칙

웹 SDK는 PBA로 웹 이벤트를 발송하며, 이는 일일 처리 후 PBA 대시보드 및 로데이터 리포트로 제공됩니다. 효율적인 테스트를 위해, 일일 처리를 대기하지 않고 테스트 이벤트를 전송합니다. 테스트 이벤트는

  • 접수 즉시 분석 및 검증됩니다. 
  • 사용자 인터페이스에서 확인 가능합니다. UI에서는 처리 오류도 확인할 수 있습니다. 처리 오류 발생 시, 정확히 처리될 수 있도록 수정된 이벤트를 재전송합니다. 
  • 일일 처리 과정에서 다른 이벤트와 같이 처리됩니다. 즉, 수정된 이벤트가 대시보드와 로데이터에 추가됩니다. 

웹 SDK 통합 테스트 페이지

페이지 주 화면

TestScreen_us-en.jpg

  • 최신 이벤트가 먼저 나타납니다.
  • 이벤트 캐시:
    • 최대 100개 이벤트 저장
    • 새 이벤트 자리를 만들기 위해 오래된 이벤트는 삭제됩니다
    • 캐시된 이벤트는 24시간 후 삭제됩니다
  • 페이지 조작 버튼:
    • 새로고침 빈도 표시기: 해당 페이지는 5초마다 자동으로 새로고침됩니다.
    • 모두 제거: 캐시에서 이벤트를 영구히 제거합니다. 주의! 캐시는 동일한 웹 개발 키를 공유하는 웹사이트에 공통적으로 적용됩니다. 이에 따라, 다른 개발자가 테스트 페이지를 사용 중이라면 그들에게도 동시에 지워집니다. 
    • 멈춤/시작: 자동 새로고침을 멈춥니다. 시작 버튼을 누를 때까지 새 이벤트가 표시되지 않습니다. 

이벤트 테이블 열

필드 설명
시간 (UTC) Event Time
이벤트 유형

이벤트 유형은 다음과 같습니다:

  • 귀하가 보낸 이벤트:
    • EVENT
    • setCustomerUserId
    • pageLoad: 귀하의 웹사이트에서 페이지가 로드/새로 고침될 때마다 웹 SDK로부터 전송됩니다
이벤트 내용

PBA로 기록된 이벤트 페이로드입니다.
코멘트
  • 유효(Valid): PBA가 이벤트를 수신 및 기록했습니다. 추가적인 조치가 필요하지 않습니다.
  • 유효하지 않음: 수정 조치가 필요한 오류 목록. 오류 메시지 형태는 다음과 같습니다.
    이벤트 필드 이름: 오류 설명 
  • 오류 메시지에 마우스를 올리면 다음과 같은 세부 정보를 확인할 수 있습니다.

    PBAWebSDKTestingErrorMessagesPopup_en-us.png

 

세부 내용 보기

mceclip0.png

이벤트 열을 클릭하여 처리된 이후의 내용을 확인합니다. 추가 정보는 웹 SDK 이벤트 파라미터를 참조하세요

절차

다음 절차를 완료하세요.

테스트 모드 활성화

선행 조건

테스트를 시작하기 전에, 웹 SDK가 귀사의 웹사이트나 테스트 웹사이트에 구현되어야 합니다.

브라우저 제한 사항

특정 브라우저에서 테스트 모드가 활성화되면, 탭에 상관없이 해당 브라우저는 지정된 웹사이트에만 접속할 수 있고 다른 웹사이트는 접속할 수 없습니다. 같은 컴퓨터에서 다른 웹사이트에 접속하기 위해 Chrome 대신 Safari와 같은 다른 브라우저를 사용하세요.

테스트 모드를 활성화하는 방법:

  1. SDK가 제대로 로드되었는지 확인:
    1. 앱스플라이어에서 상단 메뉴를 선택하고 내 앱 > 브랜드 번들 보기를 선택합니다.
    2. 필요한 웹 SDK 연동 테스트를 선택하세요.
      연동 페이지가 열립니다. 웹 개발자 키(dev key)가 표시됩니다.

      pba_web_sdk_integration_test_web_dev_key_en-us.png

    3. 새 브라우저 탭에서 웹 SDK가 설치된 귀사의 웹사이트로 이동하세요.
    4. 마우스 오른쪽 버튼을 클릭하여 '검사'를 선택하고 브라우저 개발자 도구를 열어주세요. 
    5. Console 탭으로 가세요.
    6. 콘솔에 다음 명령어를 입력하세요:
      window.AF_SDK.initPluginsConfig.pba.webAppId

      webAppID가 나타납니다.

      testing_pba_integration_webappid_check_en-us.png

    7. 웹 SDK 연동 테스트 페이지에서 보여지는 웹 개발자 키와 웹앱ID가 일치하는지 확인해 주세요.
  2. 테스트 모드 활성화:
    1. 웹사이트 브라우저 탭에서 Console 탭으로 이동하세요.
    2. 다음 명령어를 입력하세요: 
      window.AF_SDK.PLUGINS.PBA.turnOnDevMode()
      이 함수는 undefined을 반환합니다.

      testing_pba_integration_turnondevmode.png

  3. 테스트 모드 활성화 여부 확인:
    • Console 탭에서 다음 명령어를 입력하세요:
      window.AF_SDK.PLUGINS.PBA.isDevModeOn()

      반환값은 true입니다. 이는 테스트 모드가 활성화되었음을 의미합니다. 
      PBATestingWebSDKIntegrationIsDevModeOn_en-us.png

테스트 이벤트 전송

  • 테스트 모드에서 전송된 이벤트는 테스트 통합 페이지에서 확인할 수 있습니다.
  • 주의! 테스트 이벤트는 처리된 후 PBA 보고서에 반영됩니다. 보고서가 왜곡되지 않도록 eventRevenue을(를) 낮은 값으로 설정해 주세요. 값을 전송하지 않으면 PBA가 자동으로 0으로 처리합니다.

설명된 유형별로 예시 이벤트를 전송해 보세요. 

단계

작업

(명령 입력)

웹 SDK 테스트 통합 페이지

(예정된 결과) 
1

브라우저에서 새 탭을 열고 귀사 웹사이트의 아무 페이지나 방문하세요.

웹사이트를 열거나 새로고침할 때마다 PBA가 'pageLoad' 이벤트를 기록합니다:

PBATestingWebSDKPageLoadEvent_en-us.png

2

귀사의 웹사이트에 사용자로 로그인하거나 등록해서 setCustomerUserId 이벤트를 발생시키세요<1>.

mceclip3.png
3

웹 이벤트를 전송해 PBA 처리 상태를 확인해 보세요.

참고:

별도로 설정하지 않은 경우, eventRevenue와 eventRevenueCurrency는 기본값으로 설정됩니다:

  • eventRevenueCurrency: "USD"
  • eventRevenue: 0

PBAWebSDKTestEventEVENT_en-us.png

더 자세한 정보는 웹 SDK 이벤트 파라미터를 참조하세요.

mceclip5.png

문제 해결

테스트 페이지에 이벤트가 나타나지 않습니다

  1. 브라우저 개발자 도구에서 Network 탭으로 이동해 주세요.
  2. 필터 칸에 "websdk."를 입력해 주세요.
  3. HTTP 응답 코드를 기준으로 아래와 같은 조치를 취하세요:
    • 200: 앱스플라이어 기술 지원팀으로 연락해 주세요.
    • 400: " " 안에 모든 파라미터가 들어 있는지 확인해 보세요.