Wistia Video Milestone Tracking

Avatar

Avatar

RounakKumar

Avatar

RounakKumar

RounakKumar

22-07-2020

Hi All,
We have Wistia video embedded on page without Iframe. Has anyone done Wistia video milestone tracking through Adobe Launch?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

evolytics_brian

Avatar

evolytics_brian

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)