Google Analyticsで動画(Video要素)のイベントを計測

雑記帳

会社のウェブサイトに貼ってある動画ファイルが、実際にどれだけ再生されているのか調査するべく、 Google Analyticsのイベントで計測するためのコードを作ってみた。

計測対象は以下のイベント。

  • 再生開始(play)
  • 最後まで再生(ended)
  • 一時停止(pause)
  • 再生再開(resume)
  • シークした(seeked)
  • どこまで再生したか(動画時間の10%, 25%, 50%, 75%, 90%)

HTML側

<video id="movie001" width="(動画幅)" height="(動画高さ)" title="Movie Title">
  <source src="(動画ファイルのパス)" type="video/mp4" />
</video

JavaScript側(jQuery使用)

イベントカテゴリに「video」、イベントアクションにplay、play_endなど。 イベントラベルには動画のtitle属性をセット。

$(function(){
  var oldratio = 0.0;
  $('video').on('play', function(e) {
    on('play', function(e) {
    if(e.target.currentTime > 0){
      ga('send','event','video','resume',e.target.getAttribute('title'));
    }else{
      ga('send','event','video','play',e.target.getAttribute('title'));
    }
  }).on('ended', function(e) {
    ga('send','event','video','play_end',e.target.getAttribute('title'));
  }).on('pause', function(e) {
    ga('send','event','video','pause',e.target.getAttribute('title'));
  }).on('seeked', function(e) {
    ga('send','event','video','seeked',e.target.getAttribute('title'));
  }).on('timeupdate', function(e) {
    var ratio = e.target.currentTime / e.target.duration;
    if((0.9 <= ratio) && (oldratio < 0.9)){
      ga('send','event','video','play_90percent',e.target.getAttribute('title'));
    }else if((0.75 <= ratio) && (oldratio < 0.75)){
      ga('send','event','video','play_75percent',e.target.getAttribute('title'));
    }else if((0.5 <= ratio) && (oldratio < 0.5)){
      ga('send','event','video','play_50percent',e.target.getAttribute('title'));
    }else if((0.25 <= ratio) && (oldratio < 0.25)){
      ga('send','event','video','play_25percent',e.target.getAttribute('title'));
    }else if((0.1 <= ratio) && (oldratio < 0.1)){
      ga('send','event','video','play_10percent',e.target.getAttribute('title'));
    }
    oldratio = ratio;
  });
});

Google Analyticsでの表示例

イベントカテゴリ画面。

イベントアクション画面。

1週間記録したところ、動画を埋め込んであるページのPVが約5000に対して、再生開始したのは1%程度の59で、 さらに最後まで通して見たのはそのうち4割の約24。

私としては5分近くもある動画を全部見ようなんて人はほとんどいない、ということは予想済みであったが、 会社の上の人はこういうユーザ視点を持ってないんだよね。