Solved
Wistia Video Milestone Tracking
Hi All,
We have Wistia video embedded on page without Iframe. Has anyone done Wistia video milestone tracking through Adobe Launch?
Brian_Johnson_Accepted solution
Level 8
July 23, 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.