쿠폰 클릭 이벤트 (쿠폰 연동 관련 제어)

인쇄

쿠폰 클릭 이벤트 (쿠폰 연동 관련 제어)

인쇄

기사 요약

이 요약이 도움이 되었나요?

의견을 보내 주셔서 감사합니다.

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

LINK / LINK (New window)

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

messageCallback

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

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

Payload 객체

Property name	Type	Example	Description
campaignKey	string	“asdf1234”	방송의 고유번호
popupResourceId	string	“1234”	팝업의 고유번호
type	string	“COUPON” \| ”BANNER” \| ”NOTICE”	팝업의 종류
url	string	“https://shoplive.cloud”	link url

샘플 코드

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

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

LINK: function(payload) {
  var url = payload.url + '/?parameter/=' + '{your_parameter}';
	location.href = url;
  const player = cloud.shoplive.getPlayer();
  player.sendMessage("removeCoupon"); //쿠폰 닫기
}

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

LINK_NEW_WINDOW: function(payload) {
  var url = payload.url + '/?parameter/=' + '{your_parameter}';
	window.open(url);
	const player = cloud.shoplive.getPlayer();
  player.sendMessage("removeCoupon"); //쿠폰 닫기
}

Download coupon

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

messageCallback

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

Action	Payload	Description
DOWNLOAD_COUPON	json object	쿠폰을 클릭할 때 Coupon code 값과 함께 팝업 타입을 전달합니다. 팝업 타입 - BANNER \| COUPON \| NOTICE

Action

Payload

Description

DOWNLOAD_COUPON

json object

쿠폰을 클릭할 때 Coupon code 값과 함께 팝업 타입을 전달합니다.

팝업 타입 - BANNER | COUPON | NOTICE

Payload 객체

Property name	Type	Example	Description
campaignKey	string	“asdf1234”	방송의 고유번호
coupon	string	“12341234”	쿠폰 번호
popupResourceId	string	“1234”	팝업의 고유번호
type	string	“COUPON” \| ”BANNER” \| ”NOTICE”	팝업의 종류

샘플 코드

플레이어에서 쿠폰을 클릭 했을 때, 고객사 서버의 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
  }
},

User define

쿠폰 클릭 이벤트를 사용자 정의(User define)로 선택한 경우 쿠폰 연동 방법입니다.

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

messageCallback

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

Action	Payload	Description
CUSTOM_ACTION	json object	쿠폰을 클릭할 때 사용자가 정의한 `payload`객체와 함께 팝업에 대한 정보를 전달합니다.

Payload 객체

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

Property name	Type	Example	Description
campaignKey	string	“asdf1234”	방송의 고유번호
id	string	“1234”	팝업의 고유번호
payload	object	{ “coupon”: “12341234”, “url”: “https://shoplive.cloud”, … }	사용자가 정의한 payload 객체
type	string	“COUPON” \| ”BANNER” \| ”NOTICE”	팝업의 종류

샘플 코드

플레이어에서 쿠폰을 클릭 했을 때, 아래와 같이 사용자 정의 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
  const player = cloud.shoplive.getPlayer();
  player.sendMessage("removeCoupon"); //쿠폰 닫기
},

클립보드에 쿠폰 복사 기능이 필요한 경우에 아래 샘플과 같이 DOWNLOAD_COUPON을 정의할 수 있습니다.

클립보드에 쿠폰복사 샘플

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  // GLOBAL MessageCallback FUNCTION
  var messageCallback = {
    DOWNLOAD_COUPON: function (payload) {
      if (navigator.clipboard && window.isSecureContext) {
        // Copy to clipboard using Clipboard API in HTTPS environment
        navigator.clipboard.writeText(payload.coupon).then(function () {
          // Display dialog
          alert('Copy to clipboard completed.');
        }).catch(function (error) {
          alert('Failed to copy coupon code. Coupon code:' + payload.coupon);
        });
      } else {
        // Copy to clipboard using execCommand in HTTP environment
        var textarea = document.createElement("textarea");
        document.body.appendChild(textarea);
        textarea.value = payload.coupon;
        textarea.select();
        var successful = document.execCommand("copy");
        if (!successful) {
          // Display dialog if copy fails
          alert('Failed to copy coupon code. Coupon code:' + payload.coupon);
        }
        else {
          // Display dialog if copy is successful
          alert('Copy to clipboard completed.');
        }
        document.body.removeChild(textarea);
      }
    }
  }
  cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE', messageCallback: messageCallback });
</script>

What's Next

상품 클릭 이벤트 (상품 클릭 동작 제어)

LINK / LINK (New window)
Download coupon
User define