diff --git a/app/client/src/components/editorComponents/CloseEditor.tsx b/app/client/src/components/editorComponents/CloseEditor.tsx index e4543908e8..4d22684d79 100644 --- a/app/client/src/components/editorComponents/CloseEditor.tsx +++ b/app/client/src/components/editorComponents/CloseEditor.tsx @@ -14,6 +14,7 @@ import { generateTemplateFormURL, integrationEditorURL, } from "RouteBuilder"; +import AnalyticsUtil from "utils/AnalyticsUtil"; const IconContainer = styled.div` //width: 100%; @@ -62,6 +63,12 @@ function CloseEditor() { params: getQueryParams(), }) : redirectURL; + + AnalyticsUtil.logEvent("BACK_BUTTON_CLICK", { + type: "BACK_BUTTON", + fromUrl: location.pathname, + toUrl: URL, + }); history.push(URL); }; diff --git a/app/client/src/pages/Editor/DataSourceEditor/BackButton.tsx b/app/client/src/pages/Editor/DataSourceEditor/BackButton.tsx index 04c7dcb6a9..08dbcec8a4 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/BackButton.tsx +++ b/app/client/src/pages/Editor/DataSourceEditor/BackButton.tsx @@ -6,6 +6,7 @@ import { useHistory } from "react-router-dom"; import { getIsGeneratePageInitiator } from "utils/GenerateCrudUtil"; import { Colors } from "constants/Colors"; import { builderURL, generateTemplateFormURL } from "RouteBuilder"; +import AnalyticsUtil from "utils/AnalyticsUtil"; const Back = styled.span` height: 30px; @@ -22,6 +23,12 @@ function BackButton() { const redirectURL = isGeneratePageInitiator ? generateTemplateFormURL() : builderURL(); + + AnalyticsUtil.logEvent("BACK_BUTTON_CLICK", { + type: "BACK_BUTTON", + fromUrl: location.pathname, + toUrl: redirectURL, + }); history.push(redirectURL); }; return ( diff --git a/app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx b/app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx index 2bb86b1de3..60795d6cf4 100644 --- a/app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx +++ b/app/client/src/pages/Editor/Explorer/Actions/ActionEntity.tsx @@ -12,6 +12,8 @@ import { getAction, getPlugins } from "selectors/entitiesSelector"; import { Action, PluginType } from "entities/Action"; import { keyBy } from "lodash"; import { getActionConfig } from "./helpers"; +import AnalyticsUtil from "utils/AnalyticsUtil"; +import { useLocation } from "react-router"; const getUpdateActionNameReduxAction = (id: string, name: string) => { return saveActionName({ id, name }); @@ -31,6 +33,7 @@ export const ExplorerActionEntity = memo((props: ExplorerActionEntityProps) => { const action = useSelector((state) => getAction(state, props.id)) as Action; const plugins = useSelector(getPlugins); const pluginGroups = useMemo(() => keyBy(plugins, "id"), [plugins]); + const location = useLocation(); const config = getActionConfig(props.type); const url = config?.getURL( @@ -48,7 +51,13 @@ export const ExplorerActionEntity = memo((props: ExplorerActionEntityProps) => { url, }); url && history.push(url); - }, [url]); + AnalyticsUtil.logEvent("ENTITY_EXPLORER_CLICK", { + type: "QUERIES/APIs", + fromUrl: location.pathname, + toUrl: url, + name: action.name, + }); + }, [url, location.pathname, action.name]); const contextMenu = ( { + let url; if (props.plugin && props.plugin.type === PluginType.SAAS) { - history.push( - saasEditorDatasourceIdURL({ - pluginPackageName: props.plugin.packageName, - datasourceId: props.datasource.id, - params: { - viewMode: true, - }, - }), - ); + url = saasEditorDatasourceIdURL({ + pluginPackageName: props.plugin.packageName, + datasourceId: props.datasource.id, + params: { + viewMode: true, + }, + }); } else { dispatch( setDatsourceEditorMode({ id: props.datasource.id, viewMode: true }), ); - history.push( - datasourcesEditorIdURL({ - datasourceId: props.datasource.id, - params: getQueryParams(), - }), - ); + url = datasourcesEditorIdURL({ + datasourceId: props.datasource.id, + params: getQueryParams(), + }); } - }, [props.datasource.id]); + + AnalyticsUtil.logEvent("ENTITY_EXPLORER_CLICK", { + type: "DATASOURCES", + fromUrl: location.pathname, + toUrl: url, + name: props.datasource.name, + }); + history.push(url); + }, [props.datasource.id, props.datasource.name, location.pathname]); const queryId = getQueryIdFromURL(); const queryAction = useSelector((state: AppState) => diff --git a/app/client/src/pages/Editor/Explorer/JSActions/JSActionEntity.tsx b/app/client/src/pages/Editor/Explorer/JSActions/JSActionEntity.tsx index 1beac95c52..895407e011 100644 --- a/app/client/src/pages/Editor/Explorer/JSActions/JSActionEntity.tsx +++ b/app/client/src/pages/Editor/Explorer/JSActions/JSActionEntity.tsx @@ -11,6 +11,8 @@ import { JSCollection } from "entities/JSCollection"; import { JsFileIconV2 } from "../ExplorerIcons"; import { PluginType } from "entities/Action"; import { jsCollectionIdURL } from "RouteBuilder"; +import AnalyticsUtil from "utils/AnalyticsUtil"; +import { useLocation } from "react-router"; type ExplorerJSCollectionEntityProps = { step: number; @@ -30,13 +32,23 @@ export const ExplorerJSCollectionEntity = memo( const jsAction = useSelector((state: AppState) => getJSCollection(state, props.id), ) as JSCollection; + const location = useLocation(); + const navigateToUrl = jsCollectionIdURL({ + pageId, + collectionId: jsAction.id, + params: {}, + }); const navigateToJSCollection = useCallback(() => { if (jsAction.id) { - history.push( - jsCollectionIdURL({ pageId, collectionId: jsAction.id, params: {} }), - ); + AnalyticsUtil.logEvent("ENTITY_EXPLORER_CLICK", { + type: "JSOBJECT", + fromUrl: location.pathname, + toUrl: navigateToUrl, + name: jsAction.name, + }); + history.push(navigateToUrl); } - }, [pageId, jsAction.id]); + }, [pageId, jsAction.id, jsAction.name, location.pathname]); const contextMenu = ( (null); const storedHeightKey = "pagesContainerHeight_" + applicationId; const storedHeight = localStorage.getItem(storedHeightKey); + const location = useLocation(); const resizeAfterCallback = (data: CallbackResponseType) => { localStorage.setItem(storedHeightKey, data.height.toString()); @@ -101,14 +104,22 @@ function Pages() { } }, [pageResizeRef]); - const switchPage = useCallback((page: Page) => { - history.push( - builderURL({ + const switchPage = useCallback( + (page: Page) => { + const navigateToUrl = builderURL({ pageSlug: page.slug as string, pageId: page.pageId, - }), - ); - }, []); + }); + AnalyticsUtil.logEvent("PAGE_NAME_CLICK", { + name: page.pageName, + fromUrl: location.pathname, + type: "PAGES", + toUrl: navigateToUrl, + }); + history.push(navigateToUrl); + }, + [location.pathname], + ); const createPageCallback = useCallback(() => { const name = getNextEntityName( diff --git a/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx b/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx index 799390f88a..7d005b9377 100644 --- a/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx +++ b/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx @@ -10,6 +10,9 @@ import { CanvasStructure } from "reducers/uiReducers/pageCanvasStructureReducer" import { getSelectedWidget, getSelectedWidgets } from "selectors/ui"; import { useNavigateToWidget } from "./useNavigateToWidget"; import WidgetIcon from "./WidgetIcon"; +import AnalyticsUtil from "utils/AnalyticsUtil"; +import { builderURL } from "RouteBuilder"; +import { useLocation } from "react-router"; export type WidgetTree = WidgetProps & { children?: WidgetTree[] }; @@ -81,6 +84,7 @@ export const WidgetEntity = memo((props: WidgetEntityProps) => { (state: AppState) => state.ui.widgetDragResize.selectedWidgetAncestry, ); const icon = ; + const location = useLocation(); const shouldExpand = widgetsToExpand.includes(props.widgetId); @@ -107,6 +111,22 @@ export const WidgetEntity = memo((props: WidgetEntityProps) => { return widgetType === "MODAL_WIDGET" ? widgetId : parentModalId; }, [widgetType, widgetId, parentModalId]); + const switchWidget = useCallback( + (e) => { + AnalyticsUtil.logEvent("ENTITY_EXPLORER_CLICK", { + type: "WIDGETS", + fromUrl: location.pathname, + toUrl: `${builderURL({ + pageId: props.pageId, + hash: widgetId, + })}`, + name: props.widgetName, + }); + navigateToWidget(e); + }, + [location.pathname, props.pageId, widgetId, props.widgetName], + ); + if (UNREGISTERED_WIDGETS.indexOf(props.widgetType) > -1) return null; const contextMenu = ( @@ -124,7 +144,7 @@ export const WidgetEntity = memo((props: WidgetEntityProps) => { return ( [ { @@ -32,8 +35,14 @@ function ExplorerContent() { id: "widgets", text: "Widgets", action: () => { - !(trimQueryString(builderURL()) === window.location.pathname) && + if (!(trimQueryString(builderURL()) === location.pathname)) { history.push(builderURL()); + AnalyticsUtil.logEvent("WIDGET_TAB_CLICK", { + type: "WIDGET_TAB", + fromUrl: location.pathname, + toUrl: builderURL(), + }); + } dispatch(forceOpenWidgetPanel(true)); if (isFirstTimeUserOnboardingEnabled) { dispatch(toggleInOnboardingWidgetSelection(true)); @@ -46,6 +55,7 @@ function ExplorerContent() { forceOpenWidgetPanel, isFirstTimeUserOnboardingEnabled, toggleInOnboardingWidgetSelection, + location.pathname, ], ); const [activeSwitch, setActiveSwitch] = useState(switches[0]); diff --git a/app/client/src/utils/AnalyticsUtil.tsx b/app/client/src/utils/AnalyticsUtil.tsx index c14818be47..f8883b2be4 100644 --- a/app/client/src/utils/AnalyticsUtil.tsx +++ b/app/client/src/utils/AnalyticsUtil.tsx @@ -234,7 +234,11 @@ export type EventName = | "MANUAL_UPGRADE_CLICK" | "PAGE_NOT_FOUND" | "SIMILAR_TEMPLATE_CLICK" - | "RUN_JS_FUNCTION"; + | "RUN_JS_FUNCTION" + | "PAGE_NAME_CLICK" + | "BACK_BUTTON_CLICK" + | "WIDGET_TAB_CLICK" + | "ENTITY_EXPLORER_CLICK"; function getApplicationId(location: Location) { const pathSplit = location.pathname.split("/");