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..!
Download Script
Live DemoHTML & 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>
<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>
(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
}
});
$("#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
});
$("#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
Result
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>
<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>
Awesome ! Add more some GA monipulations ! Thnx !
ReplyDeleteCan you do example with youtube video ?
ReplyDeleteGreat trick =) thanks for sharing
ReplyDeleteHey 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.
ReplyDeleteWhat do I do for the feild "link to report or URL" at the bottom of the widget creator?
ReplyDeleteI'm not sure this works. All I see in google analytics is "video played" and video paused" it doesn't show watched or finished.
ReplyDeleteThis is extremely useful, thank you so much for sharing!
ReplyDeleteI successfully implemented this script on my demo site. Unfortunately when I changed the name of Event Action "Watched" into "Watch 10%" because I changed the percentage, the event action in Google Analytics still show "Watched" rather than "Watch 10%".
ReplyDeleteWhat should I do?
Another question, if I want to make Event Action: started, 5%, 10%, 25%, 50%, 75% and ended. Is it true the code below by repeat and change the percentage only?
i = 0; //for 5%
k = 0; //for 10%
l = 0; //for 25%
m = 0; //for 50%
n = 0; //for 75%
/* Video Watched 10% */
$("#video").bind("timeupdate", function()
{
var currentTime = this.currentTime;
if(currentTime > 0.1*(this.duration))
{
if(i<1)
{
/* Watched 10% */
ga('send', 'event', 'Videos', '10%','Video Title');
}
i=i+1; //Reset for duplicates
}
});
etc ...
You need to modify the Google Widget Filter with 10% value.
Delete