0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

LPへの動画実装で確認する読み込み・自動再生・計測

0
Posted at

動画をLPに置く作業は、MP4をアップロードして終わりではありません。ページ表示、スマートフォンでの再生、広告からの流入と問い合わせの計測を別々に確認する必要があります。

この記事では、FablessBridgeの制作ブログで整理した内容を、LP実装担当者向けの確認順にまとめます。速度改善や広告効果の実測レポートではなく、公開前の検証項目を決めるための手順です。

1. 動画の配置を決めてから読み込み方を分ける

最初に、動画が初期表示に入るか、スクロール後に見えるかを分けます。どの動画にも同じ遅延読み込みを設定すると、最初に見せたい映像まで待たせることになります。

配置・再生方法 実装で決めること 公開前の確認
ページを開いてすぐ見える動画 ポスター画像を用意し、先に表示する画像の読み込みを優先する 動画の準備中に空白の画面にならないか
スクロール後に見える動画 見える位置まで動画の読み込みを後回しにする 動画へ到達したときに再生できるか
自動再生する動画 ミュートとページ内再生の設定を確認する スマホで意図しない全画面表示や音声再生にならないか

この確認では、ファイル容量だけで合否を決めません。元記事でも一律の容量基準は確認できていないため、広告から訪れる想定のスマートフォン・回線で、最初の画面と再生開始の両方を確かめます。

参考:web.dev — Lazy loading video、Largest Contentful Paint

2. 書き出し比率と表示領域をそろえる

横型の完成動画があっても、縦型の広告枠へそのまま入れると、文字や製品の見え方が変わります。実装側と制作側で、配信先・画面比率・尺を先に共有します。

確認する順序は次のとおりです。

  1. LPと広告のそれぞれで使う動画ファイルを決める。
  2. 広告管理画面のプレビューで、文字やロゴにボタン・説明文が重ならないかを見る。
  3. LPではスマホ幅でも字幕と製品が読めるかを確認する。
  4. 修正が必要なら、動画ファイルの修正か、ページ上の表示方法の修正かを切り分ける。

媒体の入稿仕様は変わるため、過去の書き出し設定だけを根拠にせず、配信時の管理画面でも確認します。

3. 動画の版と成果の定義を分けて記録する

動画が再生されたことと、問い合わせが完了したことは別です。まず購入・問い合わせ・資料請求など、何を成果にするかを決めます。そのうえで計測タグを入れる担当と、確認するイベントを共有します。

項目 決めておく内容
成果 問い合わせ、購入など、今回判断したい行動
計測担当 LPにタグを入れ、動作を確認する人
流入の区別 広告URLのUTM命名。動画の版は utm_content で区別する
重複対策 MetaピクセルとコンバージョンAPIの両方で送る場合の重複排除
広告との接続 GA4のキーイベントをGoogle広告へ取り込む場合の権限とアカウントリンク

UTMの値は大文字と小文字が区別されるため、命名をそろえてから配信します。複数経路から同じイベントを送る構成では、件数が二重にならないことも確認対象です。

参考:Google アナリティクスのキャンペーンURL、Metaのイベント重複排除

4. 確認記録を制作側へ返す

問題を見つけたら「動画が重い」だけでなく、どの端末・画面幅・回線で、初期表示と再生のどちらに問題があったかを記録します。映像の内容、ファイル、LPの表示、計測を分けて確認すると、修正先を決めやすくなります。

本記事では速度や問い合わせ数の改善を実証していません。効果の判断は、公開後に同じ条件で集めた計測結果から行います。

制作サンプル:3つの比率へ書き出す

元記事に関連する「宵寝」は、横16:9・フィード4:5・縦9:16の3種類を書き出した76秒の自社制作サンプルです。架空の製品・人物の物語で、映像内の反応数や予約は実際の広告成果ではありません。

宵寝の動画プレビュー

完成動画を再生(MP4) / 制作条件・修正過程を見る

FablessBridgeでは動画制作・LP制作・広告運用に取り組んでいます。動画制作をご相談いただく際は、使う場所・必要な比率・計測したい行動を共有いただけると、必要な納品物を整理しやすくなります。

公式HP / 制作の相談 / fabless-bridge@shian.space

この記事の構成・文章整理にはAIを使用し、記載内容は元記事と公開中の制作条件に照合しています。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?