YouTubeの再生状況や、どこまで再生したかをGoogleアナリティクスで計測する方法（By GTM）

今回は、Googleアナリティクスを使って、サイトに設置したYouTubeの再生状況を計測する方法についてご紹介です。

目次（ページ内リンク）

1 概要
2 計測結果
3 ポイント・注意点
4 設定手順
5 最後に

概要

YouTubeとGoogleアナリティクスの連携についてご紹介します。
この計測により「動画再生回数はわかるが、サイトに設置した動画の再生ボタンを押している”人”は何人なのか？」「YouTube動画を見てくれた人が、購入にいたっているのか？」といった点を分析することが可能です。

実装にあたり、DanWilkerson氏の「YouTube Google Analytics Embed Tracking」を使用しています。

計測結果

最終的にこんな感じに計測できます。

イベントカテゴリ：共通で「Videos」が計測
イベントアクション：Play, Pause, Watch to End, 10%（再生状況）が計測
イベントラベル：YouTube動画のURL

それぞれ、イベント発生回数、ユーザー数、目標到達数を集計できます。

一点、注意事項として、YouTube動画の再表示（一瞬のちらつき）が発生する可能性があります。実装後、ちらつき度合や、他のjsとの干渉を確認することオススメすます。

ポイント・注意点

YouTube動画自体の再生回数は、別途YouTubeアナリティクスで集計できます。
YouTubeの再生ボタンに直接イベントトラッキングを実装するのは、ほぼ不可能です。
YouTube APIを使うと、Googleアナリティクスのイベントとして再生／停止を計測できます。
ただその場合、YouTubeの設置をiFrameではなく、Scriptタグで設置する必要があります。
ここでは、通常の埋め込みタグiframeでYoutubeの再生などをGAのイベントで計測します。
単体のGoogleアナリティクスでも可能ですが、今回はGoogleタグマネージャーを使った実装方法をご紹介します。

設定手順

では、早速、実装手順です。

javascriptファイルをサーバーに格納

こちらのページの画面右側の「Download ZIP」からzipファイルをダウンロードします。

lunametrics/youtube-google-analytics · GitHub
github.com/lunametrics/youtube-google-analytics#google-tag-manager-installation

解凍したファイルから「lunametrics-youtube.gtm.js」のみ後のカスタムHTMLタグで使用します。

変数（旧：マクロ）

続いて、Googleタグマネージャの変数、トリガー、タグを設定します。
まずは、変数から。

cjs_YouTube動画存在判定

function() {

  var iframes = document.getElementsByTagName('iframe');
  var embeds = document.getElementsByTagName('embed');
  var i;

  function isYouTubeVideo(potentialYouTubeVideo) {

    var potentialYouTubeVideoSrc = potentialYouTubeVideo.src || '';

    if( potentialYouTubeVideoSrc.indexOf( 'youtube.com/embed/' ) > -1 || 
        potentialYouTubeVideoSrc.indexOf( 'youtube.com/v/' ) > -1 ) {

      return true;

    }

  }

  for(i = iframes.length - 1; i > -1; i--) {

    var _iframe = iframes[i];
    var test = isYouTubeVideo(_iframe);

    if(test) {
      return true;
    }

  }

  for(i = embeds.length - 1; i > -1; i--) {

    var _embed = embeds[i];
    var test = isYouTubeVideo(_embed);

    if(test) {
      return true;
    }

  }

  return false;

}