diff --git a/frontend/src/AppRoutes/index.tsx b/frontend/src/AppRoutes/index.tsx index 11f9d79d51..97b77917fa 100644 --- a/frontend/src/AppRoutes/index.tsx +++ b/frontend/src/AppRoutes/index.tsx @@ -10,7 +10,7 @@ import { NotificationProvider } from 'hooks/useNotifications'; import { ResourceProvider } from 'hooks/useResourceAttribute'; import history from 'lib/history'; import { QueryBuilderProvider } from 'providers/QueryBuilder'; -import { Suspense, useState } from 'react'; +import { Suspense, useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Route, Router, Switch } from 'react-router-dom'; import { Dispatch } from 'redux'; @@ -18,6 +18,7 @@ import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; import { UPDATE_FEATURE_FLAG_RESPONSE } from 'types/actions/app'; import AppReducer from 'types/reducer/app'; +import { trackPageView } from 'utils/segmentAnalytics'; import PrivateRoute from './Private'; import defaultRoutes from './routes'; @@ -32,7 +33,7 @@ function App(): JSX.Element { const dispatch = useDispatch>(); - const { hostname } = window.location; + const { hostname, pathname } = window.location; const featureResponse = useGetFeatureFlag((allFlags) => { const isOnboardingEnabled = @@ -73,6 +74,20 @@ function App(): JSX.Element { } }); + useEffect(() => { + if (isLoggedInState && user && user.userId && user.email) { + window.analytics.identify(user?.userId, { + email: user?.email || '', + name: user?.name || '', + }); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isLoggedInState]); + + useEffect(() => { + trackPageView(pathname); + }, [pathname]); + return ( diff --git a/frontend/src/index.html.ejs b/frontend/src/index.html.ejs index 620d44d92e..8fe2ea80bb 100644 --- a/frontend/src/index.html.ejs +++ b/frontend/src/index.html.ejs @@ -99,5 +99,72 @@ } })(); + + diff --git a/frontend/src/typings/window.ts b/frontend/src/typings/window.ts index b27f8a85e0..a05152e5a5 100644 --- a/frontend/src/typings/window.ts +++ b/frontend/src/typings/window.ts @@ -3,7 +3,7 @@ import { compose, Store } from 'redux'; declare global { interface Window { store: Store; - + analytics: Record; __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: typeof compose; } } diff --git a/frontend/src/utils/segmentAnalytics.ts b/frontend/src/utils/segmentAnalytics.ts new file mode 100644 index 0000000000..d776c34c3c --- /dev/null +++ b/frontend/src/utils/segmentAnalytics.ts @@ -0,0 +1,12 @@ +function trackPageView(pageName: string): void { + window.analytics.page(pageName); +} + +function trackEvent( + eventName: string, + properties: Record, +): void { + window.analytics.track(eventName, properties); +} + +export { trackEvent, trackPageView }; diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index 770e40ca30..8690e5e55f 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -20,6 +20,7 @@ const plugins = [ new HtmlWebpackPlugin({ template: 'src/index.html.ejs', INTERCOM_APP_ID: process.env.INTERCOM_APP_ID, + SEGMENT_ID: process.env.SEGMENT_ID, }), new webpack.ProvidePlugin({ process: 'process/browser', @@ -29,6 +30,7 @@ const plugins = [ NODE_ENV: process.env.NODE_ENV, FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT, INTERCOM_APP_ID: process.env.INTERCOM_APP_ID, + SEGMENT_ID: process.env.SEGMENT_ID, }), }), ];