ui/analytics.js

@@ -12,9 +12,9 @@ import { generateInitialUrl } from 'util/url';
 import { MATOMO_ID, MATOMO_URL } from 'config';
 import getConnectionSpeed from 'util/detect-user-bandwidth';
 
-let userDownloadBandwidth;
+let userDownloadBandwidthInBitsPerSecond;
 async function getUserBandwidth() {
-  userDownloadBandwidth = await getConnectionSpeed();
+  userDownloadBandwidthInBitsPerSecond = await getConnectionSpeed();
 }
 
 getUserBandwidth();
@@ -120,7 +120,7 @@ function getDeviceType() {
 // variables initialized for watchman
 let amountOfBufferEvents = 0;
 let amountOfBufferTimeInMS = 0;
-let videoType, userId, claimUrl, playerPoweredBy, videoPlayer;
+let videoType, userId, claimUrl, playerPoweredBy, videoPlayer, bitrateAsBitsPerSecond;
 let lastSentTime;
 
 // calculate data for backend, send them, and reset buffer data for next interval
@@ -161,6 +161,8 @@ async function sendAndResetWatchmanData() {
     user_id: userId.toString(),
     position: Math.round(positionInVideo),
     rel_position: Math.round((positionInVideo / (totalDurationInSeconds * 1000)) * 100),
+    ...(userDownloadBandwidthInBitsPerSecond && {bandwidth: userDownloadBandwidthInBitsPerSecond}), // add bandwidth if populated
+    ...(bitrateAsBitsPerSecond && {bitrate: bitrateAsBitsPerSecond}), // add bitrate if video (audio doesn't work)
   };
 
   // post to watchman
@@ -213,8 +215,6 @@ async function sendWatchmanData(body) {
 const analytics: Analytics = {
   // receive buffer events from tracking plugin and save buffer amounts and times for backend call
   videoBufferEvent: async (claim, data) => {
-    console.log('running here!');
-    console.log(data);
     amountOfBufferEvents = amountOfBufferEvents + 1;
     amountOfBufferTimeInMS = amountOfBufferTimeInMS + data.bufferDuration;
   },
@@ -251,7 +251,7 @@ const analytics: Analytics = {
       startWatchmanIntervalIfNotRunning();
     }
   },
-  videoStartEvent: (claimId, duration, poweredBy, passedUserId, canonicalUrl, passedPlayer) => {
+  videoStartEvent: (claimId, duration, poweredBy, passedUserId, canonicalUrl, passedPlayer, videoBitrate) => {
     // populate values for watchman when video starts
     userId = passedUserId;
     claimUrl = canonicalUrl;
@@ -259,6 +259,7 @@ const analytics: Analytics = {
 
     videoType = passedPlayer.currentSource().type;
     videoPlayer = passedPlayer;
+    bitrateAsBitsPerSecond = videoBitrate;
 
     sendPromMetric('time_to_start', duration);
     sendMatomoEvent('Media', 'TimeToStart', claimId, duration);

ui/component/viewers/videoViewer/view.jsx

@@ -168,9 +168,17 @@ function VideoViewer(props: Props) {
     }
     analytics.playerStartedEvent(embedded);
 
+    // convert bytes to bits, and then divide by seconds
+    const contentInBits = Number(claim.value.source.size) * 8;
+    const durationInSeconds = claim.value.video && claim.value.video.duration;
+    let bitrateAsBitsPerSecond;
+    if (durationInSeconds) {
+      bitrateAsBitsPerSecond = Math.round(contentInBits / durationInSeconds);
+    }
+
     fetch(source, { method: 'HEAD', cache: 'no-store' }).then((response) => {
       let playerPoweredBy = response.headers.get('x-powered-by') || '';
-      analytics.videoStartEvent(claimId, timeToStart, playerPoweredBy, userId, claim.canonical_url, this);
+      analytics.videoStartEvent(claimId, timeToStart, playerPoweredBy, userId, claim.canonical_url, this, bitrateAsBitsPerSecond);
     });
 
     doAnalyticsView(uri, timeToStart).then(() => {

ui/util/detect-user-bandwidth.js

@@ -14,9 +14,7 @@ async function measureConnectionSpeed() {
   const duration = (endTime - startTime) / 1000;
   const bitsLoaded = downloadSize * 8;
   const speedBps = (bitsLoaded / duration).toFixed(2);
-  const speedKbps = (speedBps / 1024).toFixed(2);
-  const speedMbps = (speedKbps / 1024).toFixed(2);
-  return speedMbps;
+  return Math.round(Number(speedBps));
 }
 
 module.exports = measureConnectionSpeed;