How to track video viewing pattern using JavaScript?

Everyone is interested in gathering data may it clicks on your website, analytics about who shared your blog or which song does people prefer to play in the morning. In nutshell data is critical.

Recently we developed a tool to track the data of the user of what he does while he is watching a video. The task came to us while we were working on a web development AngularJS and JAVA based project. The client wanted to create the heat map to analyze the user’s viewing pattern. Hence we created this using pure JavaScript

Using this data we plan to get analytics like

  1. Which portion of the video user has watched most
  2. Which portion of the video user has skipped
  3. Which portion of the video user is watching again and again

We have open sourced it and it’s free!!

Step 1:
Download and include library from GitHub

https://github.com/thirdrocktechkno/trt-video-analytics

<script type="text/javascript" src="video.js"></script>

Step 2

Create an instance of our Class with the specific Id and use the object to access the method of that class as mentioned below

var video = new Video(‘id of video tag’);
var trackArr = video.trackArr;

The method ‘trackArr’ will return you a array of tracking information. The array consist of data that would tell you which time frame of the video is watched how many time, which part has been skipped and the total length of the video. Hence the array’s zeroth element will be 1st second’s count, and the first element of the array will be 2 second’s count and so on.

Here is an example array for reference,

video.trackArr = [1,1,1,1,1,2,2,2,2,2,1,1,1,1,1,1,3,3,3,3,3,3,3,undefined,undefined,undefined,undefined,undefined,undefined,1,1,1,1,1]

So form the above we can make a conclusion that the first 5 second of the video has not be repeated while the user has repeated 5 - 10 seconds twice. Similarly the undefined will indicate that user has skipped 24 - 29 second of the video.

Try the library, it will be a great start to track your video analytics and make informed implementations.

You feedback is what keeps us going !!
Please share your feedback. :)

· · · ·

Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice and mobile app development company with over 10 years of experience. Client success forms the core of our value system.

We have expertise in the latest technologies including angular, react native, iOs, Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries.

Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.

How to improve CSS layout with flex?

Flexbox is a layout model that allows their children elements to align horizontal and vertical with distributing space within a container. We can use flexbox when we need to resize their children’s size or growing to fill unused space or shrinking to avoid overflowing the flex container.

Read More

How to use Docker and Docker Compose with NodeJS (NodeJS + Mongodb + Elasticsearch)

Docker is a tool designed to make it easier to create, deploy, and run applications by using containers. Docker is a bit like a virtual machine. But unlike a virtual machine, rather than creating a whole virtual operating system

Read More

Angular web development Learn what’s new in Angular 6

Looking to embrace Angular 6 to build your app and want to hire an Angular web development company for the same? Learn what’s new in Angular 6 in the first place.

Read More