📈 226 Instrument app with Google Analytics #354
Conversation
| return <Router />; | ||
| return ( | ||
| <TourProvider steps={[]}> | ||
| <AnalyticsProvider> |
There was a problem hiding this comment.
Adding the analytics provider to the app
|
|
||
| const value = useMemo(() => ({isEnabled, instance}), []); | ||
|
|
||
| return isInitialized ? <Context.Provider value={value}>{children}</Context.Provider> : <div />; |
There was a problem hiding this comment.
Spreads the instance and the is enabled flag
| event(action: A, label: string): void; | ||
| }; | ||
|
|
||
| const useAnalytics = <A>(category: Categories = Categories.Home): TAnalyticsService<A> => { |
There was a problem hiding this comment.
Main hook for analytics
| @@ -0,0 +1,23 @@ | |||
| import useAnalytics, {Categories} from '../Analytics/useAnalytics'; | |||
There was a problem hiding this comment.
Custom hooks for the assertion table analytics
| <Tabs.TabPane | ||
| tab={ | ||
| <span data-tour={GuidedTourService.getStep(GuidedTours.Trace, Steps.SpanDetail)}> | ||
| Span Detail | ||
| </span> | ||
| } | ||
| key="1" | ||
| key="span-detail" |
There was a problem hiding this comment.
Changing this to match the name we are going to send to GA
|
|
||
| import * as serviceWorker from './serviceWorker'; | ||
| import {TEnv} from './types'; | ||
|
|
||
| declare global { |
There was a problem hiding this comment.
Adding support for the Environment object form the window
| @@ -6,8 +6,8 @@ const Router = (): JSX.Element => { | |||
| return ( | |||
| <BrowserRouter> | |||
| <Routes> | |||
| <Route path="/" element={<Home />} /> | |||
| <Route path="/test/:id" element={<Test />} /> | |||
| <Route path="/" element={<Home path="home" />} /> | |||
There was a problem hiding this comment.
This now uses the new HOC for tracking, the path is sent to GA
| ]; | ||
| return uniqBy( | ||
| [ | ||
| ...spanFieldList, |
There was a problem hiding this comment.
Fixing annoying react warning
| import {ReactElement, useEffect, useState, createContext, useCallback, useMemo} from 'react'; | ||
| import GA4React from 'ga-4-react'; | ||
|
|
||
| const {analyticsEnabled = 'true', measurementId = 'G-ZP277L2M37'} = window.ENV || {}; |
There was a problem hiding this comment.
Checking this with @mathnogueira might remove in a follow up commit
This PR adds analytics to the FE application.
The architecture consists of a provider that spreads the analytics instance and the enabled flag and the main hook that can be extended by the components.
Changes
Checklist