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 링크 |
| broadcastIdx | String | 방송ID |
| broadcastThumbnailUrl | String | 큐레이션 썸네일 |
| broadcastName | String | 방송명 |
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 | 등록한 쿠폰명 |
| linkUrl | String | Null | 링크 이동 URL |
| metaData | String | Null | 클릭이벤트 사용자 설정시의 전달데이터 값 |
sauceflexBannerAndroidScheme
배너 클릭 Android 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.
Payload | Type | description |
|---|---|---|
url | String | Android 앱 전용 링크 |
broadcastIdx | String | 방송 ID |
bannerId | String | 배너 ID |
webUrl | String | Null | Web URL 링크
|
sauceflexBannerIosScheme
배너 클릭 iOS 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.
Payload | Type | description |
|---|---|---|
url | String | iOS 앱 전용 링크 |
broadcastIdx | String | 방송 ID |
bannerId | String | 배너 ID |
webUrl | String | Null | Web URL 링크
|
sauceflexProductAndroidScheme
상품 클릭 Android 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.
Payload | Type | description |
|---|---|---|
url | String | Android 앱 전용 링크 |
broadcastIdx | String | 방송 ID |
price | String | Number | 상품 가격 |
externalProductId | String | null | 상품코드 |
isSoldout | Boolean | 품절상태 |
webUrl | String | Null | Web URL 링크
|
sauceflexProductIosScheme
상품 클릭 iOS 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.
Payload | Type | description |
|---|---|---|
url | String | iOS 앱 전용 링크 |
broadcastIdx | String | 방송 ID |
price | String | Number | 상품 가격 |
externalProductId | String | null | 상품코드 |
isSoldout | Boolean | 품절상태 |
webUrl | String | Null | Web URL 링크
|
sauceflexMoveSlotBanner
슬롯 배너 클릭시의 설정해놓은 값을 전달합니다.
| Payload | Type | description |
|---|---|---|
| slotBannerId | String | 슬롯배너 ID |
| broadcastId | String | 방송 ID |
| url | String | Web URL 링크 |
| webUrlTargetTypeCode | "BLANK" | "SELF" | BLANK : 새창 SELF : 현재창 |
sauceflexSlotBannerAndroidScheme
슬롯 배너 클릭 Android 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.
| Payload | Type | description |
|---|---|---|
| slotBannerId | String | 슬롯배너 ID |
| broadcastId | String | 방송 ID |
| url | String | scheme URL |
| webUrlTargetTypeCode | "BLANK" | "SELF" | BLANK : 새창 SELF : 현재창 |
| webUrl | String | Web URL 링크 |
sauceflexSlotBannerIosScheme
슬롯 배너 클릭 iOS 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.
| Payload | Type | description |
|---|---|---|
| slotBannerId | String | 슬롯배너 ID |
| broadcastId | String | 방송 ID |
| url | String | scheme URL |
| webUrlTargetTypeCode | "BLANK" | "SELF" | BLANK : 새창 SELF : 현재창 |
| webUrl | String | Web URL 링크 |
sauceflexCouponAndroidScheme
쿠폰 기능에서 노출되는 버튼 클릭시 Android 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.
| Payload | Type | description |
|---|---|---|
| broadcastIdx | String | 방송ID |
| couponCode | String | Null | 쿠폰 코드 |
| couponId | String | Null | 등록한 쿠폰 ID |
| couponName | String | Null | 등록한 쿠폰명 |
| couponType | 'link' | 'newWindow' | 'download' | 'custom' | 'apiDownload' | 쿠폰타입 |
| linkUrl | String | Null | 링크 이동 URL |
| metaData | String | Null | 클릭이벤트 사용자 설정시의 전달데이터 값 |
| schemeUrl | String | Null | scheme URL |
sauceflexCouponIosScheme
쿠폰 기능에서 노출되는 버튼 클릭시 iOS 앱 전용 링크 (앱스킴) 사용시 설정해둔 값을 전달합니다.
| Payload | Type | description |
|---|---|---|
| broadcastIdx | String | 방송ID |
| couponCode | String | Null | 쿠폰 코드 |
| couponId | String | Null | 등록한 쿠폰 ID |
| couponName | String | Null | 등록한 쿠폰명 |
| couponType | 'link' | 'newWindow' | 'download' | 'custom' | 'apiDownload' | 쿠폰타입 |
| linkUrl | String | Null | 링크 이동 URL |
| metaData | String | Null | 클릭이벤트 사용자 설정시의 전달데이터 값 |
| schemeUrl | String | Null | scheme URL |
sauceflexFocusBack
고객사 페이지에서 특정 UI 동작(예.공유하기 버튼 클릭 시 등) 이후, 라이브 플레이어 내부로 포커스를 복구하기 위해 사용하는 브릿지 이벤트입니다.
Payload | Type | description |
|---|---|---|
elementId | 'share-bottom-sheet' | 플레이어 내부로 포커스를 복구할 대상의 매핑 ID 값
|
delayMsec | Number | Null | 포커스 복구 까지 지연 시간(단위는 ms.), 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;
case "sauceflexBannerAndroidScheme":
console.log("배너 Android 앱스킴 링크", jsonData.params.url);
break;
case "sauceflexBannerIosScheme":
console.log("배너 iOS 앱스킴 링크", jsonData.params.url);
break;
case "sauceflexProductAndroidScheme":
console.log("상품 Android 앱스킴 링크", jsonData.params.url);
break;
case "sauceflexProductIosScheme":
console.log("상품 iOS 앱스킴 링크", jsonData.params.url);
break;
case "sauceflexMoveSlotBanner":
console.log("슬롯 배너 데이터", jsonData.params.url);
break;
case "sauceflexCouponAndroidScheme":
console.log("쿠폰 AOS 앱스킴 데이터 ", jsonData.params.url);
break;
case "sauceflexCouponIosScheme":
console.log("쿠폰 iOS 앱스킴 데이터 ", jsonData.params.url);
break;
}
});Updated 1 day ago