• In progress

    • プレーヤー・エクスペリエンス - デザイン設定

    Owned by Daniel Kojokaro (Unlicensed)
    Last updated: Feb 16, 2024 by Junki Osanai
    1 min read

    導入

    Browsiの動画プレーヤーの見た目、感覚、配置を設定することは、UXと広告パフォーマンスに大きな影響を与えます。Browsi Playerは、サイトとのシームレスな連携を実現するために、様々なカスタマイズオプションを提供しています。

    これらのカスタマイズオプションについて説明します。

    プレイヤーデザイン

    デフォルト・デザイン

    デフォルトでは、プレーヤーのExperience screenには、モバイル用とデスクトップ用の 2 つのプレーヤーのデザインが表示されます。これらのそれぞれには、一般的に使用されるプレーヤーの設定が設定されています。

    これらのデフォルトのデザインの設定を変更したり、他のデザインをそのデバイスのデフォルトとして設定したりするオプションがあります。

    タグ・デザイン

    Browsi Playerをサイトに導入する場合、playerタグを挿入します。そのコードスニペットの一部には、tagId=xの形式でタグIDが含まれます。

    特定のタグ（またはタグのグループ）をターゲットにすることで、プレーヤーの見た目＆感覚を特定のドメイン、ページ、UTMソース、またはタグが分割されるその他の粒度に合わせることができます。

    カスタムオプション

     

    1. Placement type - プレーヤーをページコンテンツ内に配置するか、画面の片隅に浮遊するsticky playerとして配置するか、またはその両方を使用します。
      最高の広告パフォーマンスを実現するには、両方を使用することをお勧めします。

    2. Player mode - outstream playerは、広告が再生されている間のみ表示され、広告と広告の間は非表示になります。instream playerは、Video CMS プレイリストで設定したコンテンツを広告の間に再生します。

    3. In-article player settings -

      1. Fit to screen - をチェックすると、プレーヤーはレスポンシブに、配置された要素の幅いっぱいに表示されます。それでも'max width'フィールドによって制限され、16:9のアスペクト比を維持するので、これをチェックすることをお勧めします。

      2. Max width - ‘fit to screen’がチェックされている場合、このフィールドはプレーヤーの最大幅を設定します。デスクトップでは、プレーヤのサイズが動画コンテンツの画質を超えて引き伸ばされるのを防ぐため、デフォルト設定の 600px を推奨します。

      3. Width and Height - ‘fit to screen’がチェックされていない場合、これらのフィールドは、プレーヤーの正確な寸法をピクセル単位で決定します。これはレスポンシブなオプションではなく、異なる画面サイズでは見栄えが悪くなる可能性が高いので、代わりに‘fit to screen’をチェックすることをお勧めします。

      4. Bottom and top margins - プレーヤ自身とページ上の前後の要素との間に追加される高さを決定します。通常はデフォルト値が最良の結果をもたらしますが、プレーヤの上下にスペースがありすぎる場合や少なすぎる場合は変更できます。

      5. Tag placement - チェックを入れると、ページ内のプレーヤーの配置は、playerタグが挿入される場所によって決定されます。チェックを外すと、新しいフィールドで、プレーヤーの配置を決定するCSSセレクタを選択できます。in-article playerの配置を管理する最適な方法を決定するには、Browsi担当者に相談してください。

      6. Playlist carousel - 有効にすると、プレイリスト内の他動画がプレーヤーの下（右）に表示され、ユーザーは現在のビデオと前後のビデオの間を移動することができます。（PCのみ有効）

      7. Carousel alignment - プレイリストのカルーセルがプレーヤーの右に表示されるか、プレーヤーの下に表示されるかを決定します。プレーヤーのサイズを最大にするために、下の配置をお勧めします。

    4. Sticky player settings - （いわゆるオーバーレイ、フローター、追尾）

      1. Auto-scale - sticky playerの幅を、in-article playerの幅に比例して決定します。これにより、プレーヤの応答性が向上し、異なる画面サイズでも見栄えがよくなりますが、記事内配置でのみ使用できます。

      2. Ratio - ‘auto-scale’ が有効な場合、このパーセント値は、sticky playerの幅として使用する、記事内の幅の割合を決定します。仮に100と入力し、in-article時の横幅が300pxだとすると、オーバーレイ時の幅も300pxになります。50と入力した場合は150pxになります。

      3. Width - ‘auto-scale’ が無効の場合、このフィールドはsticky playerの幅をピクセル単位で決定します。

      4. Full width - 有効にすると、sticky playerは画面の幅をカバーするオーバーレイを含みます。

      5. Vertical margins - sticky playerの上下と画面の上下の距離を決めます。

      6. Side margin - sticky playerの側面とスクリーンの水平エッジとの距離を決定する。

      7. Player position -は、sticky playerが配置される位置を指定します

        1. Left: 画面左

        2. Right: 画面右

        3. Bottom: 画面下

        4. Top: 画面上

          1. 例：画面右上にSticky（オーバーレイ）を表示させたい場合はRightとTopを選択ください。

      8. Above in-article placement -

        1. Before: ページ到達時点からオーバーレイプレーヤが表示されます。GoogleAdXのポリシーに準拠していないため推奨しません。

        2. After: インラインのプレイヤーが表示された後、スクロールアウトするとオーバーレイのプレイヤーが表示されるようになります。

      9. Ad strip - 有効にすると、プレーヤは広告を再生しているときに（通常のコンテンツではなく）表示します。

    5. Logo settings - あなたのブランディングを適用することで、私たちのplayerをあなたのものにすることができます。

      1. Ads - 広告の再生中に選択したロゴを表示する（tip - ダイレクトキャンペーンを実施する場合、このオプションを使用して広告主のロゴを使用することにより、その価値を高めることができます）。

      2. Content - コンテンツ再生中に選択したロゴを表示する

      3. Upload logo - ロゴとして使用したい画像へのリンクを入力してください。

      4. Logo position - 選択したロゴをプレーヤーのどこに表示するか（右上/左上）

      5. Width - 選択した画像のサイズを伸縮または制限する

      6. Margin - 選択したロゴをプレーヤーの端からどのくらい離れた位置に表示するかを決定する