ショートフォームのPreviewは、ショップ画面の隅に小さなプレーヤーとしてショートフォームを表示する機能です。タップすると全画面プレーヤーが開き、✕を押すと閉じます。表示するコードは開発チームが適用し、どのショートフォームが表示されるかは、管理画面で準備した内容によって決まります。

下は、商品詳細ページの右下にPreviewが表示された例です。

管理画面で準備する

1. 商品を作成するときに、商品URLにショップの商品詳細ページのアドレスを入力します。商品の登録方法は商品を準備するを参照してください。このアドレスは、視聴者が実際に開くページのアドレスと1文字まで一致している必要があります。
2. ショートフォームの情報入力画面で商品を追加し、その商品をショートフォームに紐づけます。詳しくはショートフォームの情報を入力して公開するを参照してください。
3. ショートフォームを公開状態に設定します。

商品が紐づいていない場合やショートフォームが非公開の場合、Previewは表示されません。

どのショートフォームを表示するか決める

開発チームがコードで次のいずれかを選びます。

• 条件を指定しない場合は、現在のページのアドレスに紐づいたショートフォームが表示されます。商品URLが登録されていないアドレスでは何も表示されません。
• 同じ商品が複数のアドレスで開かれるショップでは、商品SKUもあわせて指定します。
• ショートフォームグループ、タグ、ブランド、商品SKUの条件を指定すると、ページのアドレスに関係なく条件に合うショートフォームが表示されます。コードの書き方はショートフォーム Preview(PIP)の構成方法を参照してください。

位置・サイズ・閉じる設定

次の項目は開発チームがコードのオプションで設定します。指定しない場合はアカウントの既定値で表示されます。オプションの値は開発者ガイドを参照してください。

• 位置: 画面の四隅のうち1か所
• サイズ: 画面幅(デスクトップ・タブレット・モバイル)ごとに指定
• 閉じた後に再表示しない期間: 分単位で指定します。指定しない場合は、同じブラウザセッションでは再表示されません。

表示されないときの確認

条件に合うショートフォームがない場合、Previewはエラーを出さずに何も表示しません。次の順序で確認してください。

1. 商品に登録した商品URLと、視聴者が開いたページのアドレスが一致しているか確認します。クエリパラメータ(?utm_source=…)やwwwの有無が違うだけでも紐づきません。
2. 商品がショートフォームに紐づいていて、ショートフォームが公開状態か確認します。
3. コードで指定したグループ、タグ、ブランド、SKUに合う公開ショートフォームがあるか確認します。

次の場合は、Previewが表示されないのが正常です。

• 閉じた後に再表示しない期間内の場合
• 同じブラウザセッションですでに閉じた場合
• ページがiframe内で開かれている場合
• ブラウザPIPで再生していた状態から移動してきたページの場合