目次 x
    ショートフォーム プレビュー再生(PIPモード) の実装
      • 印刷する
      目次

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

        • 印刷する
        記事の要約

        ▶︎ 商品詳細ページにショートフォームプレビュー(PIP)を統合

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

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

        [ステップ1] 初期化

        ここでは、ユーザー認証なし、簡易認証、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>

        [ステップ2]コードを挿入

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

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

        <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

        高度な連携

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

        特定のSKUを含むショートフォームのみをPIPスタイルの動画バナーとして表示する

        <script defer>
  cloud.shoplive.showShortformPreview({
    sku: "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>

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

        ユーザーがショートフォームプレビューを閉じた時、リフレッシュしてもショートフォームプレビューが表示されない時間を定義します。以下のような設定を別途行わない場合、プレビューを閉じると、そのセッション中はずっと閉じた状態が維持されます。（ウィンドウを閉じるか、新しいタブでアクセスすると新しいセッションになります）

        • 分単位で定義された時間の間、閉じるボタンを使用したユーザーにはプレビューが表示されず、時間が経過すると再表示されます。ブラウザを再起動したりタブを移動しても有効です。

        • closePolicyExpiryを定義しない場合、閉じるボタンを使用したユーザーには、ブラウザセッション中にリフレッシュしてもプレビューが表示されません。（closePolicyExpiryを使用した場合と異なり、新しいタブではプレビューが再び表示されます）

        ショートフォームプレビューを閉じたユーザーに対して、1日間プレビューを表示しない設定

        <script defer>
  cloud.shoplive.showShortformPreview({
     closePolicyExpiry: 1440 //1440 minutes
  });
</script>

        ショートフォームプレビューを閉じたユーザーに対して、リフレッシュすると再びプレビューを表示する設定

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

        What's Next