diff --git a/App/common/constants/AnalyticsEventsConstant.ts b/App/common/constants/AnalyticsEventsConstant.ts index 148cf2106f..5604472256 100644 --- a/App/common/constants/AnalyticsEventsConstant.ts +++ b/App/common/constants/AnalyticsEventsConstant.ts @@ -41,11 +41,14 @@ export const AnalyticsGlobalErrorTypeConstant = { export const EVENT_NAMES = { CODEPUSH_FETCH_ERROR: "codepush_fetch_error", + SCREEN_LOAD_TIME: "screen_load_time", }; export const EVENT_PROPERTY_KEYS = { STATUS: "status", BUNDLE_VERSION: "bundleVersion", + SCREEN_NAME: "screenName", + LOAD_TIME: "loadTime", }; export const EVENT_PROPERTY_VALUES = { diff --git a/App/common/hooks/useScreenLoadTime.ts b/App/common/hooks/useScreenLoadTime.ts new file mode 100644 index 0000000000..49e9e5a90a --- /dev/null +++ b/App/common/hooks/useScreenLoadTime.ts @@ -0,0 +1,40 @@ +import { useEffect, useState } from "react"; +import { useAnalyticsEvent } from "./useAnalyticsEvent"; +import { AnalyticsEvent } from "../interface"; +import { EVENT_NAMES, EVENT_PROPERTY_KEYS } from "../constants"; +import { ScreenState } from "../screen/BaseScreen"; + +const useScreenLoadTime = ( + screenName: string | null, + screenState: ScreenState | null | undefined, +) => { + const [startTime, setStartTime] = useState(null); + const { sendAsAnalyticsEvent } = useAnalyticsEvent(); + + useEffect(() => { + if (screenState === ScreenState.LOADING && startTime === null) { + setStartTime(performance.now()); + } else if ( + (screenState === ScreenState.LOADED || + screenState === ScreenState.ERROR) && + startTime !== null + ) { + const endTime = performance.now(); + const loadTime = (endTime - startTime) / 1000; + if (screenName) { + const analyticsEvent: AnalyticsEvent = { + name: EVENT_NAMES.SCREEN_LOAD_TIME, + properties: { + [EVENT_PROPERTY_KEYS.SCREEN_NAME]: screenName, + [EVENT_PROPERTY_KEYS.LOAD_TIME]: loadTime.toFixed(3), + }, + }; + + sendAsAnalyticsEvent(analyticsEvent); + } + setStartTime(null); + } + }, [screenState]); +}; + +export default useScreenLoadTime; diff --git a/App/common/screen/BaseScreen.tsx b/App/common/screen/BaseScreen.tsx index 1eaa53fd86..558a7f8df8 100644 --- a/App/common/screen/BaseScreen.tsx +++ b/App/common/screen/BaseScreen.tsx @@ -25,6 +25,7 @@ import { } from "../utilities/MiscUtils"; import { WidgetActionTypes } from "../widgets/widget-actions/WidgetActionTypes"; import { ScreenMapper } from "./screen-mappers/ScreenMapper"; +import useScreenLoadTime from "../hooks/useScreenLoadTime"; const BaseScreen: React.FC<{ navigation: any; route: any }> = ({ navigation, @@ -105,6 +106,7 @@ const BaseScreen: React.FC<{ navigation: any; route: any }> = ({ dispatch(updateCtaData({ cta: ctaData, setScreenState: screenState })); } }, [route.params.ctaData, screenState]); + useScreenLoadTime(screenName, screenData?.screenState); const handleActions = (actionPayload?: GenericActionPayload) => { actionPayload?.metaData?.forEach(ActionMetaData => {