refactored analytics, introduced vero and managing anonymous ids (codesandbox#2997)

* refactored analytics, introduced vero and managing anonymous ids

* Rename DNT var

* Remove unused loadTour

* Handle pageviews

* Also sign in state when loading app

Author: christianalfoni

packages/app/src/app/overmind/effects/analytics.ts

@@ -1,5 +1,6 @@
 import track, {
   identify,
+  setAnonymousId,
   setUserId,
 } from '@codesandbox/common/lib/utils/analytics';
 
@@ -16,6 +17,7 @@ export default (() => {
       track(event, data);
     },
     identify,
+    setAnonymousId,
     setUserId,
   };
 })();

packages/app/src/app/overmind/effects/index.ts

@@ -5,7 +5,6 @@ export { default as browser } from './browser';
 export { default as connection } from './connection';
 export { default as fsSync } from './fsSync';
 export { default as jsZip } from './jsZip';
-export { default as jwt } from './jwt';
 export { default as keybindingManager } from './keybindingManager';
 export { default as live } from './live';
 export { default as moduleRecover } from './moduleRecover';
@@ -25,4 +24,4 @@ export { default as codesandboxApi } from './codesandboxApi';
 export { default as themes } from './themes';
 export { default as executor } from './executor';
 export { default as stripe } from './stripe';
-export { default as chameleon } from './chameleon';
+export { default as jwt } from './jwt';

packages/app/src/app/overmind/effects/jwt.ts

@@ -1,5 +1,6 @@
 import { Contributor } from '@codesandbox/common/lib/types';
-import { json, IState, IDerive } from 'overmind';
+import { IDerive, IState, json } from 'overmind';
+
 import { AsyncAction } from '.';
 
 export const withLoadApp = <T>(
@@ -30,6 +31,8 @@ export const withLoadApp = <T>(
       state.user = await effects.api.getCurrentUser();
       actions.internal.setPatronPrice();
       actions.internal.setSignedInCookie();
+      effects.analytics.identify('signed_in', true);
+      effects.analytics.setUserId(state.user.id);
       actions.internal.showUserSurveyIfNeeded();
       effects.live.connect();
       actions.userNotifications.internal.initialize();
@@ -39,9 +42,11 @@ export const withLoadApp = <T>(
         'Your session seems to be expired, please log in again...'
       );
       effects.jwt.reset();
+      effects.analytics.setAnonymousId();
     }
   } else {
     effects.jwt.reset();
+    effects.analytics.setAnonymousId();
   }
 
   if (continueAction) {

packages/app/src/app/overmind/factories.ts

@@ -7,9 +7,8 @@ import {
   ServerStatus,
   TabType,
 } from '@codesandbox/common/lib/types';
-import { identify, setUserId } from '@codesandbox/common/lib/utils/analytics';
-
 import { NotificationStatus } from '@codesandbox/notifications';
+
 import { createOptimisticModule } from './utils/common';
 import getItems from './utils/items';
 import { defaultOpenedModule, mainModule } from './utils/main-module';
@@ -28,6 +27,8 @@ export const signIn: AsyncAction<{ useExtraScopes: boolean }> = async (
     state.user = await effects.api.getCurrentUser();
     actions.internal.setPatronPrice();
     actions.internal.setSignedInCookie();
+    effects.analytics.identify('signed_in', true);
+    effects.analytics.setUserId(state.user.id);
     actions.internal.setStoredSettings();
     effects.live.connect();
     actions.userNotifications.internal.initialize(); // Seemed a bit differnet originally?
@@ -65,8 +66,6 @@ export const setPatronPrice: Action = ({ state }) => {
 
 export const setSignedInCookie: Action = ({ state }) => {
   document.cookie = 'signedIn=true; Path=/;';
-  identify('signed_in', true);
-  setUserId(state.user.id);
 };
 
 export const showUserSurveyIfNeeded: Action = ({ state, effects, actions }) => {

packages/app/src/app/overmind/internalActions.ts

@@ -1,5 +1,4 @@
 import { resolveModule } from '@codesandbox/common/lib/sandbox/modules';
-import { getHashedUserId } from '@codesandbox/common/lib/utils/analytics';
 import {
   EnvironmentVariable,
   ModuleCorrection,
@@ -122,8 +121,6 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
   }
 
   state.editor.isLoading = false;
-
-  effects.chameleon.loadTour(state.user && getHashedUserId(state.user.id));
 });
 
 export const contentMounted: Action = ({ state, effects }) => {

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -4,7 +4,7 @@ import { DragDropContext } from 'react-dnd';
 import _debug from '@codesandbox/common/lib/utils/debug';
 import { Toasts, NotificationStatus } from '@codesandbox/notifications';
 import { notificationState } from '@codesandbox/common/lib/utils/notifications';
-import send, { DNT } from '@codesandbox/common/lib/utils/analytics';
+import { DNT, trackPageview } from '@codesandbox/common/lib/utils/analytics';
 import theme from '@codesandbox/common/lib/theme';
 import { Button } from '@codesandbox/common/lib/components/Button';
 import Loadable from 'app/utils/Loadable';
@@ -79,16 +79,10 @@ const RoutesComponent: React.FC = () => {
         render={({ location }) => {
           if (process.env.NODE_ENV === 'production') {
             routeDebugger(
-              `Sending '${location.pathname + location.search}' to ga.`
+              `Sending '${location.pathname + location.search}' to analytics.`
             );
-            if (typeof (window as any).ga === 'function' && !DNT) {
-              (window as any).ga(
-                'set',
-                'page',
-                location.pathname + location.search
-              );
-
-              send('pageview', { path: location.pathname + location.search });
+            if (!DNT) {
+              trackPageview();
             }
           }
           return null;