Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Wistia Video Milestone Tracking

RounakKumar
Level 2
Level 2

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

1 Accepted Solution
evolytics_brian
Correct answer by
Community Advisor
Community Advisor

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.

View solution in original post

1 Reply
evolytics_brian
Correct answer by
Community Advisor
Community Advisor

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.

View solution in original post