GTMでネイティブHTML5動画を計測する方法｜YouTube専用トリガーが使えない理由｜未経験から100日後にGTMのプロになる話【Day 65】

YouTube動画のトラッキングはDay59で扱いました。今日はそれとは別に、自社でホストしているHTML5の<video>タグの再生計測を扱います。実はGTMには、YouTube動画のような専用の組み込みトリガーがネイティブ動画向けには用意されておらず、勝手が変わります。

ネイティブ動画にはGTMの専用トリガーがない

YouTube埋め込みなら「YouTube 動画」というトリガータイプを選ぶだけで済みますが、自社ホストの<video></video>要素には、それに相当する組み込みトリガーがGTMには存在しません。動画要素のplay・pause・timeupdate・endedといったブラウザ標準のイベントを、開発者にdataLayer.pushとして実装してもらうか、カスタムHTMLタグの中でイベントリスナーを登録するしかありません。

実装の考え方

カスタムHTMLタグで実装する場合、ページ内のすべてのvideo要素にイベントリスナーを登録し、再生開始・25%・50%・75%・完了のタイミングでdataLayer.push()する、という形が基本になります。ここでDay11で扱った原則――イベント名と関連データは同じpushにまとめる――がそのまま適用できます。

document.querySelectorAll('video').forEach(function(video) {
  video.addEventListener('play', function() {
    window.dataLayer.push({'event': 'video_start', 'video_title': video.currentSrc});
  });
  video.addEventListener('ended', function() {
    window.dataLayer.push({'event': 'video_complete', 'video_title': video.currentSrc});
  });
});

このタグの発火トリガーは、動画要素が実際にDOMに存在しているタイミングで実行される必要があるため、「DOM Ready」以降に設定するのが基本です。ページ内で動画が動的に追加される（例えば無限スクロールで後から読み込まれる）サイトでは、この単純な実装だと後から追加された動画にリスナーが付かない点に注意してください。その場合はMutationObserverで動画要素の追加を監視するか、開発者側でイベント発生時に直接dataLayer.pushしてもらう実装の方が確実です。

25%・50%・75%の進捗計測

timeupdateイベントは再生中に頻繁に発火するため、そのたびにdataLayer.pushすると過剰なイベント送信になります。動画の再生位置が全体の何%を超えたかを内部変数で記録し、閾値を初めて超えたときだけpushする、という重複防止のロジックを必ず入れてください。これはDay30のSPA計測で扱った「実際に変化したときだけ発火させる」考え方と同じです。

今日のまとめ

YouTube埋め込みと違い、ネイティブ動画にはGTMの専用トリガーがなく、実装は開発者との連携が前提になります。dataLayer設計の原則（Day11）と重複発火の防止（Day30）は、ここでも同じように効いてきます。次回は、GTMの応用テクニックをさらに扱います。