{"id":20373,"date":"2025-10-29T10:36:16","date_gmt":"2025-10-29T10:36:16","guid":{"rendered":"https:\/\/www.vdocipher.com\/blog\/?p=20373"},"modified":"2025-10-29T10:36:16","modified_gmt":"2025-10-29T10:36:16","slug":"build-your-self-video-analytics-dashboard-web-html5-embedded-video-analytics-metrics","status":"publish","type":"post","link":"https:\/\/www-uat.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/","title":{"rendered":"Build your Self Video Analytics Dashboard: Web, HTML5 &#038; Embedded Video Analytics Metrics"},"content":{"rendered":"<p>Many businesses want to track how viewers engage with their videos \u2013 from how many times a video is played to where viewers are watching from. While professional platforms <strong>like VdoCipher\u00a0offer advanced analytics<\/strong> out-of-the-box, it\u2019s also possible to build a basic video analytics dashboard on your own.<\/p>\n<p><strong>In this guide you\u2019ll:<\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Collect the core metrics most teams care about (view event, device\/browser\/OS, geography, watch completion, basic QoE signals).<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Render the collected rows as JSON on the page (simple and copy-paste friendly).<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">(Optional) Export that JSON or pipe it into Google Sheets later for charts\/pivots &amp; make your own Video Analytics Dashboard.<\/li>\n<\/ul>\n<h2>Key Video Metrics to Track (and why they matter)<\/h2>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Device \/ OS \/ Browser<\/b><b><br \/>\n<\/b>Shows where your audience really lives (mobile vs desktop, OS\/browser splits). Use this to prioritize testing and UI decisions.<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Geographic Distribution (country)<\/b><b><br \/>\n<\/b>Helps with localization (subtitles\/languages), and can surface unexpected markets.<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Watch Completion \/ Average Watch %<\/b><b><br \/>\n<\/b>Measures how much of a video is typically consumed. Low percentages often point to content or onboarding issues; high percentages suggest strong engagement.<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Page URL<\/b> &#8211; The page on which video is being watched.<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Video Duration<\/b> &#8211; Total length of video.<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Time to Start (ms) (QoE)<\/b>: time between the first play() and the first playing frame\u2014good \u201cstartup delay\u201d proxy.<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Errors (QoE)<\/b>: surface MediaError codes to quickly debug real viewer failures.<\/li>\n<\/ul>\n<h2>Step 1 &#8211; Add a native HTML5 video<\/h2>\n<p>Use the stock &lt;video&gt; element with a self-hosted MP4 (or HLS\/DASH with a JS loader if needed). Controls are on to keep things simple. This section defines the HTML structure &#8211; the &lt;video&gt; tag for playback, a button to trigger analytics export, and a &lt;pre&gt; block to show the resulting JSON.<\/p>\n<p>Think of this as the \u201ccanvas\u201d for all analytics code to act upon.<\/p>\n<pre>&lt;video id=\"myVideo\" width=\"640\" height=\"360\" controls&gt;\r\n\r\n&lt;source src=\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2024\/02\/livestream-start.mp4\" type=\"video\/mp4\"&gt;\r\n\r\nYour browser does not support HTML5 video.\r\n\r\n&lt;\/video&gt;\r\n\r\n&lt;button id=\"publishJson\" style=\"margin-top:12px;\"&gt;Publish Analytics JSON&lt;\/button&gt;\r\n\r\n&lt;pre id=\"analyticsJson\" style=\"display:none;padding:10px;background:#f6f8fa;border-radius:8px;max-width:900px;overflow:auto;\"&gt;&lt;\/pre&gt;<\/pre>\n<h2>Step 2 &#8211; Start JS &amp; Wrap everything in DOMContentLoaded including Config + tiny utils<\/h2>\n<p>This ensures that your script only runs after the DOM is fully loaded. By wrapping everything in a DOMContentLoaded listener, you guarantee that your script won\u2019t fail because the &lt;video&gt; element hasn\u2019t yet been rendered. Ensure, the script to be loaded<\/p>\n<p>The basic utility functions are set up:<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">VIDEO_ID uniquely identifies the video (useful for tracking multiple videos).<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">analyticsRows is an array to store one JSON entry per session.<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">uid() generates a unique session identifier using browser cryptography \u2014 ensuring every view is unique.<\/li>\n<\/ul>\n<pre>&lt;script&gt;\r\n\r\ndocument.addEventListener('DOMContentLoaded', () =&gt; {\r\n\r\nconst video = document.getElementById('myVideo');\r\nconst publishBtn = document.getElementById('publishJson');\r\nconst out = document.getElementById('analyticsJson');\r\nconst VIDEO_ID = 'livestream-start';\r\nconst analyticsRows = [];\r\nconst now = () =&gt; performance.now();\r\n\r\nfunction uid() {\r\nreturn ([1e7]+-1e3+-4e3+-8e3+-1e11)\r\n.replace(\/[018]\/g, c =&gt;\r\n(c ^ crypto.getRandomValues(new Uint8Array(1))[0] &amp; 15 &gt;&gt; c \/ 4).toString(16)\r\n);\r\n}\r\n\r\n<i>\/\/ Place the remaining sections **inside** this callback, in the same order.<\/i>\r\n\r\n});\r\n\r\n&lt;\/script&gt;<\/pre>\n<h2>Step 3 &#8211; Device, OS, and Browser detection<\/h2>\n<p>This section parses navigator.userAgent to detect:<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Device type \u2014 mobile or desktop<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Operating system \u2014 Windows, macOS, Android, etc.<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Browser \u2014 Chrome, Firefox, Safari, Edge, etc.<br \/>\nThis information helps in understanding playback performance across user environments.<\/li>\n<\/ul>\n<pre>function getDeviceInfo() {\r\n\r\nconst ua = navigator.userAgent;\r\nconst device = \/Mobi|Android|iPhone|iPad|Tablet\/i.test(ua) ? 'Mobile' : 'Desktop';\r\n\r\nlet os = 'Unknown OS';\r\n\r\nif (ua.includes('Windows')) os = 'Windows';\r\nelse if (ua.includes('Mac')) os = 'macOS';\r\nelse if (ua.includes('Android')) os = 'Android';\r\nelse if (\/iPhone|iPad|iPod\/.test(ua)) os = 'iOS';\r\nelse if (ua.includes('Linux') || ua.includes('X11')) os = 'Linux\/Unix';\r\n\r\nlet browser = 'Unknown Browser';\r\n\r\nif (ua.includes('Chrome') &amp;&amp; !ua.includes('Edg\/')) browser = 'Chrome';\r\nelse if (ua.includes('Edg\/')) browser = 'Edge';\r\nelse if (ua.includes('Firefox')) browser = 'Firefox';\r\nelse if (ua.includes('Safari') &amp;&amp; !ua.includes('Chrome')) browser = 'Safari';\r\nelse if (ua.includes('OPR') || ua.includes('Opera')) browser = 'Opera';\r\nelse if (ua.includes('Trident') || ua.includes('MSIE')) browser = 'Internet Explorer';\r\n\r\nreturn { device, os, browser };\r\n\r\n}<\/pre>\n<h2>Step 4 &#8211; Country lookup via IP (minimal geo)<\/h2>\n<p>The code uses the free <b>ipapi.co<\/b> service to fetch the viewer\u2019s <b>country and country code<\/b> from their IP address.<\/p>\n<p>It runs asynchronously, filling in the geo fields for each analytics entry. This helps you map your audience distribution geographically.<\/p>\n<pre>function getGeoLocation() {\r\n\r\nreturn fetch('https:\/\/ipapi.co\/json\/')\r\n\r\n.then(r =&gt; r.json())\r\n\r\n.then(d =&gt; ({\r\n\r\ncountry: d &amp;&amp; d.country_name ? d.country_name : 'Unknown',\r\n\r\ncountryCode: d &amp;&amp; d.country_code ? d.country_code : ''\r\n\r\n}))\r\n\r\n.catch(() =&gt; ({ country: 'Unknown', countryCode: '' }));\r\n\r\n}<\/pre>\n<h2>Step 5 &#8211; Session initialization<\/h2>\n<p>Here, all analytics fields are initialized \u2014 creating a \u201csession object\u201d that represents one playback event.<br \/>\nIt includes general metadata (timestamp, video ID, URL) and playback variables like:<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">watchPercent<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">errors<br \/>\nInitially, many of these are blank and get populated as playback continues.<\/li>\n<\/ul>\n<pre>const session = {\r\n\r\ntimestamp: new Date().toISOString(),\r\nsessionId: uid(),\r\nvideoId: VIDEO_ID,\r\npageUrl: location.href,\r\n\r\n\/\/ engagement core\r\n\r\nevent: 'init',\r\ncompleted: false,\r\nmaxTimeWatched: 0,\r\nwatchPercent: 0,\r\nduration: null,\r\n\r\n\/\/ device\r\n\r\n...getDeviceInfo(),\r\n\r\n\/\/ geo (filled async below)\r\n\r\ncountry: 'Unknown',\r\ncountryCode: '',\r\n\r\n\/\/ QoE basics kept\r\n\r\ntimeToStartMs: null,\r\n\r\n\/\/ errors encountered\r\n\r\nerrors: []\r\n\r\n};\r\n\r\n\/\/ fill geo asynchronously\r\n\r\ngetGeoLocation().then(loc =&gt; {\r\nsession.country = loc.country;\r\nsession.countryCode = loc.countryCode;\r\n\r\n});<\/pre>\n<h2>Step 6 &#8211; Duration<\/h2>\n<p>Triggered by the loadedmetadata event, this section captures:<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Total <b>video duration<\/b><\/li>\n<\/ul>\n<p>This marks the baseline video state before the user starts interacting with it.<\/p>\n<pre>video.addEventListener('loadedmetadata', () =&gt; {\r\n\r\nsession.duration = Math.round(video.duration || 0);\r\n\r\n});<\/pre>\n<h2>Step 7 &#8211; Counting a View + Measuring Startup Time<\/h2>\n<p>The play and playing events together record:<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">When the first \u201cplay\u201d action occurred<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">How long it took for the first frame to appear (timeToStartMs)<br \/>\nThis startup delay metric reflects how quickly the video begins after user intent \u2014 critical for measuring <b>QoE (Quality of Experience)<\/b>.<\/li>\n<\/ul>\n<pre>let firstPlayT0 = null;\r\n\r\nvideo.addEventListener('play', () =&gt; {\r\n\r\nif (session.event !== 'view') session.event = 'view';\r\n\r\nif (firstPlayT0 === null) firstPlayT0 = now();\r\n\r\n});\r\n\r\nvideo.addEventListener('playing', () =&gt; {\r\n\r\nif (session.timeToStartMs === null &amp;&amp; firstPlayT0 !== null) {\r\n\r\nsession.timeToStartMs = Math.max(0, Math.round(now() - firstPlayT0));\r\n\r\n}\r\n\r\n});<\/pre>\n<h2>Step 8 &#8211; Watch Progress (Max Time Watched)<\/h2>\n<p>The timeupdate listener continually records the <b>furthest timestamp watched<\/b>.<br \/>\nThis enables the calculation of <b>watch percentage<\/b>, showing how much of the video the viewer actually watched before leaving.<\/p>\n<pre>video.addEventListener('timeupdate', () =&gt; {\r\n\r\nif (video.currentTime &gt; session.maxTimeWatched) {\r\n\r\nsession.maxTimeWatched = video.currentTime;\r\n\r\n}\r\n\r\n});<\/pre>\n<h2>Step 9 &#8211; Completion Tracking<\/h2>\n<p>When the ended event fires, the session marks completed = true.<br \/>\nThis lets you differentiate <b>partial plays<\/b> from <b>full completions<\/b> in your dataset.<\/p>\n<pre>video.addEventListener('ended', () =&gt; {\r\n\r\nsession.completed = true;\r\n\r\n});<\/pre>\n<h2>Step 10 &#8211; Error Logging<\/h2>\n<p>Captures playback errors using the HTML5 video.error object.<br \/>\nEach error is tagged with a <b>code<\/b> and a friendly name (e.g., MEDIA_ERR_DECODE).<br \/>\nThis helps debug whether failures are due to network issues, unsupported formats, or decoding problems.<\/p>\n<pre>const MEDIA_ERROR_NAMES = {\r\n\r\n1: 'MEDIA_ERR_ABORTED',\r\n\r\n2: 'MEDIA_ERR_NETWORK',\r\n\r\n3: 'MEDIA_ERR_DECODE',\r\n\r\n4: 'MEDIA_ERR_SRC_NOT_SUPPORTED'\r\n\r\n};\r\n\r\nvideo.addEventListener('error', () =&gt; {\r\n\r\nconst err = video.error;\r\n\r\nif (err &amp;&amp; err.code) {\r\n\r\nsession.errors.push({ code: err.code, name: MEDIA_ERROR_NAMES[err.code] || 'UNKNOWN' });\r\n\r\n} else {\r\n\r\nsession.errors.push({ code: 0, name: 'UNKNOWN' });\r\n\r\n}\r\n\r\n});<\/pre>\n<h2>Step 11 &#8211; Finalizing the Session<\/h2>\n<p>When the viewer leaves or reloads the page, this block:<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Calculates the <b>watchPercent<\/b> (based on duration and max time watched)<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Pushes the finalized session data into the analyticsRows array<br \/>\nEssentially, it freezes the current session snapshot into a structured record.<\/li>\n<\/ul>\n<pre>let stored = false;\r\n\r\nfunction finalizeSessionAndStore() {\r\n\r\nif (stored) return;\r\n\r\nstored = true;\r\n\r\n\/\/ compute watch %\r\n\r\nconst dur = video.duration || session.duration || 0;\r\n\r\nconst pct = dur ? Math.min(100, Math.floor((session.maxTimeWatched \/ dur) * 100)) : 0;\r\n\r\nsession.watchPercent = pct;\r\n\r\n\/\/ push the row\r\n\r\nanalyticsRows.push({\r\n\r\ntimestamp: session.timestamp,\r\nsessionId: session.sessionId,\r\nvideoId: session.videoId,\r\npageUrl: session.pageUrl,\r\nevent: session.event,\r\ncompleted: session.completed,\r\nwatchPercent: session.watchPercent,\r\ndurationSec: video.duration,\r\ntimeToStartMs: session.timeToStartMs,\r\ndevice: session.device,\r\nos: session.os,\r\nbrowser: session.browser,\r\ncountry: session.country,\r\ncountryCode: session.countryCode,\r\nerrors: session.errors.map(e =&gt; `${e.name}(${e.code})`).join('|')\r\n\r\n});\r\n\r\n}<\/pre>\n<h2>Step 12 &#8211; Exit Detection and Publishing JSON<\/h2>\n<p>The script ensures data isn\u2019t lost:<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">It listens for pagehide, beforeunload, and visibilitychange events to call finalizeSessionAndStore() before leaving.<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">When the user clicks <b>\u201cPublish Analytics JSON\u201d<\/b>, it displays the analytics array as formatted JSON in the &lt;pre&gt;block.<br \/>\nThis allows anyone to instantly view the full analytics dataset on the page \u2014 no servers or APIs needed.<\/li>\n<\/ul>\n<pre>window.addEventListener('pagehide', finalizeSessionAndStore);\r\n\r\nwindow.addEventListener('beforeunload', finalizeSessionAndStore);\r\n\r\ndocument.addEventListener('visibilitychange', () =&gt; {\r\n\r\nif (document.visibilityState === 'hidden') finalizeSessionAndStore();\r\n\r\n});<\/pre>\n<h2>Step 13 &#8211; Publish JSON on the page (button \u2192 pretty JSON)<\/h2>\n<pre>if (publishBtn &amp;&amp; out) {\r\npublishBtn.addEventListener('click', () =&gt; {\r\nfinalizeSessionAndStore();\r\nout.style.display = \"block\";\r\nout.textContent = JSON.stringify(analyticsRows, null, 2);\r\n});\r\n} else {\r\nconsole.warn('Missing #publishJson button or #analyticsJson output node.');\r\n}<\/pre>\n<h2>Example JSON row (what readers should expect)<\/h2>\n<pre>[{\r\n\r\n\"timestamp\": \"2025-10-27T10:50:42.747Z\",\r\n\"sessionId\": \"3d99ad46-a0d3-4dab-825b-a7b339b92c13\",\r\n\"videoId\": \"livestream-start\",\r\n\"pageUrl\": \"https:\/\/www.vdocipher.com\/blog\/?page_id=20104&amp;preview=true\",\r\n\"event\": \"view\",\r\n\"completed\": false,\r\n\"watchPercent\": 85,\r\n\"durationSec\": 7.36,\r\n\"timeToStartMs\": 0,\r\n\"device\": \"Desktop\",\r\n\"os\": \"macOS\",\r\n\"browser\": \"Chrome\",\r\n\"country\": \"India\",\r\n\"countryCode\": \"IN\",\r\n\"errors\": \"\"\r\n\r\n}]<\/pre>\n<h2>Optional &#8211; JSON to Google Sheet Dashboard<\/h2>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Upload to Sheets using Extensions \u2192 Apps Script with a small script that parses JSON and inserts rows, or simply convert JSON \u2192 CSV online and import.<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">After sending our data to a Google Sheet, we can later open the sheet to view and pivot the data (or even use Google\u2019s chart features to visualize it). You can make a separate \u201cDashboard\u201d sheet within the Google Sheet that references these metrics. For example, use formulas to pull average watch % and so on for each video, and present them in a summary table. Use charts (pie charts for device or browser share, bar chart for top countries, line chart over time if you add dates, etc.) to visualize the data. Google Sheets makes it fairly easy to create these once the data is there.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Many businesses want to track how viewers engage with their videos \u2013 from how many times a video is played to where viewers are watching from. While professional platforms like VdoCipher\u00a0offer advanced analytics out-of-the-box, it\u2019s also possible to build a basic video analytics dashboard on your own. In this guide you\u2019ll: Collect the core metrics [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":20379,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[411,226],"tags":[354],"class_list":{"0":"post-20373","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-video-analytics","8":"category-video-tech","9":"tag-video-analytics","10":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.0 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Build your Self Video Analytics Dashboard: Web, HTML5 &amp; Embedded Video Analytics Metrics<\/title>\n<meta name=\"description\" content=\"While platforms like VdoCipher\u00a0offer advanced Video Analytics, it\u2019s also possible to build a basic video analytics dashboard on your own.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build your Self Video Analytics Dashboard: Web, HTML5 &amp; Embedded Video Analytics Metrics\" \/>\n<meta property=\"og:description\" content=\"While platforms like VdoCipher\u00a0offer advanced Video Analytics, it\u2019s also possible to build a basic video analytics dashboard on your own.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/\" \/>\n<meta property=\"og:site_name\" content=\"VdoCipher Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vdociphertech\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-29T10:36:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2025\/10\/video-analytics-dashboard-diy.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vishal Sharma\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vdocipher\" \/>\n<meta name=\"twitter:site\" content=\"@vdocipher\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vishal Sharma\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/\"},\"author\":{\"name\":\"Vishal Sharma\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#\/schema\/person\/329776cb6c9589f6b377be584ca4d4f9\"},\"headline\":\"Build your Self Video Analytics Dashboard: Web, HTML5 &#038; Embedded Video Analytics Metrics\",\"datePublished\":\"2025-10-29T10:36:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/\"},\"wordCount\":1003,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2025\/10\/video-analytics-dashboard-diy.png\",\"keywords\":[\"video analytics\"],\"articleSection\":[\"Video Analytics\",\"Video Tech\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/\",\"url\":\"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/\",\"name\":\"Build your Self Video Analytics Dashboard: Web, HTML5 & Embedded Video Analytics Metrics\",\"isPartOf\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2025\/10\/video-analytics-dashboard-diy.png\",\"datePublished\":\"2025-10-29T10:36:16+00:00\",\"description\":\"While platforms like VdoCipher\u00a0offer advanced Video Analytics, it\u2019s also possible to build a basic video analytics dashboard on your own.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/#primaryimage\",\"url\":\"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2025\/10\/video-analytics-dashboard-diy.png\",\"contentUrl\":\"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2025\/10\/video-analytics-dashboard-diy.png\",\"width\":1000,\"height\":450},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vdocipher.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build your Self Video Analytics Dashboard: Web, HTML5 &#038; Embedded Video Analytics Metrics\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#website\",\"url\":\"https:\/\/www.vdocipher.com\/blog\/\",\"name\":\"VdoCipher Blog\",\"description\":\"Secure Video Streaming\",\"publisher\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vdocipher.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#organization\",\"name\":\"VdoCipher\",\"url\":\"https:\/\/www.vdocipher.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2016\/11\/VdoCipher-logo2.png\",\"contentUrl\":\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2016\/11\/VdoCipher-logo2.png\",\"width\":1625,\"height\":1925,\"caption\":\"VdoCipher\"},\"image\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vdociphertech\/\",\"https:\/\/x.com\/vdocipher\",\"https:\/\/www.linkedin.com\/company\/vdocipher\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#\/schema\/person\/329776cb6c9589f6b377be584ca4d4f9\",\"name\":\"Vishal Sharma\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/392a4e1ad0a2c7e4c82bde7a7ea60bbb51ea7e77e8185b8c0e2aceb39aa58ccc?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/392a4e1ad0a2c7e4c82bde7a7ea60bbb51ea7e77e8185b8c0e2aceb39aa58ccc?s=96&r=g\",\"caption\":\"Vishal Sharma\"},\"description\":\"My expertise focuses on DRM encryption, CDN technologies, and streamlining marketing campaigns to drive engagement and growth. At VdoCipher, I've significantly enhanced digital experiences and contributed to in-depth technical discussions in the eLearning, Media, and Security sectors, showcasing a commitment to innovation and excellence in the digital landscape.\",\"url\":\"https:\/\/www-uat.vdocipher.com\/blog\/author\/vishal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build your Self Video Analytics Dashboard: Web, HTML5 & Embedded Video Analytics Metrics","description":"While platforms like VdoCipher\u00a0offer advanced Video Analytics, it\u2019s also possible to build a basic video analytics dashboard on your own.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/","og_locale":"en_US","og_type":"article","og_title":"Build your Self Video Analytics Dashboard: Web, HTML5 & Embedded Video Analytics Metrics","og_description":"While platforms like VdoCipher\u00a0offer advanced Video Analytics, it\u2019s also possible to build a basic video analytics dashboard on your own.","og_url":"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/","og_site_name":"VdoCipher Blog","article_publisher":"https:\/\/www.facebook.com\/vdociphertech\/","article_published_time":"2025-10-29T10:36:16+00:00","og_image":[{"width":1000,"height":450,"url":"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2025\/10\/video-analytics-dashboard-diy.png","type":"image\/png"}],"author":"Vishal Sharma","twitter_card":"summary_large_image","twitter_creator":"@vdocipher","twitter_site":"@vdocipher","twitter_misc":{"Written by":"Vishal Sharma","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/#article","isPartOf":{"@id":"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/"},"author":{"name":"Vishal Sharma","@id":"https:\/\/www.vdocipher.com\/blog\/#\/schema\/person\/329776cb6c9589f6b377be584ca4d4f9"},"headline":"Build your Self Video Analytics Dashboard: Web, HTML5 &#038; Embedded Video Analytics Metrics","datePublished":"2025-10-29T10:36:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/"},"wordCount":1003,"commentCount":0,"publisher":{"@id":"https:\/\/www.vdocipher.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/#primaryimage"},"thumbnailUrl":"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2025\/10\/video-analytics-dashboard-diy.png","keywords":["video analytics"],"articleSection":["Video Analytics","Video Tech"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/","url":"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/","name":"Build your Self Video Analytics Dashboard: Web, HTML5 & Embedded Video Analytics Metrics","isPartOf":{"@id":"https:\/\/www.vdocipher.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/#primaryimage"},"image":{"@id":"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/#primaryimage"},"thumbnailUrl":"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2025\/10\/video-analytics-dashboard-diy.png","datePublished":"2025-10-29T10:36:16+00:00","description":"While platforms like VdoCipher\u00a0offer advanced Video Analytics, it\u2019s also possible to build a basic video analytics dashboard on your own.","breadcrumb":{"@id":"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/#primaryimage","url":"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2025\/10\/video-analytics-dashboard-diy.png","contentUrl":"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2025\/10\/video-analytics-dashboard-diy.png","width":1000,"height":450},{"@type":"BreadcrumbList","@id":"https:\/\/www.vdocipher.com\/blog\/build-your-self-video-analytics-dashboard\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vdocipher.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build your Self Video Analytics Dashboard: Web, HTML5 &#038; Embedded Video Analytics Metrics"}]},{"@type":"WebSite","@id":"https:\/\/www.vdocipher.com\/blog\/#website","url":"https:\/\/www.vdocipher.com\/blog\/","name":"VdoCipher Blog","description":"Secure Video Streaming","publisher":{"@id":"https:\/\/www.vdocipher.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vdocipher.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vdocipher.com\/blog\/#organization","name":"VdoCipher","url":"https:\/\/www.vdocipher.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vdocipher.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2016\/11\/VdoCipher-logo2.png","contentUrl":"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2016\/11\/VdoCipher-logo2.png","width":1625,"height":1925,"caption":"VdoCipher"},"image":{"@id":"https:\/\/www.vdocipher.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vdociphertech\/","https:\/\/x.com\/vdocipher","https:\/\/www.linkedin.com\/company\/vdocipher"]},{"@type":"Person","@id":"https:\/\/www.vdocipher.com\/blog\/#\/schema\/person\/329776cb6c9589f6b377be584ca4d4f9","name":"Vishal Sharma","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vdocipher.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/392a4e1ad0a2c7e4c82bde7a7ea60bbb51ea7e77e8185b8c0e2aceb39aa58ccc?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/392a4e1ad0a2c7e4c82bde7a7ea60bbb51ea7e77e8185b8c0e2aceb39aa58ccc?s=96&r=g","caption":"Vishal Sharma"},"description":"My expertise focuses on DRM encryption, CDN technologies, and streamlining marketing campaigns to drive engagement and growth. At VdoCipher, I've significantly enhanced digital experiences and contributed to in-depth technical discussions in the eLearning, Media, and Security sectors, showcasing a commitment to innovation and excellence in the digital landscape.","url":"https:\/\/www-uat.vdocipher.com\/blog\/author\/vishal\/"}]}},"yoast":{"focuskw":"video analytics dashboard","title":"%%title%%","metadesc":"While platforms like VdoCipher\u00a0offer advanced Video Analytics, it\u2019s also possible to build a basic video analytics dashboard on your own.","linkdex":"59","metakeywords":"","meta-robots-noindex":"","meta-robots-nofollow":"","meta-robots-adv":"","canonical":"","redirect":"","opengraph-title":"","opengraph-description":"","opengraph-image":"","twitter-title":"","twitter-description":"","twitter-image":""},"_links":{"self":[{"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/posts\/20373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/comments?post=20373"}],"version-history":[{"count":5,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/posts\/20373\/revisions"}],"predecessor-version":[{"id":20378,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/posts\/20373\/revisions\/20378"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/media\/20379"}],"wp:attachment":[{"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/media?parent=20373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/categories?post=20373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/tags?post=20373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}