feat: adding viewmedia and viewblock scroll depth

tools/oversight/elements/list-facet.js

@@ -300,6 +300,16 @@ export default class ListFacet extends HTMLElement {
           engagementLI.classList.add('conversion');
           ul.append(engagementLI);
 
+          const viewblockDepthLI = this.createBusinessMetricChiclet(entry, 'blockdepth', null, 25, 60, 80);
+          viewblockDepthLI.title = 'Block Depth';
+          viewblockDepthLI.classList.add('conversion');
+          ul.append(viewblockDepthLI);
+
+          const viewMediaDepthLI = this.createBusinessMetricChiclet(entry, 'mediadepth', null, 25, 60, 80);
+          viewMediaDepthLI.title = 'Media Depth';
+          viewMediaDepthLI.classList.add('conversion');
+          ul.append(viewMediaDepthLI);
+
           const conversionRateLI = this.createBusinessMetricChiclet(entry, 'conversions', 'visits', 5, 10, 20);
           conversionRateLI.title = 'Conversion Rate';
           conversionRateLI.classList.add('conversion');
@@ -468,6 +478,10 @@ export default class ListFacet extends HTMLElement {
           total: this.dataChunks.totals[baseline].count,
           conversions: this.dataChunks.totals[rate].count,
         });
+      } else if (rate === 'blockdepth' || rate === 'mediadepth') {
+        const value = (entry.metrics[rate].percentile(50) / entry.metrics[rate].max) * 100;
+        nf.textContent = value;
+        meter.value = Number.isFinite(value) ? value : 0;
       } else {
         // we show the median and use a t-test between all values
         const value = entry.metrics[rate].percentile(50);

tools/oversight/rum-slicer.css

@@ -540,7 +540,6 @@ facet-sidebar:has(input[name="focus"][value="conversion"]) aside ul.cwv li.conve
 
 facet-sidebar:has(input[name="focus"][value="conversion"]:checked) aside ul.cwv li.conversion {
   display: flex;
-  grid-column: span 3;
 }
 
 ul.cwv meter {
@@ -657,6 +656,14 @@ fieldset div:first-of-type li:nth-of-type(7)::before {
 }
 
 fieldset div:first-of-type li:nth-of-type(8)::before {
+  content: 'Blockdepth';
+}
+
+fieldset div:first-of-type li:nth-of-type(9)::before {
+  content: 'Mediadepth';
+}
+
+fieldset div:first-of-type li:nth-of-type(10)::before {
   content: 'Conversion';
 }
 

tools/oversight/slicer.js

@@ -42,6 +42,13 @@ loader.apiEndpoint = API_ENDPOINT;
 
 const herochart = new window.slicer.Chart(dataChunks, elems);
 
+const eventCountFn = (type) => (bundle) => {
+  const eventCount = bundle.events.filter(
+    (e) => e.checkpoint === type,
+  ).length;
+  return eventCount;
+};
+
 window.addEventListener('pageshow', () => !elems.canvas && herochart.render());
 
 // set up metrics for dataChunks
@@ -59,6 +66,10 @@ dataChunks.addSeries('conversions', (bundle) => (dataChunks.hasConversion(bundle
   : 0));
 
 dataChunks.addSeries('organic', organic);
+
+dataChunks.addSeries('blockdepth', eventCountFn('viewblock'));
+dataChunks.addSeries('mediadepth', eventCountFn('viewmedia'));
+
 /*
  * timeOnPage is the time it took to load the page,
  * i.e. the difference between the first and last event