動画のログ実装メモ
個人サイトに動画計測ログを入れてみる
今回はYoutube動画ではなく、mp4動画の動画再生開始・動画再生完了ログを取得できるように設定する。
videoタグとは
文章中に、動画を埋め込めるタグ。
付与できる属性の一部を上げるとこのような感じ。
グローバル属性
全てのHTMLで共通に使用できる属性
autoplay
動画の自動再生
一部のブラウザでは、muted属性が無いと自動再生が動作しない
loop
動画のループ再生
設定すると動画の末尾に達すると、自動的に先頭に戻る
muted
動画の音声のミュート
設定すると初期状態が消音になる
規定値はfalseで、有音状態
playsinline
動画のインライン再生
要素の再生領域内で再生するかどうか
自動的に全画面表示にならないようにするための指定
controls
再生、音量、シーク、ポーズなどのボタンを表示する
動画の開始ログの導入手順
1.動画の埋め込み方を決める
<video src="sample.mp4" id="1" autoplay controls muted playsinline></video>動画の仕様は、「自動再生・再生停止ボタンなどが表示される・消音で開始・インライン再生」
2.取得したいログ内容を決める
動画の再生開始
イベント名：video_play
event_category：video
event_action：play
event_label：動画のid属性値
動画の再生時間：秒数
動画の再生完了
イベント名：video_complete
event_category：video
event_action：complete
event_label：動画のid属性値
動画の再生時間：秒数
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.タグとトリガーを設定する
まずは動きのイメージを図にまとめてみた。
まずサイト上の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
続いて動画再生完了時ログのために、タグ「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を確認してログが飛んでいることを確認する。
おわりに
個人サイトにログ環境を整備することができたので、DEとして自環境で検証することができるようになった。
業務内だと自分の権限範囲が限られていることが多いため、自環境で色々触ることができるのはかなりいい。