When creating a branching video in HapYak you may want to keep track of which or how many branches the viewer watches. You can use this information to trigger an action (for example: release a gate, display an annotation or not, etc...) based on some viewing pattern (watched at-least 3 branches, watched branch 2, etc...)

Let's take a simple branching video:

Intro
Branch Point
Branch 1
Branch Point (repeat)
Branch 2
Branch Point (repeat)
Branch 3
Branch Point (repeat)
Branch 4
Branch Point (repeat)
Ending

Track Viewing

To track the viewing:

  1. place an iframe annotation over Branch 1. 
  2. Set the start time to the first frame of that Branch. 
  3. Set the duration so that it is over the entire duration of the Branch. 
  4. Copy and paste the sample code 1 into the editor / HTML tab...
  5. Repeat steps 1-4 for each Branch.

Sample Code 1

<!doctype html>
<html>
  <head>
    <title>branchTracker_030316</title>
    <style type="text/css">
      html, body { margin: 0; padding: 0 }   </style>
  </head>
  <body>
    <!-- HTML code goes here -->

    <script type="text/javascript" src="//d2qrdklrsxowl2.cloudfront.net/js/hapyak-iframe.js"></script>
    <script type="text/javascript" src="//d2qrdklrsxowl2.cloudfront.netjs/hapyak.api.js"></script>
    <script type="text/javascript">
      (function () {
        hapyak.context.addEventListener('iframeshow', function (variables) {
          var videoCounter;
          var iframeGuid = window.location.pathname.split('/').pop().replace('.html','');

          if (hapyak.context.env.get(iframeGuid)) {
            return;
          } else {
            hapyak.context.env.set(iframeGuid, true, false, 'track');

            if (hapyak.context.env.get('videoCounter')) {
              videoCounter = hapyak.context.env.get('videoCounter');
            } else {
              videoCounter = 0;
            }

            videoCounter = videoCounter += 1;
            hapyak.context.env.set('videoCounter', videoCounter, false, 'track');
          }
        });
      }());
    </script>
  </body>
</html>

Trigger an Action

You can now trigger an action. For example, stop displaying an annotation....

In this example this particular iframe annotation prevents the viewer from viewing the ending by jumping to a specified time (in this case 10 seconds, the beginning of the first branch point). Once two branches are viewed, this annotation will no longer be active.

  1. Add an iframe annotation.
  2. Set the Start Time to the beginning of the section you want to prevent the viewer from watching. In this case, the Ending.
  3. Copy and paste the below sample code 2.
  4. Set Display Rule to videoCounter != 2
  5. set the var jumpTo to whichever time you like (in seconds).

Sample Code 2

<!doctype html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      html, body { margin: 0; padding: 0; background: yellow }
      background: yellow;
    </style>
    <script>
      var jumpTo = 10;
    </script>
  </head>
  <body>
    <!-- HTML code goes here -->

    <script type="text/javascript" src="//d2qrdklrsxowl2.cloudfront.net/js/hapyak-iframe.js"></script>
    <script type="text/javascript" src="//d2qrdklrsxowl2.cloudfront.netjs/hapyak.api.js"></script>
    <script type="text/javascript">
      (function () {
        hapyak.context.addEventListener('iframeshow', function (variables) {
          if (!hapyak.context.player.isEditMode) {
            hapyak.context.player.currentTime = jumpTo;
          }
        });
      }());
    </script>
  </body>
</html>
Did this answer your question?