📝

GoogleTagManagerを使った動画再生数（videoタグ使用）の計測をする

2022/03/09に公開

Google Analytics

TL;DR

結論急ぎたい方は、　下記 手順　へ。
本記事がたぶん、この手の記事で最新のものかと思います（2022.3.9）

背景

マーケ部門から、特定の動画を入稿できるようにして、動画再生数を計測したいとの要望がありにけり

前提

弊社のメインサービス、「バヅクリ」は、現在一枚岩のRailsで構築されていた状況から、RailsをAPIサーバー（認証もやっている）とし、前段にNextjsを置いた構成に移行中。
今回の対象ページは、すでにNextjs環境下のページです。

対応内容の方針

なにはともあれ、まずは対応内容、どう実現するのか手順の設計からです。設計大事です。
ってことで、まずは下記のような方針を立てました。

動画入稿の仕組みを用意（こちらはRails環境下の弊社の社内管理サイトへ）
1を今回の対象ページで呼ばれるAPIレスポンスに追加
Nextjs側で2を要望に従って表示
計測（Nextjs内　or GTM）

実装（1-3)

までの実装については、下記のとおり、サクッと終わらせました。

１については、いい感じのコンポーネントを作ってあったので、それをいい感じに転用してdone
2についても、テストもしっかり書いてあるAPIだったため、変更＆spec微修正でdone
3についても、弊社のフロントエンドエンジニアがいい感じにコンポーネンと用意してくれていたので、転用してdone

実装（４） ※本題

長くなりましたが本題です。

こちらについては、Nextjsでやるか、GTMでやるか。。。。
調べたところ、、、というか、そもそも、この手のものはGTMでやったほうがラクではないか？とあたりがついていたので、調べてみると、いくつか参考になりそうなものもいくつか参考にさせていただきましたが、

このとおりにやってもうまく動かなかったので、

Nextjsでというか、Reactでやるかと思い、こちらも調べてみると、、、、
参考になりそうなものが見つかるものの、コーディング多いものばかりで、それすらもめんどくさかったので、

やはり、GTMでと再度調査。

そもそも、久々すぎて、datalayerってなんだっけってところから調べ直してみると、、、

ここで重要なのは、先ほど変数名を入れたところに「event」キーが入ることです。

データレイヤーは、「event」キーが追加されると変数ではなくカスタムイベントとして認識をします。

ref: データレイヤーを使ったトリガーの使い方

やはりdatalayerをつかったカスタムイベントでやれそうだと、帰結。

以下、対応内容です。

手順

datalayerへイベントを検知（計測）するスクリプトを用意
1のイベントをカスタムイベントとしたトリガーを作成
1のイベントをトリガーとしたタグを用意

以上。

1.datalayerへイベントを検知（計測）するスクリプトを用意

こちらの内容は言い換えると、
GTMの「カスタムHTML」にて、datalayerへイベントを検知（計測）するスクリプトを用意する、
ということになります。（下記参照）

  (function () {
    if(document.querySelector('video')) {
      //video = document.querySelector([ここは任意でセレクターを指定してください])
      video = document.querySelector('video')
      video.addEventListener('play', function(){
        dataLayer.push({ event: 'PlayVideo' }) # こうすることで、「PlayVideo」というカスタムイベントが有効になります
      })
    }
  　}());