ショートフォーム MessageCallback

ショートフォームにおけるさまざまなイベントを直接処理できる messageCallback 関数を提供します。

ショートフォームプレイヤー内でのライブ配信ガイド

ショートフォームプレイヤー内でライブ配信を行う際に使用するべきイベントは以下の通りです。

DETAIL_CLICK_LIVE_CAMPAIGN_LINK を追加することで、該当機能を利用可能です。

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>
  const messageCallback: {
    DETAIL_CLICK_LIVE_CAMPAIGN_LINK: function(payload) {
      var url = `https://YOUR_LIVE_PLAYER_PAGE_URL?campaignKey=${payload.campaignKey}`
      location.href = url;
    },
  };
  cloud.shoplive.initShortform({
    accessKey: 'YOUR ACCESS KEY HERE',
    messageCallback: messageCallback
  });
</script>

Messages & Payload

DETAIL_CLICK_LIVE_CAMPAIGN_LINK

ライブ中にショートフォームプレイヤーに入ると、ライブ放送の再生およびライブランディングアイコンを挿入する場合があります。

Shoplive ショートフォームには、ショートフォーム内で発生するイベントを処理できる messageCallback 関数が用意されています。

messageCallback のインストール例

以下のコードをページの共通レイアウトにインストールします

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>
  const messageCallback: { 
    LOGIN_REQUIRED: function(payload) {
      alert("LOGIN_REQUIRED");
      location.href = "YOUR_LOGIN_PAGE_URL";
    },
    ON_CLICK_PRODUCT_ITEM: function(payload) {
      alert("ON_CLICK_PRODUCT_ITEM");
      location.href = payload.product.url;      
    }
  };
  
  cloud.shoplive.initShortform({ 
    accessKey: 'YOUR ACCESS KEY HERE', 
    messageCallback: messageCallback 
  });
</script>

メッセージ & ペイロード

以下は、messageCallback 設定で直接処理できるイベントの一覧です。

LOGIN_REQUIRED

ユーザーがコメントを投稿しようとしたときなど、ログインが必要な場所をクリックしたとき。

payload	type
type	string

ON_CLICK_PRODUCT_ITEM

商品リスト内の商品をクリックしたとき

payload	type
product	Product
shorts	Shorts

ON_CLICK_SHARE_BUTTON

共有ボタンをクリックしたとき

payload	type
shorts	Shorts
url	string