Guides

payload 정의

브릿지 가이드에서 case 로 추가시에 확인가능한 매계변수 객체인 payload 를 통신으로 데이터를 받을수 있습니다. case 별로 필요한 값을 addEventListener 에 추가하여 적용가능합니다.

sauceflexEnter

방송 입장 - 페이지 진입시 자동으로 호출되며 빈값을 전달합니다.

PayloadType
nullVoid

sauceflexBroadcastStatus

방송 상태가 변경될 경우 설정되어있는 값을 전달합니다. (방송 상태 변경 발생 시 자동으로 호출)

PayloadTypedescription
broadcastStateCodeBroadcastStateCode방송 상태

sauceflexMoveBanner

배너 클릭시 설정해놓은 값을 전달합니다.

PayloadTypedescription
linkUrlString배너링크정보
broadcastIdxString방송ID
bannerIdString배너ID

sauceflexMoveExit

방송 나가기를 클릭할 때 호출되며 빈값을 전달합니다.

PayloadType
nullVoid

로그인 버튼을 클릭할 때 호출되며 빈값을 전달합니다.

PayloadType
nullVoid

상품 클릭시 설정해놓은 값을 전달합니다.

PayloadTypedescription
linkUrlString상품링크 정보
broadcastIdxString방송ID
priceString | Number상품 가격
externalProductIdString | null상품코드
isSoldoutBoolean품절상태

sauceflexOnShare

방송 공유하기 버튼 클릭시 설정해둔 값을 전달합니다.

PayloadTypedescription
linkUrlString방송 링
shortUrlString | Null방송 short 링크

sauceflexPictureInPicture

PIP 버튼 ( 웹뷰에서만 확인가능) 버튼 클릭시 방송 플레이어의 버튼 UI 를 감춤처리 해줍니다. (PIP 기능은 별도 개발 필요)

PayloadType
nullVoid

sauceflexSendPlayTime

현재 방송이 라이브 혹은 VOD 의 어느지점에서 변경되면 지속적으로 값을 전달합니다.

PayloadTypedescription
positionNumber현재의 영상 위치

리워드가 달성된 이후 노출되는 버튼 클릭시 설정해둔 값을 전달합니다.

PayloadTypedescription
broadcastIdxString방송ID
linkUrlString리워드 설정 URL

쿠폰 기능에서 노출되는 버튼 클릭시 설정해둔 값을 전달합니다.

PayloadTypedescription
broadcastIdxString방송ID
couponCodeString | Null쿠폰 코드
couponIdString | Null등록한 쿠폰 ID
couponNameString | Null등록한 쿠폰명
couponType'link' | 'newWindow' | 'download' | 'custom'쿠폰타입
linkUrlString | Null링크 이동 URL
metadataString | Null클릭이벤트 사용자 설정시의 전달데이터 값

사용 예시

window.addEventListener("message", (e) => {
  if (typeof e.data !== "string") return;

  let jsonData = JSON.parse(e.data);

  switch (jsonData.key) {
    case "sauceflexEnter":
      console.log("방송 입장", jsonData.params);
      break;

    case "sauceflexBroadcastStatus":
      console.log("방송 상태", jsonData.params.broadcastStateCode);
      break;

    case "sauceflexMoveExit":
      console.log("방송 닫기");
      break;

    case "sauceflexMoveBanner":
      console.log("배너 데이터 링크 확인용", jsonData.params.linkUrl);
      console.log("배너 데이터 방송 확인용", jsonData.params.broadcastIdx);
      console.log("배너 데이터 배너 아이디", jsonData.params.bannerId);
      break;

    case "sauceflexMoveLogin":
      console.log("방송 로그인");
      break;

    case "sauceflexMoveProduct":
      console.log("상품 데이터 링크 확인용", jsonData.params.linkUrl);
      console.log("상품 데이터 방송 확인용", jsonData.params.broadcastIdx);
      break;

    case "sauceflexOnShare":
      console.log("공유 링크", jsonData.params.linkUrl);
      console.log("공유 숏링크", jsonData.params.shortUrl);
      break;

    case "sauceflexPictureInPicture":
      console.log("PIP");
      break;

    case "sauceflexSendPlayTime":
      console.log("현재 방송위치", jsonData.params.position);
      break;

    case "sauceflexMoveReward":
      console.log("리워드 달성 링크 데이터", jsonData.params.linkUrl);
      break;

    case "sauceflexMoveCoupon":
      console.log("쿠폰 링크 데이터", jsonData.params.linkUrl);
      break;

  }
});