payload 정의
브릿지 가이드에서 case 로 추가시에 확인가능한 매계변수 객체인 payload 를 통신으로 데이터를 받을수 있습니다. case 별로 필요한 값을 addEventListener 에 추가하여 적용가능합니다.
sauceflexEnter
방송 입장 - 페이지 진입시 자동으로 호출되며 빈값을 전달합니다.
Payload | Type |
---|---|
null | Void |
sauceflexBroadcastStatus
방송 상태가 변경될 경우 설정되어있는 값을 전달합니다. (방송 상태 변경 발생 시 자동으로 호출)
Payload | Type | description |
---|---|---|
broadcastStateCode | BroadcastStateCode | 방송 상태 |
sauceflexMoveBanner
배너 클릭시 설정해놓은 값을 전달합니다.
Payload | Type | description |
---|---|---|
linkUrl | String | 배너링크정보 |
broadcastIdx | String | 방송ID |
bannerId | String | 배너ID |
sauceflexMoveExit
방송 나가기를 클릭할 때 호출되며 빈값을 전달합니다.
Payload | Type |
---|---|
null | Void |
로그인 버튼을 클릭할 때 호출되며 빈값을 전달합니다.
Payload | Type |
---|---|
null | Void |
상품 클릭시 설정해놓은 값을 전달합니다.
Payload | Type | description |
---|---|---|
linkUrl | String | 상품링크 정보 |
broadcastIdx | String | 방송ID |
price | String | Number | 상품 가격 |
externalProductId | String | null | 상품코드 |
isSoldout | Boolean | 품절상태 |
sauceflexOnShare
방송 공유하기 버튼 클릭시 설정해둔 값을 전달합니다.
Payload | Type | description |
---|---|---|
linkUrl | String | 방송 링 |
shortUrl | String | Null | 방송 short 링크 |
sauceflexPictureInPicture
PIP 버튼 ( 웹뷰에서만 확인가능) 버튼 클릭시 방송 플레이어의 버튼 UI 를 감춤처리 해줍니다. (PIP 기능은 별도 개발 필요)
Payload | Type |
---|---|
null | Void |
sauceflexSendPlayTime
현재 방송이 라이브 혹은 VOD 의 어느지점에서 변경되면 지속적으로 값을 전달합니다.
Payload | Type | description |
---|---|---|
position | Number | 현재의 영상 위치 |
리워드가 달성된 이후 노출되는 버튼 클릭시 설정해둔 값을 전달합니다.
Payload | Type | description |
---|---|---|
broadcastIdx | String | 방송ID |
linkUrl | String | 리워드 설정 URL |
쿠폰 기능에서 노출되는 버튼 클릭시 설정해둔 값을 전달합니다.
Payload | Type | description |
---|---|---|
broadcastIdx | String | 방송ID |
couponCode | String | Null | 쿠폰 코드 |
couponId | String | Null | 등록한 쿠폰 ID |
couponName | String | Null | 등록한 쿠폰명 |
couponType | 'link' | 'newWindow' | 'download' | 'custom' | 쿠폰타입 |
linkUrl | String | Null | 링크 이동 URL |
metadata | String | 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;
}
});
Updated about 11 hours ago