쿠폰 연동
방송 편성 시 쿠폰 기능을 사용하는 경우, '플레이어의 동작 환경'과 쿠폰 설정 시의 '클릭 이벤트' 항목에 따라 브릿지 연동 작업이 필요합니다.
동작 환경
동작 환경이 고객사 앱 내인 경우나 iframe인 경우에는 브릿지 연동 작업이 필요합니다.
클릭 이벤트
쿠폰 설정 시의 '클릭 이벤트' 항목이 쿠폰 다운로드나 사용자 정의인 경우에는 브릿지를 사용할 수 있는 환경에서만 쿠폰 기능을 사용할 수 있습니다.
쿠폰 다운로드
쿠폰 클릭 브릿지를 통해 쿠폰의 공통 데이터와 함께 쿠폰코드가 전달됩니다.
사용자 정의
쿠폰 클릭 브릿지를 통해 쿠폰의 공통 데이터와 함께 전달 데이터가 전달됩니다.
링크 이동 / 링크 이동 (새창)
쿠폰 클릭 브릿지를 통해 쿠폰의 공통 데이터와 함께 링크 URL이 전달됩니다.
쿠폰 클릭 브릿지 콜백 예시
window.addEventListener(
"message",
function (e) {
if (typeof e.data !== "string") return;
const { key, params } = JSON.parse(e.data);
switch (key) {
...
case "sauceflexMoveCoupon": {
console.log("쿠폰 클릭");
/*
* broadcastIdx: (string) 방송ID
* couponCode: (string | null) 쿠폰 클릭 시 동작 유형이 '쿠폰 다운로드'인 경우 필요한 쿠폰 코드
* couponId: (string) 쿠폰ID
* couponName: (string) 쿠폰명
* couponType: (string) 쿠폰 클릭 시 동작 유형 ('link' || 'newWindow' || 'download' || 'custom')
* linkUrl: (string | null) 쿠폰 클릭 시 동작 유형이 '링크 이동'과 '링크 이동 (새창)'인 경우 필요한 쿠폰에 연결된 링크
* metadata: (string | null) 쿠폰 클릭 시 동작 유형이 '사용자 정의'인 경우 필요한 전달 데이터
**/
const {
broadcastIdx,
couponCode,
couponId,
couponName,
couponType,
linkUrl,
metadata
} = params;
if (couponType === "link") {
window.location.href = linkUrl;
}
if (couponType === "newWindow") {
window.open(linkUrl);
}
if (couponType === "download") {
fetch("{{API링크}}" + `?couponCode=${couponCode}`)
.then(res => res.json())
.then(res => {
if (res.success) {
console.log("쿠폰 다운로드 완료");
} else {
console.log("쿠폰 다운로드 실패");
}
});
}
if (couponType === "custom") {
fetch("{{API링크}}" + `?metadata=${metadata}`)
.then(res => res.json())
.then(res => {
if (res.success) {
console.log("쿠폰 처리 완료");
} else {
console.log("쿠폰 처리 실패");
}
});
}
break;
}
...
}
},
false
);
Updated about 1 hour ago