Satellite Video Tracking Series: Getting Started with HTML5 Videos

Here at Satellite we have created a different kind of Tag Management System. A top-down solution which is built around creating rules based on the unique user behaviors or events  on your website that are truly important to your business. By keeping implementation simple with Satellite, you are able to actually decrease the complexity of your implementation by employing the most leading edge technology and methods. Video tracking is a great example of a set of user interactions that today in traditional implementations or with our Satellite Appreciation Partners (aka other TMS vendors) are done in a very rigid, siloed, and complex manner that really limit your flexibility with what you are able to do with your data.  We need to break out of this antiquated mindset of being told how you have to track certain things and emerge into the future of tagging today.  So let’s walk through the steps of starting to track HTML5 Video on your site using the simple Satellite TMS way.

Gone are the days of spending weeks, months, or longer attempting to implement a different tracking solution or build a new rule for each analytics solution.

Step 1:  Create the foundation

The building blocks of tackling this task of adding tracking to an HTML5 video player on your site is creating the data elements to connect to the additional data points that you will want to use throughout the rest of the process.  The complete list of the elements that are available to you from the HTML5 Video object are listed out on the Mozilla Developer site here. For this use case we are going to focus on the following elements.

  • video.currentTime – The exact point in time of the video at any given point or action.
  • video.currentSrc – The full url/name of the video file.
  • video.duration – The total length of the video file.

Note:  For a refresher on how to create data elements read the post, Unlock the True Power of Your Tags.

Screen Shot 2013-03-28 at 8.35.50 PM

Any resource on your team, at any skill level will be able to fill out this form.  If they can not, you need to let them go and call IQ Workforce to find someone who can. List out the exact name of the element you want the value of from the HTML5 video object reference and select JS Object in the drop down and you are done. Do the same thing with the other two elements and you will have created three extremely powerful data elements that can be used throughout your site.

Step 2: Create a milestone watched rule

The next step is to find and identify the element of the video/player to be tracked.  You can go to the page with the video and dig through the DOM to find the information or you can use Rover.

Note:  For a refresher on using Rover to identify the elements you would like to track in real time read the post, Meet Rover.

Navigate to the web page with the video, and activate Rover.  Once you have selected the element identified then you will be able to accelerate the creation of the rules. From the Rule Suggestion created by Rover, select the “Create Rule” button.

Screen Shot 2013-03-28 at 9.09.37 PM

This will enable you to create a new Event Based rule with the correct DOM / video element already selected and filled out for you in the rule. This is a real time saver when creating new rules. From the “Event Type” section within the Identifier select the “% complete” from the HMTL5 Video portion of the option. Then you simply enter the percentage milestone that you want to be the trigger point for the rule.

Screen Shot 2013-03-28 at 9.21.15 PM

Here is where we get to leverage the data elements that we created in Step 1 to send these essential video data points to not only Adobe/Omniture Site Catalyst, but to Google Analytics as well.

Screen Shot 2013-03-28 at 9.22.15 PM

Screen Shot 2013-03-28 at 9.23.04 PM

To see a live demo of this working, turn on your favorite debugger and head over to my test site.

Step 3: Plot world domination

But wait, there’s more! Gone are the days of spending weeks, months, or longer attempting to implement a different tracking solution or build a new rule for each analytics solution. Instead create rules based on the behaviors and events that are the most important and send the related data to as many different analytics vendors and tracking solutions as you would like. Voice of the customer, re-marketing pixels, or any other emerging technology can be utilized right away without waiting for templates and integrations to be created.

In future posts in the series we will cover how to create rules that will track:

  • Video plays / pause / complete / volume events
  • Flash Video Tracking
  • Video playlist tracking

Spolier, they are all just as easy as this one.

Leave a Comment

Your email address will not be published.

Contact Us

Related Posts

Join the Conversation

Check out Kelly Wortham’s Optimization based YouTube channel: Test & Learn Community.

Search Discovery
Education Community

Join Search Discovery’s new education community and keep up with the latest tools, technologies, and trends in analytics.

Follow Us


Share on facebook
Share on twitter
Share on linkedin
Scroll to Top