Track HTML5 Video Views with Google Analytics
Wall Script
Follow Me:
Wednesday, April 27, 2016

Track HTML5 Video Views with Google Analytics

Is there a simple solution to track viewers engagement, if you have published HTML 5 video on the web? Yes. You can use combination of Google Analytics and very few lines of coding to see detailed video engagement analytics. You can track total number of viewers for your video, number of viewers who has just watched minimum percentage of video you have mentioned, number of viewers who has completed watching the video and many such analytics could be found using Google Analytics. Let’s see how far you are utilizing Google Analytics for such great analysis of your posted content on the web. Have a look at the demo..!

Track HTML5 Video Views with Google Analytics


Download Script     Live Demo

HTML & JavaScript Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
......
......
......
});
</script>
//HTML Code
<video id="video"  width="100%"  controls>
<source src="video.mp4" type="video/mp4">
</video>

Google Analytics
Create a free Google Analytics account, add a property for your website. Here just modify UA-YOUR-GA-ID value.
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-YOUR-GA-ID', 'auto');
ga('send', 'pageview');
</script>

Jquery Bind Timeupdate
Contains jquery code. $("#video").bind("timeupdate", function(){} - here video is the ID name of the video tag, this will bind with video timeline. This will call Google Analytics function once it crossed 66%, you can modify percentage value.
var i=0;
$("#video").bind("timeupdate", function()
{
var currentTime = this.currentTime;
if(currentTime > 0.66*(this.duration))
{
if(i<1)
{
/* Watched 66% */
ga('send', 'event', 'Videos', 'Watched','Video Title');
}
i=i+1; //Reset for duplicates
}
});

Jquery Bind Ended
This works like previous function, using this you will find out how many people actually finished the video.
var j=0;
$("#video").bind("ended", function()
{
if(j<1)
{
/* Finished */
ga('send', 'event', 'Videos', 'Finished','Video Title');
}
j=j+1; //Reset for duplicates
});

Google Analytics Widget Filter
Google Analytics Video Filter

Result
Google Analytics Video Filter


Final Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var i=0;
var j=0;

/* Video Watched */
$("#video").bind("timeupdate", function()
{
var currentTime = this.currentTime;
if(currentTime > 0.66*(this.duration))
{
if(i<1)
{
/* Watched 66% */
ga('send', 'event', 'Videos', 'Watched','Video Title');
}
i=i+1; //Reset for duplicates
}
});

/* Video Finished, Thanks */
$("#video").bind("ended", function()
{
if(j<1)
{
/* Finished */
ga('send', 'event', 'Videos', 'Finished','Video Title');
}
j=j+1; //Reset for duplicates
});

});
</script>
//HTML Code
<video id="video"  width="100%"  controls>
<source src="video.mp4" type="video/mp4">
</video>
//Google Analytics Code
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-YOUR-GA-ID', 'auto');
ga('send', 'pageview');
</script>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


5 comments:

  1. Awesome ! Add more some GA monipulations ! Thnx !

    ReplyDelete
  2. Can you do example with youtube video ?

    ReplyDelete
  3. Great trick =) thanks for sharing

    ReplyDelete
  4. Hey there. Thanks for sharing this information. It would be really great to see the analytics to see the activity on the videos. It is very important to keep an eye on the activities on the website content, this is possible for articles but was not possible for videos but this update made it possible.

    ReplyDelete
  5. What do I do for the feild "link to report or URL" at the bottom of the widget creator?

    ReplyDelete

Make in India