Wistia Video Milestone Tracking

Accepted Solutions (1)

Accepted Solutions (1)

evolytics_brian

23-07-2020

You'll probably have to leverage the Wistia JS API to monitor video activity. In the past, when taking a similar approach, I've loaded the related JS in a page load rule (only on pages where videos exist), then triggered a direct call rule from within the JS. Passing a payload in with the direct call rule lets me specify the milestone to track (play, 25%, 50%, 75%, complete, etc), as well as any other meta data I might need (video title, ID, duration, etc).

 

 

window.videos = {};
wistiaEmbeds.forEach(function (vid) {
  window.videos[vid.hashedId()] = {
    id: vid.hashedId(),
    name: vid.name(),
    duration: vid.duration(),
    status: {
      step_play: false,
      step_25: false,
      step_50: false,
      step_75: false,
      step_95: false,
      step_end: false
    }
  }

  function trackProgress(milestone, currentVideo) {
    currentVideo.milestone = milestone;
    console.log("Video milestone", milestone, "reached for:", currentVideo);
    
    // trigger your direct call rule here
    // _satellite.track("dcr:video progress", currentVideo);
  }

  function checkProgress(milestone, percent) {
    var step = "step_" + milestone;
    if (milestone === "play" || milestone === "end") {
      if (!window.videos[vid.hashedId()].status[step]) {
        window.videos[vid.hashedId()].status[step] = true;
        trackProgress(step, window.videos[vid.hashedId()]);
      }
    } else {
      if ((percent * 100) >= milestone) {
        if (!window.videos[vid.hashedId()].status[step]) {
          window.videos[vid.hashedId()].status[step] = true;
          trackProgress(step, window.videos[vid.hashedId()]);
        }
      }
    }
  }

  vid.bind('percentwatchedchanged', function (percent, lastPercent) {
    checkProgress(25, percent);
    checkProgress(50, percent);
    checkProgress(75, percent);
    checkProgress(95, percent);
  });

  vid.bind('play', function() {
    checkProgress('play');
  });

  vid.bind('end', function() {
    checkProgress('end');
  });
});

 

 

Caveats and assumptions:

  • The above code is functional, but I haven't done any real QA on it, and it hasn't run in any production environment, so use it as you will.
  • Make any modifications you want/need. (For example, you'll notice that I have a 95% complete step in there. I'll often use this instead of "complete" or "end" to account for those viewers who see all of the relevant content in a video, but drop off during the closing credits or as the speaker is saying goodbye.)
  • I haven't tested it, but I'm pretty sure the above code will NOT work with other players, nor will it work with IFRAME embedded Wistia players.
  • Running the above code in the console should allow for a quick test. You'll see the various milestones/steps written out in the console.
  • I didn't include any error handling in the code, so it WILL break on pages without the wistiaEmbeds JS object.
  • The code should work for pages with multiple videos. But, again, I haven't tested it.
  • The code is designed to only track the specified milestones/steps once per page load. So, if a viewer watches a video, then re-watches it, we'll only count the first time through. Similarly, if a viewer watches 25% of a video, then rewinds to a point before the 25% milestone, the code will not fire the 25% milestone tracking call again. Refreshing the page enables tracking to start over again.

Answers (0)