쿠폰 연동하기

Shoplive에서 제공하는 쿠폰 팝업을 고객사의 쿠폰 시스템과 연동하기 위한 가이드입니다.

1. LINK / LINK (New window)

쿠폰 클릭 이벤트를 LINK 또는 LINK (New window)로 설정한 경우 쿠폰 연동 방법입니다.

messageCallback

쿠폰 클릭 시 호출되는 messageCallback입니다. 이를 통해 link 이벤트에 대한 custom action을 정의할 수 있습니다.

actionpayload설명
LINKjson object쿠폰 클릭이벤트를 Link로 설정한 경우 호출됩니다. 별도로 구현(override)하지 않는 경우 웹에서는 페이지 자체가 이동되며 (현재 라이브 페이지 이탈) 앱(SDK)의 경우 PIP 모드로 진입하고 NAVIGATION이 호출됩니다.
LINK_NEW_WINDOWjson object쿠폰 클릭이벤트를 Link(New window)로 설정한 경우 호출됩니다. 별도로 구현(override)하지 않는 경우 웹에서는 새창에 linkUrl을 띄우며 앱(SDK)의 경우 PIP 모드로 진입하고 NAVIGATION이 호출됩니다.

Payload 객체

NameTypeExampleDescription
campaignKeystring“asdf1234”방송의 고유번호
popupResourceIdstring“1234”팝업의 고유번호
typestring“COUPON” |
”BANNER” |
”NOTICE”
팝업의 종류
urlstringhttps://shoplive.cloud”link url

샘플 코드

Shoplive 플레이어에서 쿠폰을 클릭했을 때 link url에 파라미터 추가 후 해당 페이지로 이동하려는 경우 아래와 같이 LINK를 정의할 수 있습니다.

현재 창에서 페이지를 여는 경우 location.href 를 사용하고,

LINK: function(payload) {
  var url = payload.url + '/?parameter/=' + '{your_parameter}';
    location.href = url;
    mplayer("send", "removeCoupon");  // 페이지 연결 후 쿠폰 닫기
}

새 창에서 페이지를 여는 경우 window.open 을 사용해야 합니다.

LINK_NEW_WINDOW: function(payload) {
  var url = payload.url + '/?parameter/=' + '{your_parameter}';
    window.open(url);
    mplayer("send", "removeCoupon");  // 페이지 연결 후 쿠폰 닫기
}



2. Download coupon

쿠폰 클릭 이벤트를 Download coupon으로 선택한 경우 쿠폰 연동 방법입니다.

messageCallback

쿠폰 클릭 시 호출되는 messageCallback입니다. 이를 통해 Download coupon 이벤트에 대한 custom action을 정의할 수 있습니다.

actionpayload설명
DOWNLOAD_COUPONjson object쿠폰을 클릭할 때 Coupon code 값과 함께 팝업 타입을 전달합니다.
팝업 타입 - BANNER | COUPON | NOTICE

Payload 객체

NameTypeExampleDescription
campaignKeystring“asdf1234”방송의 고유번호
couponstring“12341234”쿠폰 번호
popupResourceIdstring“1234”팝업의 고유번호
typestring“COUPON” |
”BANNER” |
”NOTICE”
팝업의 종류

샘플 코드

Shoplive 플레이어에서 쿠폰을 클릭했을 때 고객사 서버의 API를 호출해 쿠폰 다운로드를 처리하려는 경우 아래와 같이 DOWNLOAD_COUPON을 정의할 수 있습니다.

fetch로 고객사 서버의 API를 호출해 쿠폰 다운로드를 처리하고, 처리 결과에 따라 쿠폰 UI를 조작(숨김/노출/흐리게) 할 수 있습니다.

DOWNLOAD_COUPON: function(payload) {
  fetch('coupon download api address')
    .then(res => res.json())
    .then(res => {
                // 쿠폰 다운로드 처리 결과를 success에 담아 반환한 경우
        if (res.success) {
          alert("쿠폰을 다운로드 받았습니다.");
        } else {
          alert("쿠폰이 모두 소진되었습니다.");
        }
        mplayer("send", "removeCoupon");  // 쿠폰 다운로드 처리 후 쿠폰 닫기
    });
},



3. User define

쿠폰 클릭 이벤트를 User define으로 선택한 경우 쿠폰 연동 방법입니다.

고객사에서 필요한 정보를 JSON 형식으로 정의해 Payload 객체에 추가할 수 있습니다.

messageCallback

쿠폰 클릭 시 호출되는 messageCallback입니다. 이를 통해 User define 이벤트에 대한 custom action을 정의할 수 있습니다.

actionpayload설명
CUSTOM_ACTIONjson object쿠폰을 클릭할 때 사용자가 정의한 payload 객체와 함께 팝업에 대한 정보를 전달합니다.

Payload 객체

CUSTOM_ACTION의 payload 객체에는 쿠폰 Edit 창에서 사용자가 정의한 Payload 객체가 포함되어 있습니다.

NameTypeExampleDescription
campaignKeystring“asdf1234”방송의 고유번호
idstring“1234”팝업의 고유번호
payloadobject{
coupon: “12341234”,
url: “https://shoplive.cloud”,

}
사용자가 정의한 payload 객체
typestring“COUPON” |
”BANNER” |
”NOTICE”
팝업의 종류

샘플 코드

Shoplive 플레이어에서 쿠폰을 클릭했을 때 아래와 같이 사용자 정의 Payload 객체를 사용해 CUSTOM_ACTION을 정의할 수 있습니다.

쿠폰 Edit 창에서 사용자 정의 payload를 {”coupon”: “12341234”, “url”: “<<<<<<<<https://shopli>>>>>>>>ve.cloud”} 이와 같이 정의하고,

CUSTOM_ACTION 이벤트 발생 시 사용자 정의 payload 객체를 사용해 수동으로 이벤트를 처리하는 예시입니다.

CUSTOM_ACTION: function (payload) {
    // customPayload이 사용자 정의 payload 객체입니다.
  var customPayload = payload.payload;

  window.open(customPayload.url);  // 새 창으로 link 열기
  alert(customPayload.coupon +  " 쿠폰이다!");  // 쿠폰 번호 alert
  mplayer("send", "removeCoupon");  // 쿠폰 닫기
},