From 09600601771d77c83ae2ae724b7c1b27ae6d1ad8 Mon Sep 17 00:00:00 2001
From: HarveyPeachey <harvey.peachey@bbc.co.uk>
Date: Mon, 15 Dec 2025 14:33:40 +0000
Subject: [PATCH] uses pageType to distinguish between generic optimizely
 metrics

---
 .../PageCompleteTracking/index.tsx                    |  6 ++++--
 .../OptimizelyPageMetrics/PageViewTracking/index.tsx  |  6 ++++--
 src/app/hooks/useOptimizelyScrollDepth/index.tsx      | 11 +++++++----
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/app/components/OptimizelyPageMetrics/PageCompleteTracking/index.tsx b/src/app/components/OptimizelyPageMetrics/PageCompleteTracking/index.tsx
index 09cd0ec5f99..8c4c8efe0f7 100644
--- a/src/app/components/OptimizelyPageMetrics/PageCompleteTracking/index.tsx
+++ b/src/app/components/OptimizelyPageMetrics/PageCompleteTracking/index.tsx
@@ -1,10 +1,12 @@
 import { useState, use, useEffect, useRef } from 'react';
 import { OptimizelyContext } from '@optimizely/react-sdk';
+import { RequestContext } from '#app/contexts/RequestContext';
 
 const PageCompleteTracking = () => {
   const ref = useRef(null);
   const observer = useRef(null);
   const { optimizely } = use(OptimizelyContext);
+  const { pageType } = use(RequestContext);
   const [pageCompleteSent, setPageCompleteSent] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
 
@@ -34,11 +36,11 @@ const PageCompleteTracking = () => {
   useEffect(() => {
     if (sendPageCompleteEvent) {
       optimizely?.onReady().then(() => {
-        optimizely.track('article_completes');
+        optimizely.track(`${pageType}_completes`);
         setPageCompleteSent(true);
       });
     }
-  }, [sendPageCompleteEvent, optimizely]);
+  }, [sendPageCompleteEvent, optimizely, pageType]);
 
   return <div ref={ref} aria-hidden="true" />;
 };
diff --git a/src/app/components/OptimizelyPageMetrics/PageViewTracking/index.tsx b/src/app/components/OptimizelyPageMetrics/PageViewTracking/index.tsx
index 8f2f11b4cd4..e0fdb7cb7cf 100644
--- a/src/app/components/OptimizelyPageMetrics/PageViewTracking/index.tsx
+++ b/src/app/components/OptimizelyPageMetrics/PageViewTracking/index.tsx
@@ -1,18 +1,20 @@
 import { useState, useContext, useEffect } from 'react';
 import { OptimizelyContext } from '@optimizely/react-sdk';
+import { RequestContext } from '#app/contexts/RequestContext';
 
 const PageViewTracking = () => {
   const { optimizely } = useContext(OptimizelyContext);
+  const { pageType } = useContext(RequestContext);
   const [pageViewSent, setPageViewSent] = useState(false);
 
   useEffect(() => {
     if (!pageViewSent) {
       optimizely?.onReady().then(() => {
-        optimizely.track('page-views');
+        optimizely.track(`${pageType}_page_views`);
         setPageViewSent(true);
       });
     }
-  }, [pageViewSent, optimizely]);
+  }, [pageViewSent, optimizely, pageType]);
 
   return null;
 };
diff --git a/src/app/hooks/useOptimizelyScrollDepth/index.tsx b/src/app/hooks/useOptimizelyScrollDepth/index.tsx
index a8cc4ab3566..0d9d8bc3b3a 100644
--- a/src/app/hooks/useOptimizelyScrollDepth/index.tsx
+++ b/src/app/hooks/useOptimizelyScrollDepth/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState, use } from 'react';
 import { OptimizelyContext } from '@optimizely/react-sdk';
+import { RequestContext } from '#app/contexts/RequestContext';
 
 const getScrollDepth = () =>
   Math.floor(
@@ -11,6 +12,7 @@ const getScrollDepth = () =>
 
 const useOptimizelyScrollDepth = () => {
   const { optimizely } = use(OptimizelyContext);
+  const { pageType } = use(RequestContext);
   const [scrollDepth, setScrollDepth] = useState(0);
   const [scrollTwentyFive, setScrollTwentyFive] = useState(false);
   const [scrollFifty, setScrollFifty] = useState(false);
@@ -19,22 +21,22 @@ const useOptimizelyScrollDepth = () => {
 
   useEffect(() => {
     if (scrollDepth >= 25 && !scrollTwentyFive) {
-      optimizely?.track('scroll25');
+      optimizely?.track(`${pageType}_scroll25`);
       setScrollTwentyFive(true);
     }
 
     if (scrollDepth >= 50 && !scrollFifty) {
-      optimizely?.track('scroll50');
+      optimizely?.track(`${pageType}_scroll50`);
       setScrollFifty(true);
     }
 
     if (scrollDepth >= 75 && !scrollSeventyFive) {
-      optimizely?.track('scroll75');
+      optimizely?.track(`${pageType}_scroll75`);
       setScrollSeventyFive(true);
     }
 
     if (scrollDepth >= 100 && !scrollHundred) {
-      optimizely?.track('scroll100');
+      optimizely?.track(`${pageType}_scroll100`);
       setScrollHundred(true);
     }
 
@@ -47,6 +49,7 @@ const useOptimizelyScrollDepth = () => {
       );
   }, [
     optimizely,
+    pageType,
     scrollDepth,
     scrollFifty,
     scrollHundred,