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

    ショートフォーム プレビュー再生(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の担当者にお問い合わせください。

    高度な連携

    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>