動画設置に用いるHTMLコード

今回の例では, トラッキングコードを簡素化させるために, 埋め込みYoutubeのHTMLコードを下記のように変更します。変更内容は、iframeタグのsrc属性で指定する動画URLの後ろに?version=3&enablejsapi=1とつけるだけです。これにより、Youtubeプレイヤーの再生状況をJavaScriptにより検知することができます。

<iframe width="420" height="315" src="https://www.youtube.com/embed/mnvAOaHz1EQ?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

Googleアナリティクスのトラッキングコード

下記のコードはサイトでjQueryを導入済みの場合を想定したコードになっています。もし、jQueryを導入していない場合は、
サイトの開発者の方と相談して、jQueryを導入するか、下記のコードをjQueryを使わない形式(実際に利用するサイトに適合する形式)
で書き換えてもらってください。また、Googleアナリティクスは、ユニバーサル・アナリティクスが通常の方式でサイトに設置していることを想定しています(Googleタグマネージャを利用している場合は、dataLayer変数の処理のコメントアウトを削除して、ご利用ください)。

$(document).ready(function () {
  // YoutubeのAPIライブラリを読み込む.
  $.getScript('https://www.youtube.com/player_api', function () {
    YT.ready(function () {
      var getStateChangeEventName = function (event_id) {
        if (event_id == YT.PlayerState.ENDED) return 'YT.PlayerState.ENDED';
        if (event_id == YT.PlayerState.PLAYING) return 'YT.PlayerState.PLAYING';
        if (event_id == YT.PlayerState.PAUSED) return 'YT.PlayerState.PAUSED';
        if (event_id == YT.PlayerState.BUFFERING) return 'YT.PlayerState.BUFFERING';
        if (event_id == YT.PlayerState.CUED) return 'YT.PlayerState.CUED';
        if (event_id == YT.PlayerState.UNSTARTED) return 'YT.PlayerState.UNSTARTED';
        return 'Unknown';
      };

      $('iframe').filter(function(i, element){
        return element.src.indexOf('youtube.com/embed/') >= 0;
      }).each(function(i, element) {
        var player = new YT.Player(element);
        player.addEventListener('onStateChange', function (e) {
          var videoData = e.target['getVideoData']();
          var actionName = getStateChangeEventName(e["data"]);
          var labelName = videoData.video_id + " : " + videoData.title;
          ga('send', 'event', 'Youtube', actionName, labelName, {
            'nonInteraction': true
          });
//          dataLayer.push({
//            'event': 'YoutubeEvent',
//            'youtube': {
//              'action': actionName,
//              'title': videoData.title,
//              'video_id': videoData.video_id
//            }
//          });
        });
      });
    });
  });
});

まとめ

これでサイトに貼り付けた埋め込みYoutubeプレイヤーの再生状況をGoogleアナリティクスでイベントトラッキングすることができるようになりました。このイベントトラッキングを利用することで、動画を多用するサイトでは、「Youtube動画を最後までみたらコンバージョンとする」といった1つレベルの高いカスタマイズもできるようになります。