{"id":2671,"date":"2012-06-14T17:57:00","date_gmt":"2012-06-14T13:57:00","guid":{"rendered":"http:\/\/blog.denivip.ru\/?p=2671"},"modified":"2013-08-05T14:11:13","modified_gmt":"2013-08-05T10:11:13","slug":"html5-analytics","status":"publish","type":"post","link":"http:\/\/blog.denivip.ru\/index.php\/2012\/06\/html5-analytics\/?lang=en","title":{"rendered":"HTML5 &lt;video&gt; Analytics"},"content":{"rendered":"<h2><a href=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/analytics.png\"><\/a><\/h2>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2646\" title=\"Analytics\" src=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/analytics.png\" alt=\"\" width=\"473\" height=\"451\" srcset=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/analytics.png 473w, http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/analytics-300x286.png 300w\" sizes=\"(max-width: 473px) 100vw, 473px\" \/><\/p>\n<p>If you offer online video services, no doubt you have not once thought of video views analytics. In a Flash-based OSMF framework, there is GTrackPlugin to collect statistics on content viewing. Also, you can also use our <a href=\"(http:\/\/labs.denivip.ru\/projects\/osmfvideoanalytics\"><span style=\"text-decoration: underline;\">OSMF <\/span><span style=\"text-decoration: underline;\">Video <\/span><span style=\"text-decoration: underline;\">Analytics<\/span><\/a>.<\/p>\n<p>However, if your service HTML5 based, you need a purpose designed viewing analytics. To build such a plugin, HTML5 Media API should be used. For more on this API, read this <a href=\"http:\/\/blog.denivip.ru\/index.php\/2012\/06\/%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%ba%d0%b0-html5-%d0%bf%d0%bb%d0%b5%d0%b5%d1%80%d0%b0\/\"><span style=\"text-decoration: underline;\">post on HTML5 player <\/span><span style=\"text-decoration: underline;\">implementation<\/span><\/a>. <!--more--><\/p>\n<h2>HTML5 Video Analytics<\/h2>\n<p>The main idea behind video analytics is collecting the data regarding:<\/p>\n<ul>\n<li>User interests (to recommend relevant content)<\/li>\n<li>Video exit time<\/li>\n<li>View count<\/li>\n<li>Client to server connection quality<\/li>\n<li>Full video file buffering time<\/li>\n<li>Content playtime<\/li>\n<li>Video seek history<\/li>\n<li>Playback issues<\/li>\n<\/ul>\n<p>Below is a flow chart for the HTML5 Video analytics system.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/Video-Analytics.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-2634 aligncenter\" title=\"Video-Analytics\" src=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/Video-Analytics-628x1024.png\" alt=\"\" width=\"439\" height=\"715\" srcset=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/Video-Analytics-628x1024.png 628w, http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/Video-Analytics-184x300.png 184w, http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/Video-Analytics.png 649w\" sizes=\"(max-width: 439px) 100vw, 439px\" \/><\/a><\/p>\n<p>The Analytical data collection module is written in JavaScript, as this language is compatible with Media API. This plugin subscribes to the video playback events. When the events occur, the plugin collects data from the player. In order to subscribe, the addEventListener() method is used. Example:<\/p>\n<pre>vplayer.addEventListener(&quot;loadeddata&quot;, onLoadedData);\r\nvplayer.addEventListener(&quot;loadstart&quot;, onLoadStart);\r\nvplayer.addEventListener(&quot;seeking&quot;, onSeeking);\r\nvplayer.addEventListener(&quot;seeked&quot;, onSeeked);\r\nvplayer.addEventListener(&quot;canplay&quot;, onCanPlay);\r\nvplayer.addEventListener(&quot;canplaythrough&quot;, onCanPlayThrough);\r\nvplayer.addEventListener(&quot;waiting&quot;, onWaiting);\r\nvplayer.addEventListener(&quot;stalled&quot;, onStalled);\r\nvplayer.addEventListener(&quot;suspend&quot;, onSuspend);\r\nvplayer.addEventListener(&quot;playing&quot;, onPlaying);\r\nvplayer.addEventListener(&quot;timeupdate&quot;, onTimeUpdate);\r\nvplayer.addEventListener(&quot;ended&quot;, onEnded);<\/pre>\n<p>Here are the most typical events for Google Analytics:<\/p>\n<ul>\n<li>Too narrow Web access bandwidth &#8212; video buffering rate is substantially slower than the video bitrate<\/li>\n<li>Too long video start delay, e.g., more than 8 seconds<\/li>\n<li>Video start time<\/li>\n<li>Video viewing percentage<\/li>\n<li>Video views by categories and names<\/li>\n<li>Buffering count<\/li>\n<li>Buffering duration<\/li>\n<\/ul>\n<h2>Data Accumulation<\/h2>\n<p>Next, the analytical module has delivers the data to the database and to Google Analytics to generate reporting.<\/p>\n<p>To transfer the data to the database, a backend method with relevant parameters is used. This action should not be executed each time the event has occurred, as this would generate excessive load on the server. So you should accumulate data in an object to send it to the database at a certain periodicity. Based on the data, you can adapt content selection and presentation on the page.<\/p>\n<p>In contrast to the database, the data should be sent to Google Analytics immediately on event.  For this purpose, the push() method is used:<\/p>\n<pre>_gaq.push(['_trackEvent', eventCategory, eventAction, eventLabel, eventNumber]);<\/pre>\n<p>where eventCategory is the event category (the first level of event differentiation), eventName is the event name, eventLabel is the event label, and eventNumber is a numerical parameter of the event (count or something else). For more on Google Analytics, please visit <a href=\"https:\/\/developers.google.com\/analytics\/devguides\/collection\/gajs\/\" target=\"_blank\"><span style=\"text-decoration: underline;\">this page<\/span><\/a>.<\/p>\n<h2>Statistical Analysis<\/h2>\n<p>To analyze the data collected, make yourself familiar with Google Analytics GUI. To display the data, click in the right frame to create a new dashboard. To this dashboard, add a new widget with the following options:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/GA-screen.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2640\" title=\"GA-screen\" src=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/GA-screen.png\" alt=\"\" width=\"510\" height=\"287\" srcset=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/GA-screen.png 810w, http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/GA-screen-300x168.png 300w\" sizes=\"(max-width: 510px) 100vw, 510px\" \/><\/a><\/p>\n<p>Alternatively, you can use the Google Analytics API. Shortly, we&#8217;ll update Analysis Ninja with predefined reports.<\/p>\n<h2>Ready-Made Solution<\/h2>\n<p><a href=\"http:\/\/labs.denivip.ru\/projects\/jsvideoanalytics\/\"><span style=\"text-decoration: underline;\">Here <\/span><\/a>you can download our solution to pass  the player events to Google Analytics. This analytical plugin is added to the <a href=\"http:\/\/blog.denivip.ru\/html5player\/\">HTML5 player demo<\/a>.<\/p>\n<p>To add the plugin, add the following code to the video output method:<\/p>\n<pre>if (trackVideo) { \/\/ Detect whether the analytical plugin has been added\r\n  \/\/ Create the plugin settings object\r\n  var analytics_options = {\r\n    UserID: 0,\r\n    ContentID: 0,\r\n    ContentName: video.name,\r\n    ContentCategory: &quot;Some Category&quot;,\r\n    \/\/ Live or VOD tracking\r\n    ContentType: &quot;VOD&quot;,\r\n    CookieKey: &quot;VideoAnalytics&quot;,\r\n    \/\/ Current position rewrite period\r\n    CookieInterval: 30000,\r\n    ContentType: &quot;VOD&quot;,\r\n    \/\/ Video Start Time levels in seconds\r\n    vslevels: [4,8],\r\n    vsalert: 8\r\n  }\r\n\r\n  this.analytics = new trackVideo(player,analytics_options);\r\n}<\/pre>\n<p>If the analytics has started, then the &quot;Network&quot; tab of your browser debugger window will show the following requests:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/GA-video-request.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2641 aligncenter\" title=\"GA video request\" src=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/GA-video-request.png\" alt=\"\" width=\"513\" height=\"52\" srcset=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/GA-video-request.png 720w, http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/06\/GA-video-request-300x30.png 300w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><\/a><\/p>\n<p>Also, the console will show the following messages:<\/p>\n<pre>[Video Analytics] HTML5 loadstart event<\/pre>\n<h2>Summary<\/h2>\n<p>Now you know that video analytics is in no way complex. Most important, you have to define the measures to be analyzed and then build your analytics around such measures.<strong> <\/strong><\/p>\n<h2>Useful Links<\/h2>\n<ul>\n<li><a href=\"http:\/\/labs.denivip.ru\/projects\/jsvideoanalytics\/\"><span style=\"text-decoration: underline;\">A ready video analytics plugin<\/span><\/a><\/li>\n<li><span style=\"text-decoration: underline;\"><a href=\"http:\/\/blog.denivip.ru\/html5player\/\">A sample player enabled with analytics<\/a>.<\/span><\/li>\n<li><a href=\"http:\/\/labs.denivip.ru\/projects\/osmfvideoanalytics\"><span style=\"text-decoration: underline;\">OSMF Video Analytics<\/span><\/a><\/li>\n<li><a href=\"http:\/\/dev.w3.org\/html5\/spec\/media-elements.html#media-elements\"><span style=\"text-decoration: underline;\">HTML5 Media API<\/span><\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en\/Using_HTML5_audio_and_video\"><span style=\"text-decoration: underline;\">Developer Guide on Using <\/span><span style=\"text-decoration: underline;\">HTML5 <\/span><span style=\"text-decoration: underline;\">Audio <\/span><span style=\"text-decoration: underline;\">and Video<\/span><\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/analytics\/devguides\/collection\/gajs\/\"><span style=\"text-decoration: underline;\">Google Analytics Tracking Events Basics<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>If you offer online video services, no doubt you have not once thought of video views analytics. In a Flash-based OSMF framework, there is GTrackPlugin to collect statistics on content viewing. Also, you can also use our OSMF Video Analytics. However, if your service HTML5 based, you need a purpose designed viewing analytics. To build [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,12],"tags":[69,23,24,182,515,232,13,413,8,9,102],"_links":{"self":[{"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/posts\/2671"}],"collection":[{"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/comments?post=2671"}],"version-history":[{"count":6,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/posts\/2671\/revisions"}],"predecessor-version":[{"id":2677,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/posts\/2671\/revisions\/2677"}],"wp:attachment":[{"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/media?parent=2671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/categories?post=2671"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/tags?post=2671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}