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
; }; 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,