diff --git a/src/browser/modules/App/App.tsx b/src/browser/modules/App/App.tsx
index 1d07c5e67a2..8e81fac46c6 100644
--- a/src/browser/modules/App/App.tsx
+++ b/src/browser/modules/App/App.tsx
@@ -18,7 +18,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { setEditorTheme } from 'neo4j-arc/cypher-language-support'
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { connect } from 'react-redux'
 import { withBus } from 'react-suber'
 import { ThemeProvider } from 'styled-components'
@@ -96,10 +96,6 @@ import {
   updateUdcData
 } from 'shared/modules/udc/udcDuck'
 import { getTelemetrySettings } from 'shared/utils/selectors'
-import {
-  PREVIEW_EVENT,
-  trackPageLoad
-} from 'shared/modules/preview/previewDuck'
 
 export const MAIN_WRAPPER_DOM_ID = 'MAIN_WRAPPER_DOM_ID'
 
@@ -123,56 +119,36 @@ export function App(props: any) {
   const eventMetricsCallback = useRef((_: MetricsData) => _)
   const segmentTrackCallback = useRef((_: MetricsData) => _)
 
-  const invokeTrackingCallbacks = useCallback(
-    ({ category, label, data }: MetricsData) => {
-      if (!isRunningE2ETest() && props.telemetrySettings.allowUserStats) {
-        const extendedData = {
-          browserVersion: version,
-          neo4jEdition: props.edition,
-          connectedTo: props.connectedTo,
-          ...data
-        }
-
-        eventMetricsCallback &&
-          eventMetricsCallback.current &&
-          eventMetricsCallback.current({ category, label, data: extendedData })
-
-        segmentTrackCallback &&
-          segmentTrackCallback.current &&
-          segmentTrackCallback.current({ category, label, data: extendedData })
-      }
-    },
-    [props.telemetrySettings.allowUserStats]
-  )
-
-  useEffect(() => {
-    const unsub =
-      props.bus &&
-      props.bus.take(METRICS_EVENT, (metricsData: MetricsData) => {
-        invokeTrackingCallbacks(metricsData)
-      })
-    return () => unsub && unsub()
-  }, [props.bus, invokeTrackingCallbacks])
-
   useEffect(() => {
     const unsub =
       props.bus &&
-      props.bus.take(PREVIEW_EVENT, (metricsData: MetricsData) => {
-        invokeTrackingCallbacks(metricsData)
-      })
+      props.bus.take(
+        METRICS_EVENT,
+        ({ category, label, data: originalData }: MetricsData) => {
+          if (!isRunningE2ETest() && props.telemetrySettings.allowUserStats) {
+            const data = {
+              browserVersion: version,
+              neo4jEdition: props.edition,
+              connectedTo: props.connectedTo,
+              ...originalData
+            }
+            eventMetricsCallback &&
+              eventMetricsCallback.current &&
+              eventMetricsCallback.current({ category, label, data })
+            segmentTrackCallback &&
+              segmentTrackCallback.current &&
+              segmentTrackCallback.current({ category, label, data })
+          }
+        }
+      )
     return () => unsub && unsub()
-  }, [props.bus, invokeTrackingCallbacks])
+  }, [props.telemetrySettings.allowUserStats, props.bus])
 
   useEffect(() => {
     const initAction = udcInit()
     props.bus && props.bus.send(initAction.type, initAction)
   }, [props.bus])
 
-  useEffect(() => {
-    const pageLoadAction = trackPageLoad()
-    props.bus && props.bus.send(pageLoadAction.type, pageLoadAction)
-  }, [props.bus, props.telemetrySettings.allowUserStats])
-
   const {
     browserSyncAuthStatus,
     browserSyncConfig,
@@ -205,7 +181,6 @@ export function App(props: any) {
   }, [titleString])
 
   const wrapperClassNames = codeFontLigatures ? '' : 'disable-font-ligatures'
-
   return (
     <ErrorBoundary>
       <DesktopApi
diff --git a/src/shared/modules/udc/udcDuck.ts b/src/shared/modules/udc/udcDuck.ts
index a0827ac90a1..ac84f6eaf63 100644
--- a/src/shared/modules/udc/udcDuck.ts
+++ b/src/shared/modules/udc/udcDuck.ts
@@ -57,6 +57,7 @@ import {
   TRACK_CANNY_FEATURE_REQUEST
 } from 'shared/modules/sidebar/sidebarDuck'
 import cmdHelper from 'shared/services/commandInterpreterHelper'
+import { PREVIEW_EVENT } from '../preview/previewDuck'
 
 // Action types
 export const NAME = 'udc'
@@ -324,3 +325,13 @@ export const trackErrorFramesEpic: Epic<Action, GlobalState> = (
       }
     })
     .ignoreElements()
+
+export const trackPreviewEpic: Epic<Action, GlobalState> = action$ => {
+  return action$.ofType(PREVIEW_EVENT).map((action: any) => {
+    return metricsEvent({
+      category: 'preview',
+      label: action.label,
+      data: action.data
+    })
+  })
+}
diff --git a/src/shared/rootEpic.ts b/src/shared/rootEpic.ts
index e7e4f9a9d49..2b375b6e55f 100644
--- a/src/shared/rootEpic.ts
+++ b/src/shared/rootEpic.ts
@@ -89,6 +89,7 @@ import {
 import {
   trackCommandUsageEpic,
   trackErrorFramesEpic,
+  trackPreviewEpic,
   trackReduxActionsEpic,
   udcStartupEpic
 } from './modules/udc/udcDuck'
@@ -148,5 +149,6 @@ export default combineEpics(
   trackReduxActionsEpic,
   initializeCypherEditorEpic,
   updateEditorSupportSchemaEpic,
-  fetchRemoteGuideEpic
+  fetchRemoteGuideEpic,
+  trackPreviewEpic
 )