쿠폰 연동하기

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

1. LINK / LINK (New window)

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

messageCallback

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

Payload 객체

샘플 코드

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을 정의할 수 있습니다.

Payload 객체

샘플 코드

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

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

DOWNLOAD_COUPON: function(payload) {
  console.log('User clicks coupon. coupon code : ' + payload.coupon);

  // 쿠폰 발급을 위한 API 서버를 직접 운영하고 있는 경우 
  if('YOUR_COUPON_API') {    
     fetch('YOUR_COUPON_API')
    .then(res => res.json())
    .then(res => {
      // 쿠폰 다운로드 처리 결과를 success에 담아 반환한 경우
      if (res.success) {
        alert("쿠폰을 다운로드 받았습니다.");
      } else {
        alert("쿠폰이 모두 소진되었습니다.");
      }
    });
  }
  // API 서버가 없고, 쿠폰 발급 페이지로 이동하기.
  else {
    location.href = 'https://YOUR_COUPON_DOWNLOAD_PAGE/' + payload.coupon
  }
},

3. User define

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

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

messageCallback

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

Payload 객체

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

샘플 코드

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

쿠폰 Edit 창에서 사용자 정의 payload를 {"coupon": "12341234", "url": "https://shoplive.cloud/sample_coupon"} 처럼 정의하고,

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

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

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