fix(tracking): track client-side actions

Lumieducation · Feb 22, 2020 · 9a4938e · 9a4938e
1 parent 0c1d7c6
commit 9a4938e
Show file tree

Hide file tree

Showing 16 changed files with 900 additions and 797 deletions.
diff --git a/src/client/boot/index.tsx b/src/client/boot/index.tsx
@@ -21,13 +21,10 @@ import App from '../views';
 
 import SnackbarProvider from '../theme/Snackbar';
 
-import { track } from 'lib/track/actions';
-
 const log = new Logger('root');
 
 log.info(`booting v${process.env.VERSION}`);
 Sentry.captureMessage('start');
-track('start');
 
 declare var window: any;
 

diff --git a/src/client/lib/components/AppBar.tsx b/src/client/lib/components/AppBar.tsx
@@ -14,6 +14,8 @@ import MenuIcon from '@material-ui/icons/Menu';
 
 import { drawerWidth } from '../../theme';
 
+import { track } from 'lib/track/actions';
+
 export default function AppBar(props: {
     leftDrawerOpen: boolean;
     openLeftDrawer?: () => void;
@@ -32,7 +34,12 @@ export default function AppBar(props: {
                 <IconButton
                     color="inherit"
                     aria-label="open drawer"
-                    onClick={openLeftDrawer}
+                    onClick={() => {
+                        track('app_bar', 'click', 'menu_icon');
+                        if (openLeftDrawer) {
+                            openLeftDrawer();
+                        }
+                    }}
                     edge="start"
                     className={clsx(
                         classes.menuButton,

diff --git a/src/client/lib/components/EditorStartPage.tsx b/src/client/lib/components/EditorStartPage.tsx
@@ -6,6 +6,8 @@ import Grid from '@material-ui/core/Grid';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 
+import { track } from 'lib/track/actions';
+
 export default function EditorStartPage(props: {
     primaryButtonClick: () => void;
     secondaryButtonClick: () => void;
@@ -36,7 +38,10 @@ export default function EditorStartPage(props: {
                     <Grid item={true}>
                         <Button
                             id="editor-startpage-primaryButton"
-                            onClick={props.primaryButtonClick}
+                            onClick={() => {
+                                track('start_page', 'click', 'primary_button');
+                                props.primaryButtonClick();
+                            }}
                             variant="contained"
                             color="primary"
                         >
@@ -46,7 +51,14 @@ export default function EditorStartPage(props: {
                     <Grid item={true}>
                         <Button
                             id="editor-startpage-secondaryButton"
-                            onClick={props.secondaryButtonClick}
+                            onClick={() => {
+                                track(
+                                    'start_page',
+                                    'click',
+                                    'secondary_button'
+                                );
+                                props.secondaryButtonClick();
+                            }}
                             variant="outlined"
                             color="primary"
                         >

diff --git a/src/client/lib/components/LeftDrawer.tsx b/src/client/lib/components/LeftDrawer.tsx
@@ -9,6 +9,8 @@ import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 
 import { drawerWidth } from '../../theme';
 
+import { track } from 'lib/track/actions';
+
 export default function LeftDrawer(props: {
     children?: React.ReactNode;
     closeLeftDrawer: () => void;
@@ -29,7 +31,12 @@ export default function LeftDrawer(props: {
             }}
         >
             <div className={classes.drawerHeader}>
-                <IconButton onClick={closeLeftDrawer}>
+                <IconButton
+                    onClick={() => {
+                        track('left_drawer', 'click', 'close');
+                        closeLeftDrawer();
+                    }}
+                >
                     <ChevronLeftIcon />
                 </IconButton>
             </div>

diff --git a/src/client/lib/track/actions.ts b/src/client/lib/track/actions.ts
@@ -1,13 +1,20 @@
-// import nucleus from 'nucleus-nodejs';
+import * as api from './api';
 
-export function track(event: string, payload?: any): any {
-    // nucleus.track(event, payload);
-
-    return {
-        payload: {
-            event,
-            payload
-        },
-        type: 'TRACK'
-    };
+export function track(
+    category: string,
+    action: string,
+    name?: string,
+    value?: string
+): any {
+    return api.track(category, action, name, value).then(() => {
+        return {
+            payload: {
+                action,
+                category,
+                name,
+                value
+            },
+            type: 'TRACK'
+        };
+    });
 }
diff --git a/src/client/lib/track/api.ts b/src/client/lib/track/api.ts
@@ -0,0 +1,15 @@
+import superagent from 'superagent';
+
+export function track(
+    category: string,
+    action: string,
+    name?: string,
+    value?: string
+): Promise<superagent.Response> {
+    return superagent.post('/api/track/v0').send({
+        action,
+        category,
+        name,
+        value
+    });
+}