D3 Examples - This example shows how to record Vimeo Player usage stats with Keen IO. Make sure to include your 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>
  <script src="https://player.vimeo.com/api/player.js"></script>
</head>
<body>
  <iframe id="vimeo-player"
          src="https://player.vimeo.com/video/76979871"
          frameborder="0" height="360" width="640"
          webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
​
  <script>
  /*
    Learn more about the Vimeo Player API here:
    https://github.com/vimeo/player.js
    
    Learn more about keen-tracking.js here:
    https://github.com/keen/keen-tracking.js
  */
​
  var iframe = document.querySelector('#vimeo-player');
  var player = new Vimeo.Player(iframe);
  trackEvents(player);
​
  function trackEvents(player) {
    var client = new Keen({
      projectId: 'YOUR_KEEN_PROJECT_ID',
      writeKey: 'YOUR_KEEN_WRITE_KEY'
    });
    var extend = Keen.utils.extend;
​
    // 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.on('play', function() {
      getPlayerState(player, function(state){
        client.recordEvent('video-interaction', extend(state, { event_type: 'started' }));
      });
    });
​
    player.on('pause', function() {
      getPlayerState(player, function(state){
        client.recordEvent('video-interaction', extend(state, { event_type: 'paused' }));
      });
    });
​
    player.on('ended', function() {
      getPlayerState(player, function(state){
        client.recordEvent('video-interaction', extend(state, { event_type: 'finished' }));
      });
    });
​
    player.on('error', function() {
      getPlayerState(player, function(state){
        client.recordEvent('video-interaction', extend(state, { event_type: 'error' }));
      });
    });
  }
    
  function getPlayerState(p, cb){
    p.getVolume().then(function(volume){
      p.getCurrentTime().then(function(time){
        p.getDuration().then(function(duration){
          cb({
            'is-muted': volume === 0,
            'current-position': time,
            'duration': duration,
            'volume': volume
          })
        }).catch(handleStateError);
      }).catch(handleStateError);
    }).catch(handleStateError);
  }
​
  function handleStateError(err) {
    console.log(err);
  }
  </script>
</body>
</html>
    