refactor(Matomo): get started moving events to middleware

blockchain · Sep 26, 2019 · 032ebd5 · 032ebd5
1 parent 1481ea5
commit 032ebd5
Show file tree

Hide file tree

Showing 15 changed files with 55 additions and 104 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/analytics/model.js b/packages/blockchain-wallet-v4-frontend/src/data/analytics/model.js
@@ -16,39 +16,10 @@ export const CUSTOM_VARIABLES = {
 // EVENTS
 // format: [event_category, event_action, ?event_name, ?event_value]
 //
-export const ADDRESS_EVENTS = {
-  ADD_NEXT_ADDR: ['addresses', 'add_next_addr'],
-  DELETE_LABEL: ['addresses', 'delete_label'],
-  EDIT_LABEL: ['addresses', 'edit_label'],
-  HIDE_USED_ADDRS: ['addresses', 'hide_used'],
-  IMPORT_ADDR: ['addresses', 'import'],
-  SHOW_CHANGE_ADDRS: ['addresses', 'show_change_addrs'],
-  SHOW_USED_ADDRS: ['addresses', 'show_used_addrs']
-}
-export const DEEPLINK_EVENTS = {
-  PIT: ['deeplink', 'pit_deeplink']
-}
-export const LOGIN_EVENTS = {
-  TRANSFER_ETH_LEGACY: ['login', 'transfer_eth_legacy']
-}
-export const KYC_EVENTS = {
-  FORMS: {
-    PERSONAL: ['kyc', 'personal_form'],
-    UPDATE_PHONE_NUMBER: ['kyc', 'personal_form', 'mobile']
-  },
-  ONBOARDING_START: ['kyc', 'onboarding', 'kyc_onboarding_start'],
-  SELECT_TIER: ['kyc', 'onboarding', 'select_tier'],
-  STEP_CHANGE: ['kyc', 'onboarding', 'kyc_onboarding_step_to_'],
-  SEND_VERIFICATION_EMAIL: ['kyc', 'onboarding', 'send_verification_email'],
-  SEND_SMS_CODE: ['kyc', 'onboarding', 'send_sms_code'],
-  VERIFY_PHONE_SUCCESS: ['kyc', 'onboarding', 'verify_phone_number_success'],
-  VERIFY_PHONE_FAILURE: ['kyc', 'onboarding', 'verify_phone_number_failure']
-}
 export const LOCKBOX_EVENTS = {
   INSTALL_APP: ['lockbox', 'apps', 'install'],
   UNINSTALL_APP: ['lockbox', 'apps', 'uninstall'],
   SETTINGS: {
-    ADD_DEVICE: ['lockbox', 'settings', 'add_device'],
     FIRMWARE_UPDATE: ['lockbox', 'settings', 'firmware_update'],
     RENAME_DEVICE: ['lockbox', 'settings', 'rename_device'],
     REMOVE_DEVICE: ['lockbox', 'settings', 'remove_device'],

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/auth/sagas.js b/packages/blockchain-wallet-v4-frontend/src/data/auth/sagas.js
@@ -3,7 +3,7 @@ import { assoc, path, prop, is } from 'ramda'
 
 import * as C from 'services/AlertService'
 import * as CC from 'services/ConfirmService'
-import { actions, actionTypes, model, selectors } from 'data'
+import { actions, actionTypes, selectors } from 'data'
 import {
   askSecondPasswordEnhancer,
   confirm,
@@ -26,8 +26,6 @@ export const emailMismatch2faErrorMessage =
 export const wrongCaptcha2faErrorMessage = 'Error: Captcha Code Incorrect'
 export const wrongAuthCodeErrorMessage = 'Authentication code is incorrect'
 
-const { LOGIN_EVENTS } = model.analytics
-
 export default ({ api, coreSagas }) => {
   const upgradeWallet = function * () {
     try {
@@ -72,7 +70,6 @@ export default ({ api, coreSagas }) => {
       const balance = path([addr, 'balance'], balances)
       if (balance > 0) {
         yield put(actions.modals.showModal('TransferEth', { balance, addr }))
-        yield put(actions.analytics.logEvent(LOGIN_EVENTS.TRANSFER_ETH_LEGACY))
       }
     }
   }

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/sagas.js b/packages/blockchain-wallet-v4-frontend/src/data/components/identityVerification/sagas.js
@@ -35,14 +35,6 @@ export const invalidLinkError = 'Invalid campaign one time link'
 
 export default ({ api, coreSagas }) => {
   const { TIERS } = model.profile
-  const {
-    FORMS,
-    SELECT_TIER,
-    SEND_SMS_CODE,
-    SEND_VERIFICATION_EMAIL,
-    VERIFY_PHONE_FAILURE,
-    VERIFY_PHONE_SUCCESS
-  } = model.analytics.KYC_EVENTS
   const {
     getCampaignData,
     fetchUser,
@@ -134,7 +126,6 @@ export default ({ api, coreSagas }) => {
     if (selected === tier) return
     yield call(api.selectTier, tier)
     yield call(fetchUser)
-    yield put(actions.analytics.logEvent([...SELECT_TIER, tier]))
   }
 
   const verifyIdentity = function * ({ payload }) {
@@ -230,7 +221,6 @@ export default ({ api, coreSagas }) => {
       yield call(coreSagas.settings.setMobile, { mobile: smsNumber })
       yield put(A.setSmsStep(SMS_STEPS.verify))
       yield put(actions.form.stopSubmit(SMS_NUMBER_FORM))
-      yield put(actions.analytics.logEvent(FORMS.UPDATE_PHONE_NUMBER))
     } catch (e) {
       yield put(
         actions.form.stopSubmit(SMS_NUMBER_FORM, {
@@ -249,7 +239,6 @@ export default ({ api, coreSagas }) => {
       yield call(coreSagas.settings.setMobileVerified, { code })
       yield call(syncUserWithWallet)
       yield put(actions.form.stopSubmit(SMS_NUMBER_FORM))
-      yield put(actions.analytics.logEvent(VERIFY_PHONE_SUCCESS))
       yield call(goToNextStep)
     } catch (e) {
       const description = prop('description', e)
@@ -259,7 +248,6 @@ export default ({ api, coreSagas }) => {
       else if (e === BAD_CODE_ERROR) error = BAD_CODE_ERROR
       else error = UPDATE_FAILURE
       yield put(actions.form.stopSubmit(SMS_NUMBER_FORM, { _error: error }))
-      yield put(actions.analytics.logEvent(VERIFY_PHONE_FAILURE))
     }
   }
 
@@ -272,7 +260,6 @@ export default ({ api, coreSagas }) => {
       yield call(coreSagas.settings.setMobile, { mobile: smsNumber })
       yield put(actions.form.stopSubmit(SMS_NUMBER_FORM))
       yield put(actions.alerts.displaySuccess(C.SMS_RESEND_SUCCESS))
-      yield put(actions.analytics.logEvent(SEND_SMS_CODE))
     } catch (e) {
       yield put(
         actions.form.stopSubmit(SMS_NUMBER_FORM, {
@@ -451,7 +438,6 @@ export default ({ api, coreSagas }) => {
       else yield call(coreSagas.settings.setEmail, { email })
       yield put(actions.form.stopAsyncValidation(PERSONAL_FORM))
       yield put(A.setEmailStep(EMAIL_STEPS.verify))
-      yield put(actions.analytics.logEvent(SEND_VERIFICATION_EMAIL))
     } catch (e) {
       yield put(
         actions.form.stopAsyncValidation(PERSONAL_FORM, {

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/importBtcAddress/sagas.js b/packages/blockchain-wallet-v4-frontend/src/data/components/importBtcAddress/sagas.js
@@ -1,12 +1,11 @@
 import { call, select, put } from 'redux-saga/effects'
 import { prop } from 'ramda'
-import { actions, model, selectors } from 'data'
+import { actions, selectors } from 'data'
 import * as C from 'services/AlertService'
 import { ADDRESS_TYPES } from 'blockchain-wallet-v4/src/redux/payment/btc/utils'
 import { promptForSecondPassword, promptForInput } from 'services/SagaService'
 import { utils } from 'blockchain-wallet-v4/src'
 
-const { IMPORT_ADDR } = model.analytics.ADDRESS_EVENTS
 export default ({ api, coreSagas, networks }) => {
   const logLocation = 'components/importBtcAddress/sagas'
 
@@ -32,14 +31,12 @@ export default ({ api, coreSagas, networks }) => {
         )
       }
       yield call(importLegacyAddress, address, value, null, null, to)
-      yield put(actions.analytics.logEvent(IMPORT_ADDR))
       return
     }
 
     // address handling (watch-only)
     if (value && utils.btc.isValidBtcAddress(value, networks.btc)) {
       yield call(importLegacyAddress, value, null, null, null, null)
-      yield put(actions.analytics.logEvent(IMPORT_ADDR))
     }
   }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/goals/sagas.js b/packages/blockchain-wallet-v4-frontend/src/data/goals/sagas.js
@@ -30,7 +30,7 @@ import { getBtcBalance, getAllBalances } from 'data/balance/sagas'
 import { parsePaymentRequest } from 'data/bitpay/sagas'
 import profileSagas from 'data/modules/profile/sagas'
 
-const { DEEPLINK_EVENTS, GENERAL_EVENTS, TRANSACTION_EVENTS } = model.analytics
+const { GENERAL_EVENTS, TRANSACTION_EVENTS } = model.analytics
 
 export default ({ api }) => {
   const { TIERS, KYC_STATES, DOC_RESUBMISSION_REASONS } = model.profile
@@ -62,7 +62,6 @@ export default ({ api }) => {
       })
     )
     yield delay(3000)
-    yield put(actions.analytics.logEvent(DEEPLINK_EVENTS.PIT))
   }
 
   const defineReferralGoal = function * (search) {

diff --git a/packages/blockchain-wallet-v4-frontend/src/middleware/index.js b/packages/blockchain-wallet-v4-frontend/src/middleware/index.js
@@ -1,4 +1,5 @@
 import autoDisconnection from './autoDisconnection'
+import matomoMiddleware from './matomoMiddleware'
 import webSocketBch from './webSocketBch'
 import webSocketBtc from './webSocketBtc'
 import webSocketEth from './webSocketEth'
@@ -7,6 +8,7 @@ import streamingXlm from './streamingXlm'
 
 export {
   autoDisconnection,
+  matomoMiddleware,
   streamingXlm,
   webSocketBch,
   webSocketBtc,

diff --git a/packages/blockchain-wallet-v4-frontend/src/middleware/matomoMiddleware.js b/packages/blockchain-wallet-v4-frontend/src/middleware/matomoMiddleware.js
@@ -0,0 +1,42 @@
+import { contains, path, prop } from 'ramda'
+
+const PAYLOAD = ['payload']
+const NAME = ['payload', 'name']
+const TYPE = ['payload', 'type']
+const FORM = ['meta', 'form']
+const FIELD = ['meta', 'field']
+
+// keep alphabetized
+const TYPE_WHITELIST = [
+  '@@redux-form/CHANGE',
+  '@@redux-form/SET_SUBMIT_SUCCEEDED',
+  '@EVENT.KYC.INITIALIZE_VERIFICATION',
+  '@EVENT.KYC.UPDATE_EMAIL',
+  'LOG_ERROR_MSG',
+  'SHOW_MODAL'
+]
+
+const matomoMiddleware = () => store => next => action => {
+  const eventCategory = prop('type', action)
+  const eventAction =
+    path(FORM, action) ||
+    path(NAME, action) ||
+    path(TYPE, action) ||
+    JSON.stringify(path(PAYLOAD, action))
+  const eventName = path(FIELD, action)
+
+  const logEvent = contains(action.type, TYPE_WHITELIST)
+
+  if (logEvent) {
+    window._paq.push(['trackEvent', eventCategory, eventAction, eventName])
+  }
+  // if (logEvent) {
+  // console.log('action', action)
+  // console.log('logEvent', logEvent)
+  // console.log(['trackEvent', eventCategory, eventAction, eventName])
+  // }
+
+  return next(action)
+}
+
+export default matomoMiddleware
diff --git a/.../blockchain-wallet-v4-frontend/src/modals/Exchange/IdentityVerification/Personal/index.js b/.../blockchain-wallet-v4-frontend/src/modals/Exchange/IdentityVerification/Personal/index.js
@@ -28,7 +28,6 @@ const getCountryElements = countries => [
 ]
 
 const { PERSONAL_FORM, EMAIL_STEPS } = model.components.identityVerification
-const { PERSONAL } = model.analytics.KYC_EVENTS.FORMS
 
 class PersonalContainer extends React.PureComponent {
   state = {
@@ -68,10 +67,6 @@ class PersonalContainer extends React.PureComponent {
     this.props.actions.fetchStates(this.props.isCoinify)
   }
 
-  logEvent = val => {
-    this.props.analyticsActions.logEvent([...PERSONAL, val])
-  }
-
   selectAddress = (e, address) => {
     e.preventDefault()
     this.props.actions.selectAddress(address)
@@ -145,7 +140,6 @@ class PersonalContainer extends React.PureComponent {
       onPromptForEmailVerification={this.onPromptForEmailVerification}
       onAddressSelect={this.selectAddress}
       onCountrySelect={this.onCountryChange}
-      onFieldBlur={this.logEvent}
       onSubmit={handleSubmit}
     />
   )
@@ -186,7 +180,6 @@ const mapDispatchToProps = dispatch => ({
     { ...actions.components.identityVerification, ...actions.modules.profile },
     dispatch
   ),
-  analyticsActions: bindActionCreators(actions.analytics, dispatch),
   formActions: bindActionCreators(actions.form, dispatch)
 })
 

diff --git a/...ockchain-wallet-v4-frontend/src/modals/Exchange/IdentityVerification/Personal/template.js b/...ockchain-wallet-v4-frontend/src/modals/Exchange/IdentityVerification/Personal/template.js
@@ -165,7 +165,6 @@ const Personal = ({
   activeFieldError,
   onCountrySelect,
   onStateSelect,
-  onFieldBlur,
   onPromptForEmailVerification,
   handleSubmit,
   sendEmailVerification,
@@ -224,7 +223,6 @@ const Personal = ({
                             verificationSent={emailStep === EMAIL_STEPS.verify}
                             verified={emailVerified}
                             onVerificationSend={sendEmailVerification}
-                            onBlur={() => onFieldBlur('email')}
                             onUpdate={updateEmail}
                             onEdit={editEmail}
                             errorBottom
@@ -250,7 +248,6 @@ const Personal = ({
                           component={SelectBox}
                           menuPlacement='auto'
                           onChange={onCountrySelect}
-                          onBlur={() => onFieldBlur('country')}
                           label={
                             <FormattedMessage
                               id='components.selectboxcountry.label'
@@ -276,7 +273,6 @@ const Personal = ({
                             component={SelectBox}
                             menuPlacement='auto'
                             onChange={onStateSelect}
-                            onBlur={() => onFieldBlur('state')}
                             label={
                               <FormattedMessage
                                 id='identityverification.personal.label.state'
@@ -315,7 +311,6 @@ const Personal = ({
                                 name='firstName'
                                 validate={required}
                                 component={TextBox}
-                                onBlur={() => onFieldBlur('firstName')}
                                 errorBottom
                               />
                             </PersonalField>
@@ -330,7 +325,6 @@ const Personal = ({
                                 name='lastName'
                                 validate={required}
                                 component={TextBox}
-                                onBlur={() => onFieldBlur('lastName')}
                                 errorBottom
                               />
                             </PersonalField>
@@ -377,7 +371,6 @@ const Personal = ({
                             countryIsUS={countryIsUS}
                             parse={objectToDOB}
                             format={DOBToObject}
-                            onBlur={() => onFieldBlur('dob')}
                           />
                         </FormItem>
                         {activeField === 'dob' && !mobile && !tablet && (
@@ -422,7 +415,6 @@ const Personal = ({
                               errorBottom
                               validate={required}
                               component={TextBox}
-                              onBlur={() => onFieldBlur('line1')}
                             />
                           </FormItem>
                         </FaqFormGroup>
@@ -445,7 +437,6 @@ const Personal = ({
                               name='line2'
                               errorBottom
                               component={TextBox}
-                              onBlur={() => onFieldBlur('line2')}
                             />
                           </FormItem>
                         </FaqFormGroup>
@@ -462,7 +453,6 @@ const Personal = ({
                               errorBottom
                               validate={required}
                               component={TextBox}
-                              onBlur={() => onFieldBlur('city')}
                             />
                           </FormItem>
                         </FaqFormGroup>
@@ -480,7 +470,6 @@ const Personal = ({
                                   name='state'
                                   errorBottom
                                   countryCode={countryCode}
-                                  onBlur={() => onFieldBlur('state')}
                                   component={TextBox}
                                 />
                               </PersonalField>
@@ -502,7 +491,6 @@ const Personal = ({
                                 </Label>
                                 <Field
                                   name='postCode'
-                                  onBlur={() => onFieldBlur('postCode')}
                                   errorBottom
                                   validate={requiredZipCode}
                                   component={TextBox}