D3 Examples - This example shows how to record Facebook Video Player usage stats with Keen IO. Make sure to include your Facebook App ID, as well as Keen IO Project ID and Write Key. If you don't have a Keen IO account, create one here for free: http://keen.io/signup

xxxxxxxxxx
 
<html>
<head>
  <meta charset="utf-8">
  <script src="https://d26b395fwzu5fz.cloudfront.net/keen-tracking-1.0.1.js"></script>
</head>
<body>
  <div id="fb-root"></div>
  <script>
  /*
    Learn more about the Facebook Video Player API here:
    https://developers.facebook.com/docs/plugins/embedded-video-player/api#control-reference
    
    Learn more about keen-tracking.js here:
    https://github.com/keen/keen-tracking.js
  */
  window.fbAsyncInit = function() {
    FB.init({
      appId: 'YOUR_FB_APP_ID',
      xfbml: true,
      version: 'v2.6'
    });
​
    FB.Event.subscribe('xfbml.ready', function(msg) {
      if (msg.type === 'video') {
        trackEvents(msg.instance);
      }
    });
  };
​
  function trackEvents(player) {
    var client = new Keen({
      projectId: 'YOUR_KEEN_PROJECT_ID',
      writeKey: 'YOUR_KEEN_WRITE_KEY'
    });
​
    // These flags can help with local development
    Keen.debug = true;
    // Keen.enabled = false;
    client.on('recordEvent', console.log);
​
    client.extendEvents(function(){
      return {
        browser: Keen.helpers.getBrowserProfile(),
        player: {
          'is-muted'         : player.isMuted(),
          'current-position' : player.getCurrentPosition(),
          'duration'         : player.getDuration(),
          'volume'           : player.getVolume()
        }
      }
    })
​
    player.subscribe('startedPlaying', function(e) {
      client.recordEvent('video-interaction', { event_type: 'started' });
    });
​
    player.subscribe('paused', function(e) {
      client.recordEvent('video-interaction', { event_type: 'paused' });
    });
​
    player.subscribe('finishedPlaying', function(e) {
      client.recordEvent('video-interaction', { event_type: 'finished' });
    });
​
    player.subscribe('startedBuffering', function(e) {
      client.recordEvent('video-interaction', { event_type: 'started-buffering' });
    });
​
    player.subscribe('finishedBuffering', function(e) {
      client.recordEvent('video-interaction', { event_type: 'finished-buffering' });
    });
​
    player.subscribe('error', function(e) {
      client.recordEvent('video-interaction', { event_type: 'error' });
    });
  }
​
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
  </script>
​
<!-- Your embedded video player code -->
  <div class="fb-video"
       data-href="https://www.facebook.com/WeRateDogs/videos/1134644986596723/"
       data-width="500"
       data-allowfullscreen="true"></div>
</body>
</html>
    