WIP Add Tracking #119

benshope · 2018-06-15T19:16:32Z

This adds some Google Analytics tracking to the demo site.

Resolves #116

heshan0131 · 2018-06-18T04:59:42Z

examples/demo-app/index.html

@@ -3,6 +3,15 @@
  <head>
    <meta charset='UTF-8' />
    <title>kepler.gl demo</title>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-64694404-15"></script>


No need to add it here. it is already in website/index.html

heshan0131 · 2018-06-18T05:00:18Z

examples/demo-app/src/analytics.js

@@ -0,0 +1,53 @@
+import { ActionTypes } from "kepler.gl/actions";


Please confit your editor settings to get rid of extra space in the bracket

Moving the .prettierrc to the root directory fixes this - if it's okay to do that

heshan0131 · 2018-06-18T05:01:24Z

examples/demo-app/src/analytics.js

+import { LOCATION_CHANGE } from "react-router-redux";
+
+const {
+  ADD_DATA,


Maybe easier to not de-construct here and just use ActionTypes. ADD_DATA in the following function. So that people don't have to edit in 2 places when adding new action to be tracked

Good call, yep!

heshan0131 · 2018-06-18T05:02:01Z

examples/demo-app/src/analytics.js

+
+const trackingInformation = {
+  [ADD_DATA]: ({ payload: { files } }) =>
+    files.map(({ name, size, type }) => ({ name, size, type })),


let's not track the name, only type and size would be sufficient

Right, better not to upload anything about the users' data that they might not want

heshan0131 · 2018-06-18T05:06:34Z

examples/demo-app/src/analytics.js

+const getPayload = ({ payload }) => payload;
+
+const trackingInformation = {
+  [ADD_DATA]: ({ payload: { files } }) =>


ADD_DATA is not used, LOAD_FILES is the one you want to track

examples/demo-app/src/analytics.js

@@ -0,0 +1,78 @@
+import {ActionTypes} from 'kepler.gl/actions';


chrisirhc · 2018-06-19T02:23:37Z

examples/demo-app/src/store.js

@@ -27,13 +27,15 @@ import window from 'global/window';
 import {taskMiddleware} from 'react-palm';

 import demoReducer from './reducers';
+import analyticsMiddleware from "./analytics";


Shouldn't this be single quotes?

This reverts commit 4e8c972.

heshan0131 · 2018-06-19T20:26:03Z

examples/demo-app/src/analytics.js

+      info: {lngLat}
+    }
+  }) => lngLat,
+  [ActionTypes.LAYER_CONFIG_CHANGE]: ({


LAYER_TYPE_CHANGE

heshan0131 · 2018-06-19T20:29:27Z

examples/demo-app/src/analytics.js

+  [ActionTypes.MAP_STYLE_CHANGE]: getPayload,
+  [ActionTypes.TOGGLE_MODAL]: getPayload,
+  [ActionTypes.TOGGLE_SIDE_PANEL]: getPayload,
+  [ActionTypes.UPDATE_MAP]: withStoreInformation(getPayload),


this is map viewport change, don't track

heshan0131 · 2018-06-19T20:31:42Z

examples/demo-app/src/analytics.js

+  }),
+  [ActionTypes.MAP_STYLE_CHANGE]: getPayload,
+  [ActionTypes.TOGGLE_MODAL]: getPayload,
+  [ActionTypes.TOGGLE_SIDE_PANEL]: getPayload,


We don't need to track this

examples/demo-app/src/analytics.js

+  [LOCATION_CHANGE]: x => x
+};
+
+const analyticsMiddleware = store => next => action => {


heshan0131 · 2018-06-19T20:37:57Z

examples/demo-app/src/analytics.js

+  [ActionTypes.TOGGLE_MODAL]: getPayload,
+  [ActionTypes.TOGGLE_SIDE_PANEL]: getPayload,
+  [ActionTypes.UPDATE_MAP]: withStoreInformation(getPayload),
+  [ActionTypes.SET_FILTER]: withStoreInformation(getPayload),


assume this is where we track the type of filter being used. payload would be not wrapped. and it would sed {idx, prop, value}

const {prop} = payload; if (prop === 'name') { // get the type of the filter from the next store const visState = store.demo.keplerGl.map.visState; const filter = visState.filters[idx] const newType = filter.type; const trackingPayload = {type: newType} }

heshan0131 · 2018-06-20T19:28:08Z

examples/demo-app/src/analytics.js

+const trackingInformation = {
+  [ActionTypes.LOAD_FILES]: ({files}) =>
+    files.map(({size, type}) => ({size, type})),
+  [ActionTypes.LAYER_HOVER]: ({


We don't want to track LAYER_HOVER, it gets called all the time

All actions are currently tracked - should I specifically exclude this one?

heshan0131 · 2018-06-20T19:37:24Z

examples/demo-app/src/analytics.js

+  [ActionTypes.MAP_STYLE_CHANGE]: getPayload,
+  [ActionTypes.TOGGLE_MODAL]: getPayload,
+  [ActionTypes.SET_FILTER]: getFilterFromStore,
+  [ActionTypes.INTERACTION_CONFIG_CHANGE]: ({config}) => config,


if we want to track whether tooltip or brushing is enabled, we should just track that
({config}) => ({[config.id]:{config.enabled]})

heshan0131 · 2018-06-20T19:40:30Z

examples/demo-app/src/analytics.js

+  [ActionTypes.TOGGLE_MODAL]: getPayload,
+  [ActionTypes.SET_FILTER]: getFilterFromStore,
+  [ActionTypes.INTERACTION_CONFIG_CHANGE]: ({config}) => config,
+  [LOCATION_CHANGE]: x => x


to track how many layers and filters we can do

[ActionTypes.ADD_LAYER]: (payload, store) => ({ total: store.demo.keplerGl.map.visState.layers.length }), [ActionTypes.ADD_FILTER]: (payload, store) => ({ total: store.demo.keplerGl.map.visState.filters.length }),

heshan0131 · 2018-06-20T19:43:35Z

src/components/side-panel/panel-header.js

@@ -273,6 +277,14 @@ function PanelHeaderFactory() {
      );
    }
  }
+  return connect(undefined, {


you are adding tracking to kepler.gl/src directly here. We don't want to do that. Also, we should now randomly call connect in just this component. connect should only called once in the top level component. If you need, we can add a new ui-state action TOGGLE_SIDE_PANEL_HEADER and showHeaderDropdown prop in ui-state to trigger this behavior

benshope · 2018-06-20T22:55:34Z

@heshan0131 this should be good to deploy - I had to fix a few very strange test failures - so give it a thorough last check (particularly those parts)

…r correctly

heshan0131 · 2018-06-21T01:29:33Z

src/components/side-panel/panel-header.js

        <StyledPanelHeader className="side-panel__panel-header">
          <StyledPanelHeaderTop className="side-panel__panel-header__top">
-            <logoComponent version={version}/>
+            <this.props.logoComponent appName={appName} version={version}/>


PanelHeader can't be rendered as a pure functional component, because we can only use this.props.logoComponent syntax to render the local component, otherwise, react will interpret logoComponent as a tag

…etail-page [BUBR-908] Mobilize detail page

Add some tracking

8d22cfc

benshope requested a review from heshan0131 June 15, 2018 19:16

benshope mentioned this pull request Jun 15, 2018

Add analytics tracking for usage kepler.gl #116

Closed

heshan0131 reviewed Jun 18, 2018

View reviewed changes

benshope added 2 commits June 18, 2018 10:46

Make requested changes

b7a0073

Add analytics from information from Redux store

26a4f69

This comment has been minimized.

Sign in to view

chrisirhc reviewed Jun 19, 2018

View reviewed changes

This comment has been minimized.

Sign in to view

benshope added 8 commits June 19, 2018 11:54

Add tracking to export button click

a8a659c

Remove semicolons

4e8c972

Revert "Remove semicolons"

91854b1

This reverts commit 4e8c972.

cleanup

fb7b8c8

minor

7a1f6eb

make requested changes

1395fec

minor

5c9d2ea

Fix tests

ef86261

heshan0131 reviewed Jun 19, 2018

View reviewed changes

Make requested changes

b524783

heshan0131 reviewed Jun 20, 2018

View reviewed changes

benshope added 6 commits June 20, 2018 14:01

Make requested changes

8b69583

Make requested changes

487e119

rename

2b6752e

minor

6f6cf30

Merge branch 'master' into tracking

c058336

Fix failing tests

676a476

heshan0131 added 2 commits June 20, 2018 18:16

use gtag instead of ga, getting the correct filter type

dfead5f

render Panel header as react class, so that props.logoComponent rende…

c91136f

…r correctly

heshan0131 reviewed Jun 21, 2018

View reviewed changes

heshan0131 approved these changes Jun 21, 2018

View reviewed changes

heshan0131 merged commit 0822a5e into master Jun 21, 2018

macrigiuseppe deleted the tracking branch October 21, 2018 23:48

bjungs pushed a commit to imec-int/kepler.gl that referenced this pull request Nov 14, 2022

Merge pull request keplergl#119 from EDiT/feature/BUBR-908-mobilize-d…

8484f8a

…etail-page [BUBR-908] Mobilize detail page

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP Add Tracking #119

WIP Add Tracking #119

benshope commented Jun 15, 2018 •

edited by chrisirhc

heshan0131 Jun 18, 2018

heshan0131 Jun 18, 2018

benshope Jun 18, 2018 •

edited

heshan0131 Jun 18, 2018

benshope Jun 18, 2018

heshan0131 Jun 18, 2018

benshope Jun 18, 2018

heshan0131 Jun 18, 2018

benshope Jun 18, 2018

This comment has been minimized.

This comment was marked as resolved.

This comment was marked as resolved.

chrisirhc Jun 19, 2018

This comment has been minimized.

This comment has been minimized.

heshan0131 Jun 19, 2018

heshan0131 Jun 19, 2018

heshan0131 Jun 19, 2018

This comment was marked as resolved.

This comment was marked as resolved.

heshan0131 Jun 19, 2018

heshan0131 Jun 20, 2018

benshope Jun 20, 2018

heshan0131 Jun 20, 2018

benshope Jun 20, 2018

heshan0131 Jun 20, 2018

heshan0131 Jun 20, 2018

benshope commented Jun 20, 2018 •

edited

heshan0131 Jun 21, 2018

		@@ -0,0 +1,53 @@
		import { ActionTypes } from "kepler.gl/actions";

		@@ -0,0 +1,78 @@
		import {ActionTypes} from 'kepler.gl/actions';

WIP Add Tracking #119

WIP Add Tracking #119

Conversation

benshope commented Jun 15, 2018 • edited by chrisirhc

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benshope Jun 18, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment has been minimized.

This comment was marked as resolved.

This comment was marked as resolved.

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as resolved.

This comment was marked as resolved.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benshope commented Jun 20, 2018 • edited

Choose a reason for hiding this comment

benshope commented Jun 15, 2018 •

edited by chrisirhc

benshope Jun 18, 2018 •

edited

benshope commented Jun 20, 2018 •

edited