プレイヤー実装ガイド
このガイドは、さまざまなプレイヤーを実装する際のよくある質問と合わせて、プレイヤータイプの実装を支援することを目的としています。
当社のHTMLコードは、HTML/Javascriptを扱えるあらゆるCMSに実装できます。各プレイヤータイプには、カスタマイズ可能な異なる動作と設定があります。
プレイヤーをカスタマイズする方法は2つあります。
- 1つは通常のCSSメソッドを使用する方法で、もう1つはウィジェットコード内に属性を追加する方法です。CSSメソッドは、一般的なウェブコーディングと同じです。プレイヤーにCSS変数を適用する方法の詳細については、こちらを参照してください。 ページ。 変更可能な変数は多数あり、本記事全体で言及されます。
- もう1つの方法は、コード内に属性を追加することです。最も一般的な使用例の1つは、サイト上で表示されるプレイヤーから「Made In Firework」を削除することです。そのためには、スクリプト内に「branding=false」を追加する必要があります。
フローティングプレイヤー
フローティングプレイヤーは、サイト上の特定の場所に配置する必要がないため、より簡単な実装の1つです。フローティングプレイヤーのコードは、実装したい特定のページの<body>内に配置する必要があります。
これらはランディングページまたはPDPに直接配置することをお勧めします。
フローティングプレイヤーに関するよくある質問
- 左下にあるプレイヤーがチャットやクーポンなどをブロックしています。位置を移動できますか？
- はい、できます！属性を追加することで位置を移動できます。 player_placement。 これらのオプションは、「top-left」、「top-right」、「bottom-right」、または「bottom-left」です。これをスクリプト内にplayer_placement=”top-left”のように記述します。
- フローティングプレイヤーの配置場所をより具体的に指定したい場合は、マージンを変更することで対応できます。これはCSSコードを使用して行えます。
- --fw-player-margin
- 例: --fw-player-margin: 16px 24px 32px 12px;
- プレイヤーが大きすぎます。小さくできますか？
- はい、できます！これらは以下のCSS変数を使用して設定できます。
--fw-player-height - --fw-player-width
- はい、できます！これらは以下のCSS変数を使用して設定できます。
- 顧客がプレイヤーを閉じて、フローティングプレイヤーのあるページに戻ると、それが再び表示されます。顧客がフローティングプレイヤーを閉じた場合、それが再び読み込まれないようにする方法はありますか？
- はい、可能です。その仕組みは、当社のイベントを監視し、クッキーを使用してそのイベントを確認し、プレイヤーを読み込むか読み込まないかを決定するというものです。これは様々なCMSに固有の機能であるため、この機能を実現したい旨をカスタマーサクセスマネージャーにお知らせいただくことをお勧めします。開発チームと協力してこれを実装します。
ストーリーブロック
ストーリーブロックはいくつかの異なる方法で実装できます。理解すべき重要な概念は、ストーリーブロックがどのように動作するかです。ストーリーブロックを利用する重要な利点の1つは、ユーザーがフルスクリーンにすることなく、含まれるアクションとインタラクトできることです。他のすべてのプレイヤータイプでは、ユーザーはまず動画をクリックしてから、アクション可能なオプション（商品をカートに追加、行動喚起をクリック、ライブストリームに参加など）を利用できます。もう1つの利点は、ストーリーブロックがモバイル体験に最適化されていることです。ほとんどの顧客にとって、ウェブトラフィックの大部分はモバイルであるため、どのプレイヤーを使用するかを決定する上でこれは大きな要素となります。
デスクトップ上でストーリーブロックが表示される方法は2通りあります。最初の画像は、コンテナがページの幅に設定されているストーリーブロックの例です。2番目の画像は、サイト上の特定の場所に配置されたコンテナの例です。
これはモバイルでのストーリーブロックの表示です。特定のアクションのオプションがフルスクリーンにならずに表示されていることに注目してください。
これらはホームページまたはカテゴリ商品ページの最上部に直接配置することをお勧めします。
ストーリーブロックに関するよくある質問
- デスクトップ表示の空白が気に入りません。余分なスペースをなくすにはどうすればよいですか？
- 上記の例で示されているように、ページ全体に広がらないコンテナを設定するだけです。コンテナのサイズは通常通り制御でき、そのコンテナ内に当社のコードを配置できます。
- フローティングプレイヤーは気に入っていますが、すぐに表示したくありません。ストーリーブロックを見た後にのみ表示したいです。これは可能ですか？
- プレイヤーをスクロールで通り過ぎた後に、画面に固定させることができます。スクリプト内に属性を次のように追加するだけです。 dock=true
- デスクトップでストーリーブロックの背景色を変更したいです。どうすればよいですか？
- これは当社のCSS変数を使用して行います。ストーリーブロックの背景色を変更するためのCSS変数は以下の通りです。
- --fw-player-background
- プレイヤーのフォントをカスタマイズしたいのですが、どうすればよいですか？
- これは当社のCSS変数を使用して行います。フォントをカスタマイズするためのCSS変数は以下の通りです。
--fw-font-family
- これは当社のCSS変数を使用して行います。フォントをカスタマイズするためのCSS変数は以下の通りです。
カルーセル
カルーセルユニットは、様々な動画を表示し、ユーザーが動画をスクロールして見たいものをクリックできるようにする優れた方法です。ストーリーブロックとカルーセルの主な違いは、ユーザーがアクション（ライブストリームへの参加、商品のクリック、行動喚起のクリックなど）に触れるためには、まず動画をクリックして全画面表示にする必要がある点です。また、モバイルではユーザーは1と1/3の動画しか見ることができません。カルーセルはページへの実装も非常に簡単です。以下に、モバイルとデスクトップでのデフォルトのカルーセルユニットの表示例を示します。
これらはホームページやランディングページに配置することをお勧めします。
カルーセルのよくある質問
- プレイヤーのフォントをカスタマイズしたいのですが、どうすればよいですか？
- これは当社のCSS変数を使用して行います。フォントをカスタマイズするためのCSS変数は以下の通りです。
--fw-font-family
- これは当社のCSS変数を使用して行います。フォントをカスタマイズするためのCSS変数は以下の通りです。
- サムネイルのサイズと間隔をカスタマイズしたいのですが、可能ですか？
- サムネイルのサイズを変更する一つの方法は、コード内の属性を使用することです。 size=medium （オプションはmediumとlargeの2つのみです。デフォルトはlargeです。）
- CSSコードを利用することで、さらに多くのカスタマイズが可能です。以下に変更可能な様々な要素の表を示します。サムネイルのサイズ、動画間の間隔、ボーダーの角丸を変更できます。
ヒーローユニット
ヒーローユニット は、動画とインタラクティブ要素の両方でライブストリームイベントを際立たせるように設計されたフルスクリーンプレイヤーレイアウトです。ヒーローユニットは、印象的で没入感のあるフォーマットを提供し、ランディングページやホームページで注目度の高いイベントを直接宣伝するのに最適です。
ヒーローユニットは Story Block動画プレイヤーを左側に と インタラクティブコンテンツを右側に 表示することで、関連する行動喚起（CTA）を伴うライブストリームを魅力的に紹介できます。
設置場所：
ヒーローユニットのコードは、ライブストリームのプロモーションを表示したいページの<body>タグ内に配置してください。全画面を占有するため、マーケティングやイベントプロモーション専用のページに最適です。
使用する理由：ヒーローユニットは、実績のあるStory Blockフォーマットをイベントプロモーション向けに最適化した自然な拡張機能です。リッチメディアと行動を促すコンテンツを組み合わせることで、参加とエンゲージメントを促進します。