Merge pull request #866 from 0xProject/feature/website/integrate-heap

Integrate Heap analytics into the website

2 files changed, 45 insertions, 3 deletions

diff --git a/packages/website/ts/redux/analyticsMiddleware.ts b/packages/website/ts/redux/analyticsMiddleware.ts
new file mode 100644
index 000000000..1ef9b6ad7
--- /dev/null
+++ b/packages/website/ts/redux/analyticsMiddleware.ts
@@ -0,0 +1,41 @@
+import { Middleware } from 'redux';
+import { State } from 'ts/redux/reducer';
+import { ActionTypes } from 'ts/types';
+import { analytics } from 'ts/utils/analytics';
+
+export const analyticsMiddleware: Middleware = store => next => action => {
+    const nextAction = next(action);
+    const nextState = (store.getState() as any) as State;
+    switch (action.type) {
+        case ActionTypes.UpdateInjectedProviderName:
+            analytics.addEventProperties({
+                injectedProviderName: nextState.injectedProviderName,
+            });
+            break;
+        case ActionTypes.UpdateNetworkId:
+            analytics.addEventProperties({
+                networkId: nextState.networkId,
+            });
+            break;
+        case ActionTypes.UpdateUserAddress:
+            analytics.addUserProperties({
+                ethAddress: nextState.userAddress,
+            });
+            break;
+        case ActionTypes.UpdateUserEtherBalance:
+            if (nextState.userEtherBalanceInWei) {
+                analytics.addUserProperties({
+                    ethBalance: nextState.userEtherBalanceInWei.toString(),
+                });
+            }
+            break;
+        case ActionTypes.UpdatePortalOnboardingStep:
+            analytics.track('Update Onboarding Step', {
+                stepIndex: nextState.portalOnboardingStep,
+            });
+            break;
+        default:
+            break;
+    }
+    return nextAction;
+};
diff --git a/packages/website/ts/redux/store.ts b/packages/website/ts/redux/store.ts
index 2672e3f61..006241371 100644
--- a/packages/website/ts/redux/store.ts
+++ b/packages/website/ts/redux/store.ts
@@ -1,7 +1,8 @@
 import * as _ from 'lodash';
-import { createStore, Store as ReduxStore } from 'redux';
-import { devToolsEnhancer } from 'redux-devtools-extension/developmentOnly';
+import { applyMiddleware, createStore, Store as ReduxStore } from 'redux';
+import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
 import { stateStorage } from 'ts/local_storage/state_storage';
+import { analyticsMiddleware } from 'ts/redux/analyticsMiddleware';
 import { reducer, State } from 'ts/redux/reducer';
 
 const ONE_SECOND = 1000;
@@ -9,7 +10,7 @@ const ONE_SECOND = 1000;
 export const store: ReduxStore<State> = createStore(
     reducer,
     stateStorage.getPersistedDefaultState(),
-    devToolsEnhancer({ name: '0x Website Redux Store' }),
+    composeWithDevTools(applyMiddleware(analyticsMiddleware)),
 );
 store.subscribe(
     _.throttle(() => {