ショートフォーム プレビュー再生(PIPモード) の実装

ショートフォーム動画は、PIPスタイルの動画バナーとして商品詳細ページに埋め込むことができます。

基本ショートフォームプレビュー

初期化

ここでは、ユーザー認証なし、簡易認証、JWTトークン認証でShoplive Shortformを初期化する例を示します。

目的の認証タイプの初期化コードを、Webサイトの共通レイアウト(head領域など)にインストールします。

初期化でユーザ認証機能を使用するには、 User Authenticationを参照してください。

アクセスキー

アクセスキーとシークレットキーは、Shopliveの担当者から入手できます。

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });</script>

<!-- OR -->

//Simple auth
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>
  cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserObject({userId: "USER_ID", userName: "USER_NAME"});
</script>

<!-- OR -->

//JWT auth
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>
  cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserJWT("USER_JWT");
</script>

コードを挿入

以下のコードをインストールします

(例:商品詳細ページの共通レイアウト)

<script defer>
  cloud.shoplive.showShortformPreview();
</script>

この関数は、呼び出された URL を分析し、関連するショートフォーム動画を PIP スタイルの動画バナーとして表示します。

(URLから商品が推測できない場合、動画バナーは表示されません。）

商品URLと実際のランディングURLをご確認ください

商品のURLと実際のランディングページURLが異なる場合、ショートフォームプレビューが表示されない場合があります。

ショートフォームプレビューの表示に問題がある場合は、Shopliveの担当者にお問い合わせください。

• メインURL- https://shoplive.cloud/product/{PRODUCT_ID}/detail

• モバイル URL - https://m.shoplive.cloud/product/{PRODUCT_ID}/m/detail

ショートプレビュー表示サイズの定義

ショートプレビューは以下のサイズで表示されます:

高度な連携

グループベースのショートフォームプレビュー

特定のショートフォームグループIDに関連するショートフォームコンテンツを表示します。

<script defer>
  cloud.shoplive.showShortformPreview({
    shortformCollectionId: "SHORTFORM_COLLECTION_ID"
  });
</script>

SKUベースのショートフォームプレビュー

<script defer>
  cloud.shoplive.showShortformPreview({
    skus: ["SKU"]
  });
</script>

タグベースのショートフォームプレビュー

特定のタグ(最大5タグ)を含むショートフォーム動画のみをPIPスタイルの動画バナーとして表示します

<script defer>
  cloud.shoplive.showShortformPreview({
    tags: ["YOUR_TAG1", "YOUR_TAG2"]
  });
</script>

複数のタグを持つ関連するショートフォームを設定する場合、すべてのタグを含む条件(AND条件)を設定する tagSearchOperator="AND" オプションを追加できます 。

<script defer>
  cloud.shoplive.showShortformPreview({
    tags: ["YOUR_TAG1", "YOUR_TAG2"],
    tagSearchOperator: "AND"
  });
</script>

ブランドベースのショートフォームプレビュー

特定のブランド(最大5ブランド)を含むショートフォーム動画のみをPIPスタイルの動画バナーとして表示する

<script defer>
  cloud.shoplive.showShortformPreview({
    brands: ["BRAND_IDENTIFIER1", "BRAND_IDENTIFIER2"]
  });
</script>

ランダム順の設定

基本シャッフル

<script defer>
  cloud.shoplive.showShortformPreview({
    shuffle: true // true または false を設定
  });
</script>

パラメータを組み合わせたショートフォームプレビュー

複数の条件値を設定し、パラメータを組み合わせて使用することができます。

<script defer>
  cloud.shoplive.showShortformPreview({
    shortformCollectionId: "SHORTFORM_COLLECTION_ID",
    tags: ["TAG1", "TAG2"],
    skus: ["SKU1", "SKU2"],
    shuffle: true // true または false を設定
  });
</script>

プレビューの位置とサイズの制御

showShortformPreview() の呼び出し時に config パラメータを使用して、PIPプレビューの表示位置とレスポンシブサイズを制御できます。

位置の制御 (position)

画面の4つの角のうち1つを指定します。必ず1つの値のみを true に設定する必要があり、2つ以上設定すると無視されます。

<script defer>
  cloud.shoplive.showShortformPreview({
    position: { 'bo-le': true }  // 左下にプレビューを表示
  });
</script>

サイズの制御 (size)

画面幅を基準に3つの区間ごとに独立して指定します。指定しなかった区間にはデフォルト値が適用されます。

対応単位: px, vw, vh, %, rem, em

<script defer>
  cloud.shoplive.showShortformPreview({
    size: {
      desktop: { width: '20vw', maxWidth: '250px' },
      tablet:  { width: '30vw' },
      mobile:  { width: '40vw' }
    }
  });
</script>

位置とサイズの同時指定

<script defer>
  cloud.shoplive.showShortformPreview({
    position: { 'bo-le': true },
    size: {
      desktop: { width: '20vw', maxWidth: '250px' },
      tablet:  { width: '30vw', maxWidth: '200px' },
      mobile:  { width: '40vw' }
    }
  });
</script>

優先順位

1. showShortformPreview(config) に渡した値（最優先）

2. 管理画面の設定 (configJson.web.preview)

3. ハードコードされたデフォルト値

デフォルト値

ご参考

position config を指定すると、ユーザーがドラッグで移動した位置（セッション保存値）を無視して強制的に適用されます。

Shortform preview 閉じるボタンの有効時間の定義

<script defer>
  cloud.shoplive.showShortformPreview({
     closePolicyExpiry: 1440 //1440分（1日）間プレビューを表示しない
  });
</script>

<script defer>
  cloud.shoplive.showShortformPreview({
     closePolicyExpiry: 0 //0分間ショートフォームプレビューが開かれません。つまり、リフレッシュすると再び表示されます。
  });
</script>