閲覧データ計測

    閲覧データ計測


    記事の要約

    このページでは、messageCallbackを使用してビデオの進行に関連するイベントを受信する方法について説明します。

    インストール例

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

    <script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
    <script>
      const messageCallback = {
                DETAIL_ACTIVE: (payload) => {
                //This messageCallback event indicates that Shortform video started to play
                    console.log(`(DETAIL_ACTIVE) shortsId:${payload.shorts.shortsId}`, payload)
                },
                DETAIL_VIEWING_SECONDS: (payload) => {
                //this messageCallback event fired every 1~3 seconds. (per 1seconds until 3s, and per 3seconds afterwards)
                    console.log(`(DETAIL_VIEWING_SECONDS) shortsId:${payload.shorts.shortsId}`, payload)
                },
                DETAIL_ON_PLAYER_DISMISS: () => {
                //This messageCallback event indicates that Shortform video dismissed from screen
                    console.log(`(DETAIL_ON_PLAYER_DISMISS)`)
                },
            }
      
      cloud.shoplive.initShortform({ 
        accessKey: 'YOUR ACCESS KEY HERE', 
        messageCallback: messageCallback 
      });
    </script>


    メッセージとペイロード

    以下は、messageCallback設定で直接処理できるビデオ進行に関連するイベントのリストです。


    DETAIL_ACTIVE

    ショートフォームの詳細をアクティブにするとき(フィード内でのショートフォームのビデオ再生)

    Payload

    Type

    shorts

    Shorts

    DETAIL_ON_PLAYER_DISMISS

    ショートフォームの詳細を閉じるとき(フィード内でのショートフォームのビデオ再生)

    Payload

    Type

    {}

    object

    DETAIL_VIEWING_SECONDS

    ショートフォームの詳細ビデオを視聴しているときに3秒ごとにこのイベントが発生します

    Payload

    Type

    shorts

    Shorts

    videoCurrentTime

    number