動画のログ実装メモ

個人サイトに動画計測ログを入れてみる

今回はYoutube動画ではなく、mp4動画の動画再生開始・動画再生完了ログを取得できるように設定する。

videoタグとは

文章中に、動画を埋め込めるタグ。
付与できる属性の一部を上げるとこのような感じ。

• グローバル属性

  • 全てのHTMLで共通に使用できる属性

• autoplay

  • 動画の自動再生

  • 一部のブラウザでは、muted属性が無いと自動再生が動作しない

• loop

  • 動画のループ再生

  • 設定すると動画の末尾に達すると、自動的に先頭に戻る

• muted

  • 動画の音声のミュート

  • 設定すると初期状態が消音になる

  • 規定値はfalseで、有音状態

• playsinline

  • 動画のインライン再生

  • 要素の再生領域内で再生するかどうか

  • 自動的に全画面表示にならないようにするための指定

• controls

  • 再生、音量、シーク、ポーズなどのボタンを表示する

動画の開始ログの導入手順

1.動画の埋め込み方を決める

<video src="sample.mp4" id="1" autoplay controls muted playsinline></video>

動画の仕様は、「自動再生・再生停止ボタンなどが表示される・消音で開始・インライン再生」

2.取得したいログ内容を決める

1. 動画の再生開始

   1. イベント名：video_play

   2. event_category：video

   3. event_action：play

   4. event_label：動画のid属性値

   5. 動画の再生時間：秒数

2. 動画の再生完了

   1. イベント名：video_complete

   2. event_category：video

   3. event_action：complete

   4. event_label：動画のid属性値

   5. 動画の再生時間：秒数

3.カスタムHTMLを作る

・動画再生開始イベント：video_play

<script>
    document.addEventListener('play', function(e) {
      var videoCurrentTime = Math.floor(e.target.currentTime);
            if (e.target.tagName === 'VIDEO') {
                dataLayer.push({
                    'event': 'video_play',
                    'event_category': 'video',
                    'event_action': 'play',
                    'event_label': e.target.id,
                    'video_current_time': videoCurrentTime
                });
              }
  }, true);
</script>

これはWEB上のGTMタグより上に配置する。
動画の仕様に「自動再生」が含まれていると、画面表示時すぐ動画再生されることになるため、動画開始イベントを取得するのであれば、ページ上のGTMタグより先に読み込まれておく必要がある。

var videoCurrentTime = Math.floor(e.target.currentTime);

の部分で、小数点以下もある再生時間を秒数になるように整形している。

・動画再生完了イベント：event_complete

<script>
    document.addEventListener('ended', function(e) {
      var videoCurrentTime = Math.floor(e.target.currentTime);
            if (e.target.tagName === 'VIDEO') {
                dataLayer.push({
                    'event': 'video_complete',
                    'event_category': 'video',
                    'event_action': 'complete',
                    'event_label': e.target.id,
                    'video_current_time': videoCurrentTime
                });
              }
  }, true);
</script>

これはGTM上でカスタムHTMLタグとして設定する。

4.タグとトリガーを設定する

まずは動きのイメージを図にまとめてみた。

サイト上動作→タグ→トリガー→タグ（GA4送信）の流れ

まずサイト上のGTMより上に手順3で作成したvideo_playのカスタムHTMLを配置する。
video_playが発火したときに、GTMで発火するトリガー「CE-video_play」を作成する。

• トリガータイプ：カスタムイベント

• イベント名：video_play

• 発生場所：一部のカスタムイベント

  • PageHostname 一致 （個人サイトのドメイン名）

次に、CE-video_playが発火したときに飛ぶタグ「GA4-video_play」を作成する。

• タグの種類：GA4イベント

• 測定ID：GA4のコンテナID（例：G-〇〇〇）

• イベント名：video_play

• イベントパラメータ：event_category, event_action, event_label, video_current_time

測定IDやイベント名、イベントパラメーターは変数として設定しておくと便利！

続いて動画再生完了時ログのために、タグ「script-video_complete」を作る。

• タグの種類：カスタムHTML

• HTML：手順3で作成したvideo_compete用カスタムHTML

• トリガー：AllPages

次に、script-video_completeタグが送信されてきたときのトリガー「CE-video_play」を作成する。

• タグの種類：GA4イベント

• 測定ID：GA4のコンテナID（例：G-〇〇〇）

• イベント名：video_complete

• イベントパラメータ：event_category, event_action, event_label, video_current_time

次に、CE-video_completeが発火したときに飛ぶタグ「GA4-video_complete」を作成する。

• タグの種類：GA4イベント

• 測定ID：GA4のコンテナID（例：G-〇〇〇）

• イベント名：video_complete

• イベントパラメータ：event_category, event_action, event_label, video_current_time

5.個人サイト上で動画を再生～完了してみる

GA4を確認してログが飛んでいることを確認する。

video_playとvideo_completeが来てる！

おわりに

個人サイトにログ環境を整備することができたので、DEとして自環境で検証することができるようになった。
業務内だと自分の権限範囲が限られていることが多いため、自環境で色々触ることができるのはかなりいい。