Video
GoogleTagManager
gtm

GTMで動画再生イベントを検知する

ga.send ならサクッと行けたのでなめてたら予想以上に苦戦したのでメモ。
バージョンアップによるUI変化も激しいのでノウハウ検索が結構しんどかった。

やりたいこと

ページ内コンテンツの埋め込み動画(HTML5)の再生数をカウントしたい

GTMを使うメリット(エンジニア視点)

  • GTMタグのみ貼り付ければよい
  • イベント検知やなんやらの部分をエンジニア側で管理しなくて済む
  • マーケティング担当が(知識があれば)自分で直接いじれる

流れ

  1. 動画再生イベントを検知するリスナを追加する
  2. イベントの発火を検知するトリガーを追加する
  3. トリガー発動時にGAへイベントを送信する

gtm1.png

動画再生イベントを検知するリスナを追加する

GTMでのイベントはグローバル変数 dataLayer に集約される
[参考] https://qiita.com/kat2n/items/d33c12fff2ba48ea766c
イベント発生時に dataLayer へ必要な情報を入れれば後はGTMで煮るなり焼くなりできるという仕様。

直接ページに組み込むとGA時代と変わらないので、GTMの管理画面からタグ>カスタムHTMLでページ読み込み時に埋め込むことに。
ページロード時に登録し、最初の再生イベントだけを取りたいので発火後にリスナを削除するようにしています。
html
<script>
$(function() {
$('video').on('play', function() {
dataLayer.push({
event: 'PlayVideo',
})
$(this).off('play')
})
})
</script>

gtm2.png

イベントの発火を検知するトリガーを追加する

dataLayer の変更はGTMがいい感じに検知してくれるので先ほど指定したイベントが発生時にトリガーを発動するように設定します。
トリガー>カスタムイベントでイベント名を PlayVideo に設定。
gtm3.png

トリガー発動時にGAへイベントを送信する

タグ>従来のアナリティクスを作成して必要事項を入力。
再生されたページのURLはデフォルトで変数が用意されていたのでそれを利用。
トリガーは先ほど作ったトリガーを指定。

gtm4.png

動作確認

プレビューモードにするとGTMを設定したページにプロファイラが表示されるのでそれを見ながらデバッグできます。
gtm5.png

イベントリスナ周りは非エンジニアにはむずい気がするので結局設定はえんじにあのおしごと!になりそう。