ga.send ならサクッと行けたのでなめてたら予想以上に苦戦したのでメモ。
バージョンアップによるUI変化も激しいのでノウハウ検索が結構しんどかった。
やりたいこと
ページ内コンテンツの埋め込み動画（HTML5）の再生数をカウントしたい
GTMを使うメリット（エンジニア視点）
- GTMタグのみ貼り付ければよい
- イベント検知やなんやらの部分をエンジニア側で管理しなくて済む
- マーケティング担当が（知識があれば）自分で直接いじれる
流れ
- 動画再生イベントを検知するリスナを追加する
- イベントの発火を検知するトリガーを追加する
- トリガー発動時にGAへイベントを送信する
動画再生イベントを検知するリスナを追加する
GTMでのイベントはグローバル変数 dataLayer に集約される
[参考] https://qiita.com/kat2n/items/d33c12fff2ba48ea766c
イベント発生時に dataLayer へ必要な情報を入れれば後はGTMで煮るなり焼くなりできるという仕様。
直接ページに組み込むとGA時代と変わらないので、GTMの管理画面からタグ＞カスタムHTMLでページ読み込み時に埋め込むことに。
ページロード時に登録し、最初の再生イベントだけを取りたいので発火後にリスナを削除するようにしています。
<script>
$(function() {
$('video').on('play', function() {
dataLayer.push({
event: 'PlayVideo',
})
$(this).off('play')
})
})
</script>
イベントの発火を検知するトリガーを追加する
dataLayer の変更はGTMがいい感じに検知してくれるので先ほど指定したイベントが発生時にトリガーを発動するように設定します。
トリガー＞カスタムイベントでイベント名を PlayVideo に設定。
トリガー発動時にGAへイベントを送信する
タグ＞従来のアナリティクスを作成して必要事項を入力。
再生されたページのURLはデフォルトで変数が用意されていたのでそれを利用。
トリガーは先ほど作ったトリガーを指定。
動作確認
プレビューモードにするとGTMを設定したページにプロファイラが表示されるのでそれを見ながらデバッグできます。
イベントリスナ周りは非エンジニアにはむずい気がするので結局設定はえんじにあのおしごと！になりそう。