目次 x
    クーポンクリックイベント
      • 印刷する
      目次

      クーポンクリックイベント

        • 印刷する
        記事の要約

        このガイドでは、Shopliveが提供するクーポンポップアップをクーポンシステムに統合する方法について説明します。

        1. LINK / LINK (新しいウィンドウを開く)

        クーポンクリックイベントが「リンク」または「リンク(新しいウィンドウを開く)」に設定されている場合にクーポンを統合する方法。

        メッセージコールバック

        messageCallback は、クーポンがクリックされたときに呼び出されます。これにより、イベントごとにカスタムアクションを定義できます。

        アクション

        ペイロード

        説明

        LINK

        JSON オブジェクト

        messageCallback 関数は、クーポンのクリックイベントが Link に設定されている場合に呼び出されます。オーバーライドしない場合、ページは Web 内を移動し (現在のライブ ページを離れます)、SDK は PIP モードに入り、NAVIGATION を呼び出します

        LINK_NEW_WINDOW

        JSON オブジェクト

        messageCallback 関数は、クーポン クリック イベントが Link(New window) に設定されている場合に呼び出されます。オーバーライドしない場合、URL は Web の新しいウィンドウに表示され、SDK は PIP モードに入り、NAVIGATION を呼び出します。

        ペイロード

        名前

        種類

        例

        説明: __________

        campaignKey

        string

        "ASDF1234" (ASDF1234)

        ユニークなキャンペーンキー

        popupResourceId

        string

        "1234"

        ユニークなポップアップキー

        type

        string

        「クーポン」 |
        「バナー」 |
        「お知らせ」

        ポップアップの種類

        url

        string

        「https://shoplive.cloud」

        リンクURL

        例

        プレーヤーでクーポンをクリックしたときにリンクURLにパラメータを追加してページに移動する場合は、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"); //Removing coupon
}

        ページを新しいウィンドウで開くには、 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"); //Removing coupon
}

        2. クーポンのダウンロード

        クーポンクリックイベントが「クーポンをダウンロード」に設定されている場合に、クーポンをECサイトシステム連携することができます。

        メッセージコールバック

        messageCallback は、クーポンがクリックされたときに呼び出されます。これにより、イベントごとにカスタムアクションを定義できます。

        アクション

        ペイロード

        説明

        DOWNLOAD_COUPON

        JSON オブジェクト

        クーポンをクリックすると、クーポンコードの値とポップアップタイプが渡されます。
        タイプ - BANNER | COUPON | NOTICE

        ペイロード オブジェクト

        名前

        種類

        例

        説明: __________

        campaignKey

        string

        "ASDF1234" (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 server for issuing coupons is directly operated 
  if('YOUR_COUPON_API') {    
     fetch('YOUR_COUPON_API')
    .then(res => res.json())
    .then(res => {
      // The coupon download processing result is returned in success.
      if (res.success) {
        alert("Coupon download completed");
      } else {
        alert("Coupons are no longer available more");
      }
    });
  }
  // If there is no API server, move to the coupon issuance page.
  else {
    location.href = 'https://YOUR_COUPON_DOWNLOAD_PAGE/' + payload.coupon
  }
}

        3. ユーザー定義

        クーポンクリックイベントが「ユーザー定義」に設定されている場合に、クーポンをECシステムと連携することができます。

        情報を JSON 形式で定義し、ペイロード オブジェクトに追加できます。

        メッセージコールバック

        messageCallback は、クーポンがクリックされたときに呼び出されます。これにより、イベントごとにカスタムアクションを定義できます。

        アクション

        ペイロード

        説明

        CUSTOM_ACTION

        JSON オブジェクト

        クーポンがクリックされると、ポップアップに関する情報と、ユーザーが定義するペイロード オブジェクトが渡されます。

        ペイロード オブジェクト

        イベントのペイロードオブジェクトには、ユーザーがクーポン編集ウィンドウで定義するペイロードオブジェクト CUSTOM_ACTION が含まれます。

        名前

        種類

        例

        説明: __________

        campaignKey

        string

        "ASDF1234" (ASDF1234)

        ユニークなキャンペーンキー

        id

        string

        "1234"

        ユニークなポップアップキー

        payload

        object

        {
        クーポン:「12341234」、
        URL: "https://shoplive.cloud"、
        ...
        }

        カスタム ペイロード オブジェクト

        type

        string

        「クーポン」 |
        「バナー」 |
        「お知らせ」

        ポップアップのタイプ

        例

        プレーヤーでクーポンをクリックすると、以下のようにカスタムペイロードオブジェクトを使用して CUSTOM_ACTION を定義することができます。

        これは、 CUSTOM_ACTION イベントが発生したときに、カスタム ペイロード オブジェクトを使用してイベントを手動で処理する方法の例です。カスタム ペイロード オブジェクトは、ポップアップ編集ウィンドウで {"coupon": "12341234", "url": "https://shoplive.cloud/sample_coupon"} として定義されます。

        基本

        CUSTOM_ACTION: function (payload) {
	// customPayload is object of customized payload
  var customPayload = payload.payload;

  window.open(customPayload.url);  // Open link with new window
  alert(customPayload.coupon + " coupon!");  // Coupon code alert
  const player = cloud.shoplive.getPlayer();
  player.sendMessage("removeCoupon"); //Dismiss coupon
}

        クリップボードへのクーポンコピー機能が必要な場合は、以下のサンプルのように DOWNLOAD_COUPON を定義することができます。

        クーポンコードをクリップボードにコピー

        <script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  // GLOBAL MessageCallback FUNCTION
  var messageCallback = { 
    DOWNLOAD_COUPON: function(payload) {
      // get Current Player
      var player = cloud.shoplive.getPlayer();
      // if, ONAIR player
      if(player.campaignStatus === 'ONAIR' && player.campaignKey === payload.campaignKey) { 
         // copy to clipboard
         var textarea = document.createElement("textarea");
         document.body.appendChild(textarea);
         textarea.value = payload.coupon;
         textarea.select();
         document.execCommand("copy");
         document.body.removeChild(textarea);
         // Show Dialog
         player.sendMessage('showDialog', {title: 'Copy to clipboard completed.', message: payload.coupon });
      }
    }
  }
  cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE', messageCallback: messageCallback });
</script>

        What's Next