Guides

쿠폰 연동

방송 편성 시 쿠폰 기능을 사용하는 경우, '플레이어의 동작 환경'과 쿠폰 설정 시의 '클릭 이벤트' 항목에 따라 브릿지 연동 작업이 필요합니다.

📘

  • 웹뷰 관련 세팅에 대한 자세한 내용은 해당 링크를 참고해주세요.
  • 쿠폰 클릭에 대한 브릿지 사양은 해당 링크브릿지 항목 내 sauceflexMoveCoupon 브릿지 내용을 참고해주세요.

동작 환경

동작 환경이 고객사 앱 내인 경우나 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("쿠폰 클릭");
        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
);