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("쿠폰 클릭");
        
        /*
         * 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
);