Wistia Video Milestone Tracking

[RounakKumar]

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]

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.

[AAanon]

How do I track milestones for wistia video in an iframe?

[Brian_Johnson_]

@AAanon - It's actually pretty similar. Using the documentation on the Wistia site, there's a quick reference to interacting with videos that are embedded via IFRAME.

Assuming you have the necessary Wistia JS library on the page (

//fast.wistia.net/assets/external/E-v1.js), you should be able to use the following. It behaves exactly as the solution I shared above, with the same caveats and assumptions.

https://github.com/hitGovernor/public-tools/blob/a3c883d0d36e1a01f7e21d3770d97b7754245060/videos/wis...

[AAanon]

Can you help me with passing the payload in with the direct call? I created direct call rules each to track start, 25%, 50%, 75%, and end, but not sure out to capture that in the custom code so it sends the data to analytics. An example would be useful

[Brian_Johnson_]

@AAanon - No problem.

I would suggest a single direct call rule to handle all of your video tracking. For this sake of this post, let's assume this rule is named "dcr:video progress" and that we're doing the following two things:

1. Setting Adobe Analytics variables
2. Sending the Analytics beacon with a link tracking  (s.tl()) call

Setting Adobe Analytics variables

In the video tracking library I shared in my earlier comments, uncomment the _satellite() call on line 17. This should set you up to call the "dcr:video progress" direct call rule, passing in a payload (JS object) with the following properties:

• duration > length of video in seconds (number)
• id > unique video identifier (string)
• milestone > step in the video playback, including step_play, step_25, step_50, step_75, step_95, and step_end (string)
• name > name/title of the video (string)

Add an Adobe Analytics Set Variables action to the rule. When setting variables other than events, you can reference the properties from the payload directly using the %event.detail.property% syntax. For example. Note that for eVar4, I'm concatenating multiple values:

To set any events, update using custom code similar to the example below. Note the use of s.linkTrackVars and s.linkTrackEvents because we're sending this using an s.tl() request:

Sending the Analytics beacon with a link tracking  (s.tl()) call

Nothing special here. Set up an Adobe Analytics Send Beacon action and you're in buisiness. Feel free to give the custom link a static name (the direct call rule name, perhaps), or even make it dynamic using the %event.detail.property% syntax highlighted above.

The example call below is from a "step_play" tracking call and is based on the eVar and event settings above.