動画(FlowPlayer)の再生回数をGoogle AnalyticsでTrackingする

投稿日：

flowplayer_google_analytics動画の再生回数、最後まで見たかどうかをGoogle AnalyticsでTrackingする方法。

YouTubeを利用する場合は、YouTube Analyticsがあるので特に何もする必要はない。

どうしてもGoogle Analyticsを使いたい場合は、YouTube JavaScript Player APIを使うと再生、停止のEventを取得できるので、EventをTriggerにしてGoogle Analyticsに情報を送れば可能。この辺は前の記事を参考に。

今回は動画をYouTubeに置きたくないという要件だったので、再生するためにOpen SourceのFlash Player "FlowPlayer"(version 3.2.7)を利用。

FlowPlayerはGPLv3で配布されていて、Free版はFull ScreenにするとFlowPlayerのLogoが表示される。このLogoを消すためにはCommercial Licenseを購入する必要がある。詳しくはOfficial Siteを参照。

このFlowPlayer非常によく出来ていて、外見(Skin)を変更したり、JavaScriptで外部から操作できるようなAPIが充実しているので、とても使いやすい。

Google Analyticsと連携するCodeはOfficial Siteにもある。Eventにhookして、Google Analyticsに情報を送信するのはYouTubeのAPIと同じ。それすらも面倒くさい場合は、直接Parameterを指定すると、FlowPlayerがGoogle Analyticsに情報を送信してくれる機能もある。

Official SiteにあったのはGoogle Analyticsの古いCodeを利用していたので、jQueryと組み合わせて利用するために次のように記述。

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-1234567-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

<script type="text/javascript">
jQuery.extend({
    gaEventTracker: function(action, label, target, value) {
        if (typeof _gaq == 'undefined') return false;
        var target = target || location.href;
        _gaq.push(['_trackEvent', action, label, target, value]);
    }
});
</script>

<script type="text/javascript">
jQuery(function($){ 
    flowplayer('movie-player', {
      src: 'flowplayer.swf',
      wmode: 'transparent'
    },
    {
      clip: { 
        onStart: function(clip) {
            $.gaEventTracker('Videos', 'Play', clip.url);
        },

        onPause: function(clip) { 
          $.gaEventTracker('Videos', 'Pause', clip.url, parseInt(this.getTime()));
        },

        onFinish: function(clip) { 
           $.gaEventTracker('Videos', 'Finish', clip.url);
        }
      }
    });
});
</script>

"_trackEvent"の詳細はGoogle AnalyticsのOfficial Documentを参照（英語）

実際にGoogle AnalyticsにEvent情報を送っているかは、Google ChromeのDeveloper Toolsを使って確認する。

下図のように"__utm.gif"を取得していれば、何かしらの情報をGoogle Analyticsに送っている。開発環境（Google Analyticsに登録したDomain以外）では動作しない。

Google_Chrome_Developer_Tools

< 2011/12/16 Modified >
Google Chrome + Google Analytics Debuggerを利用するとConsoleにHost Nameなどの情報を表示してくれるので便利。

image

さらにiPad, iPhone用にはHTML5のVideo Tagを使っているので、こちらのTrackingも同様に取得する。Video TagのEventについては、下記Siteを参考に。

<script>
jQuery(function($) { 
    var jContent = $('#content');
    jContent.find('video') 
    .bind('loadeddata', function() { 
        $.gaEventTracker('Videos(HTML5)', 'Play', $(this).attr('src'));
    })
    .bind('pause', function() { 
        $.gaEventTracker('Videos(HTML5)', 'Pause', $(this).attr('src'));
    })
    .bind('ended', function() { 
        $.gaEventTracker('Videos(HTML5)', 'Finish', $(this).attr('src'));
    });
});
</script>

iPadの場合はSettingからSafari → Debug ConsoleをOnにするとconsole.logの結果を閲覧できる。もしくはiOS Simulatorを使うとDebugし易い。詳しくは前の記事で。

 

< Related Posts >