OT4: How do I track my video in Opentracker?

In this video I'll explain how to track videos, so that you can improve your videos. By the end of this video you are going to know how to track a Vimeo video.  The code is on this DEMO page (which is mentioned in the underneath video): https://www.opentracker.net/tests/track-video.html

You can read more about adding custom metrics here.

Need more information on how to implement things in your business? Schedule a Call

A simple example of sending an event

In the simplest form this is how you send an event:

<script>
// run this script when opentracker has loaded
function ot_onload() {
  // map an event
  ot_map.put("ot_video_title", title);

  // send the event
  ot_log_state();
}
</script>

Underneath is what the script looks like (but please visit DEMO page and view the source, to see the code in action). You cannot just cut and paste the code, it will not work without modifying it for your specific needs.

<!-- adding jquery for vimeo play to work -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
<!-- adding vimeo for video play to work https://github.com/vimeo/player.js/ -->
<script src="https://player.vimeo.com/api/player.js"></script>
<!-- adding opentracker for tracking to work -->
<script src="//script.opentracker.net/?site=AddYourRegisteredSiteHere"></script>
<script>
// the following script shows how to use javascript to track a vimeo video

// global scope these variables
var iframe;
var player;

// a jquery function run when the page has loaded
$(document).ready(function(){
    iframe = $('#pablowebinarcerebro');
    player = new Vimeo.Player(iframe);
});

// lastSeconds: keeps track of the amount seconds reported (we'll avoid sending duplicate messages) 
var lastSeconds = 0;

// when opentracker has loaded, it calls the ot_onload function if defined on the page
function ot_onload() {

  // this is a vimeo function that gets called if vimeo video is ready
  // see https://github.com/vimeo/player.js/
  player.ready().then(function() {

    // ot_map and ot_tag are the datastructures used to send data to opentracker
    // in this example we are only using ot_map. the key ot_video_state is set
    // and the key ot_video_progress is set
    // Any key that starts with ot_ will show up in the dashboard (ot_video_state, ot_video_progress)
    ot_map.put("ot_video_state", "video ready, but not started");
    // debug to the browser
    console.log("video ready, but not started");// everything is loaded

    ot_map.put("ot_video_progress", "Not played");
    console.log("video progress: Not");// everything is loaded

    // needed to log or send the state of all variables, otherwise things won't get stored on the server
    player.getVideoTitle().then(function(title) {
      ot_map.put("ot_video_title", title);
      console.log('title:', title);
    });

    // log ot_video_state, ot_video_progress and ot_video_title (and all the standard stuff) to the server
    ot_log_state();
  });

  // this is a vimeo function that gets called if vimeo video is played
  player.on('play', function() {
    ot_map.put("ot_video_state", "video started");
    ot_log_state();
    console.log("video started");
  });

  // this is a vimeo function that gets called if vimeo video is paused
  player.on("pause", function() {
    ot_map.put("ot_video_state", "video paused");
    ot_log_state();
    console.log("video paused");
  });

  // this is a javascript function that gets called every 5 seconds
  setInterval(() => { 
    player.getCurrentTime().then(function(seconds) {

      // seconds = the current playback position
      if (seconds > lastSeconds) {
        var ceilSeconds = Math.ceil(seconds / 10) * 10;
        var floorSeconds = Math.floor(seconds / 10) * 10;
        ot_map.put("ot_video_progress", "Played " + floorSeconds + " to " + ceilSeconds + "s");
        console.log("Played " + floorSeconds + " to " + ceilSeconds + "s");
        ot_log_state();
        lastSeconds = lastSeconds + 10;
      }
    }).catch(function(error) {
      console.log('error: ' + error);
    });  
  }, 5000);// 5 seconds
}
</script>