Track HTML5 Video Views with Google Analytics
Wall Script
Wall Script
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>
web notification

9 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
  6. I'm not sure this works. All I see in google analytics is "video played" and video paused" it doesn't show watched or finished.

    ReplyDelete
  7. This is extremely useful, thank you so much for sharing!

    ReplyDelete
  8. I 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%".

    What 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 ...

    ReplyDelete
    Replies
    1. You need to modify the Google Widget Filter with 10% value.

      Delete

mailxengine Youtueb channel
Make in India
X