[GA4][タグマネージャー] videoタグの動画再生回数を計測したい

公開日:2024/01/21

GA4ではYoutubeの再生回数は「video_start」というイベントで計測できるようになっています。
一方、videoタグで設置した動画の再生回数についてはカスタムイベントの登録などひと手間掛ける必要があります。
おおまかな流れは下記のようになります。

videoタグの再生時、タグマネにイベント情報（データレイヤー）を送るようイベント処理を設定する
データレイヤーの情報をタグマネ上で扱えるように変数として設定する
データレイヤーの送信時にGA4へイベントを送信するようにトリガーを設定する
設定したトリガーを使ってGA4用のタグを設定する
イベントに付与されるパラメータを計測できるようにカスタム定義を追加する
探索レポートで再生回数を確認する

1. videoタグの再生時、タグマネにイベント情報（データレイヤー）を送るようイベント処理を設定する

videoタグが再生されたときに、タグマネージャーに対してデータ送信を行うためのイベント処理を設定します。

左メニュー「タグ」の「新規」を選択します。

タグタイプの中から「カスタムHTML」を選択します。

「HTML」に下記のコードを貼り付けます。

<script>
var videos = document.getElementsByTagName('video');
for(var i = 0; i < videos.length; i++) {
    videos[i].addEventListener('playing', function(event) {
        window.dataLayer.push({
            'event': 'video_tag_play',
            'video_tag_url': event.target.src
        });
    });
}
</script>

※変数宣言はconstを使いたかったのですが、タグマネージャー上でエラーになってしまうためvarを使用しています。

videoタグが再生されたときに、タグマネージャーに対してデータレイヤーの送信を行っています。
イベント名は「video_tag_play」としています。（任意で変更してください）
また、動画が再生されたページのURLも計測できるように、「video_tag_url」というパラメータ名で設定しています。

また、videoタグを設置したページのURLも解析に使用することが多いのですが、カスタムイベントにはデフォルトで「page_location」パラメータがデフォルトでセットされるため、あえてデータレイヤーとして送信する必要はありません。

「トリガー」を「All Pages」にして「保存」します。これでページ表示時に上記コードが実行され、videoの再生時にイベント情報が送られるようになります。