{"id":4706,"date":"2017-11-07T04:17:43","date_gmt":"2017-11-07T04:17:43","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=4706"},"modified":"2017-11-07T04:17:43","modified_gmt":"2017-11-07T04:17:43","slug":"track-html5-video-views-with-google-analytics","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/track-html5-video-views-with-google-analytics\/","title":{"rendered":"Track HTML5 Video Views with Google Analytics"},"content":{"rendered":"
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\u00a0Google Analytics<\/a>. Let\u2019s 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..!<\/div>\n

\u00a0<\/span><\/p>\n

\"Track<\/div>\n


\n<\/a>
\nDownload Script<\/a>\u00a0\u00a0\u00a0\u00a0\"\"\u00a0Live Demo<\/a><\/p>\n

HTML & JavaScript Code<\/b>
\n<\/span><\/p>\n

<script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.2.0\/jquery.min.js”><\/script>
\n<script>
\n$(document).ready(function<\/b>(){
\n……
\n……
\n……
\n});
\n<\/script>
\n\/\/HTML Code
\n<video id=”video<\/b>” \u00a0width=”100%” \u00a0controls>
\n<source src=”video.mp4″ type=”video\/mp4″>
\n<\/video><\/div>\n


\nGoogle Analytics<\/b>
\nCreate a free\u00a0Google Analytics<\/a>\u00a0account, add a property for your website. Here just modify UA-YOUR-GA-ID value.
\n<\/span><\/p>\n

<script>
\n(function<\/b>(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function<\/b>(){
\n(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new\u00a0Date();a=s.createElement(o),
\nm=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
\n})(window,document,’script’,’\/\/www.google-analytics.com\/analytics.js’,’ga’);
\nga<\/b>(‘create’, ‘UA-YOUR-GA-ID’, ‘auto’);
\nga<\/b>(‘send’, ‘pageview’);
\n<\/script><\/div>\n


\nJquery Bind Timeupdate<\/b>
\nContains jquery code. $(“#video”).bind(“timeupdate”, function(){} – here\u00a0video<\/i>\u00a0is 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.
\n<\/span><\/p>\n

var\u00a0i=0;
\n$(“#video”).bind(“timeupdate”,\u00a0function<\/b>()
\n{
\nvar\u00a0currentTime =\u00a0this.currentTime;
\nif(currentTime >\u00a00.66*(this.duration))
\n{
\nif(i<1)
\n{
\n\/* Watched 66% *\/
\nga<\/b>(‘send’, ‘event’, ‘Videos’, ‘Watched’,’Video Title’);
\n}
\ni=i+1; \/\/Reset for duplicates
\n}
\n});<\/div>\n


\nJquery Bind Ended<\/b>
\nThis works like previous function, using this you will find out how many people actually finished the video.
\n<\/span><\/p>\n

var\u00a0j=0;
\n$(“#video”).bind(“ended”,\u00a0function<\/b>()
\n{
\nif(j<1)
\n{
\n\/* Finished *\/
\nga<\/b>(‘send’, ‘event’, ‘Videos’, ‘Finished’,’Video Title’);
\n}
\nj=j+1;\u00a0\/\/Reset for duplicates
\n});<\/div>\n


\nGoogle Analytics Widget Filter<\/b>
\n<\/span><\/p>\n

\"Google<\/div>\n


\nResult<\/b>
\n<\/span><\/p>\n

\"Google<\/div>\n

<\/p>\n

Final Code<\/b>
\n<\/span><\/p>\n

<script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.2.0\/jquery.min.js”><\/script>
\n<script>
\n$(document).ready(function<\/b>(){
\nvar\u00a0i=0;
\nvar\u00a0j=0;<\/p>\n

\/* Video Watched *\/
\n$(“#video”).bind(“timeupdate”,\u00a0function<\/b>()
\n{
\nvar\u00a0currentTime =\u00a0this.currentTime;
\nif(currentTime >\u00a00.66*(this.duration))
\n{
\nif(i<1)
\n{
\n\/* Watched 66% *\/
\nga<\/b>(‘send’, ‘event’, ‘Videos’, ‘Watched’,’Video Title’);
\n}
\ni=i+1;\u00a0\/\/Reset for duplicates
\n}
\n});<\/p>\n

\/* Video Finished, Thanks *\/
\n$(“#video”).bind(“ended”,\u00a0function<\/b>()
\n{
\nif(j<1)
\n{
\n\/* Finished *\/
\nga<\/b>(‘send’, ‘event’, ‘Videos’, ‘Finished’,’Video Title’);
\n}
\nj=j+1;\u00a0\/\/Reset for duplicates
\n});<\/p>\n

});
\n<\/script>
\n\/\/HTML Code
\n<video id=”video” \u00a0width=”100%” \u00a0controls>
\n<source src=”video.mp4″ type=”video\/mp4″>
\n<\/video>
\n\/\/Google Analytics Code
\n<script>
\n(function<\/b>(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function<\/b>(){
\n(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new\u00a0Date();a=s.createElement(o),
\nm=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
\n})(window,document,’script’,’\/\/www.google-analytics.com\/analytics.js’,’ga’);
\nga<\/b>(‘create’, ‘UA-YOUR-GA-ID’, ‘auto’);
\nga<\/b>(‘send’, ‘pageview’);
\n<\/script><\/div>\n

\n
<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":4707,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[22],"tags":[51],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4706"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=4706"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4706\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/4707"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=4706"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=4706"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=4706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}