Merge pull request #1839 from blockchain/feat/wallet-tour-analytics

Added analytics to wallet tour

Author: Andrew Schneider

packages/blockchain-wallet-v4-frontend/src/data/analytics/model.js

@@ -154,10 +154,28 @@ export const AB_TESTS = {
 }
 
 export const GENERAL_EVENTS = {
-  SKIP_WALLET_TOUR: ['general', 'skip_wallet_tour'],
-  TAKE_WALLET_TOUR: ['general', 'take_wallet_tour'],
   VIEW_WHATS_NEW: ['general', 'view_whats_new'],
-  VIEW_FAQ: ['general', 'view_faq']
+  VIEW_FAQ: ['general', 'view_faq'],
+  WALLET_INTRO_DISMISSED: ['general', 'wallet_intro_tour', 'dismissed'],
+  WALLET_INTRO_OFFERED: ['general', 'wallet_intro_tour', 'offered'],
+  WALLET_INTRO_STARTED: ['general', 'wallet_intro_tour', 'started'],
+  WALLET_INTRO_PORTFOLIO_VIEWED: [
+    'general',
+    'wallet_intro_tour',
+    'step_view_portfolio'
+  ],
+  WALLET_INTRO_REQUEST_VIEWED: [
+    'general',
+    'wallet_intro_tour',
+    'step_view_request'
+  ],
+  WALLET_INTRO_SEND_VIEWED: ['general', 'wallet_intro_tour', 'step_view_send'],
+  WALLET_INTRO_SWAP_VIEWED: ['general', 'wallet_intro_tour', 'step_view_swap'],
+  WALLET_INTRO_BUYSELL_VIEWED: [
+    'general',
+    'wallet_intro_tour',
+    'step_view_buysell'
+  ]
 }
 
 export const ADS_EVENTS = {

packages/blockchain-wallet-v4-frontend/src/data/components/onboarding/sagas.js

@@ -74,7 +74,9 @@ export default () => {
         })
       )
       yield put(actions.core.kvStore.whatsNew.setHasSkippedWalletTour(true))
-      yield put(actions.analytics.logEvent(GENERAL_EVENTS.SKIP_WALLET_TOUR))
+      yield put(
+        actions.analytics.logEvent(GENERAL_EVENTS.WALLET_INTRO_DISMISSED)
+      )
       yield put(actions.modals.closeModal())
     } catch (e) {
       yield put(
@@ -88,7 +90,7 @@ export default () => {
       yield put(actions.modals.closeModal())
       yield put(actions.components.onboarding.setWalletTourVisibility(true))
       yield put(actions.core.kvStore.whatsNew.setHasSkippedWalletTour(false))
-      yield put(actions.analytics.logEvent(GENERAL_EVENTS.TAKE_WALLET_TOUR))
+      yield put(actions.analytics.logEvent(GENERAL_EVENTS.WALLET_INTRO_STARTED))
     } catch (e) {
       yield put(
         actions.logs.logErrorMessage(logLocation, 'takeWalletTourClicked', e)

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, TRANSACTION_EVENTS } = model.analytics
+const { DEEPLINK_EVENTS, GENERAL_EVENTS, TRANSACTION_EVENTS } = model.analytics
 
 export default ({ api }) => {
   const { TIERS, KYC_STATES, DOC_RESUBMISSION_REASONS } = model.profile
@@ -519,8 +519,9 @@ export default ({ api }) => {
       return yield put(actions.modals.showModal(airdropClaim.name))
     }
     if (walletTour) {
+      yield put(actions.modals.showModal(walletTour.name, walletTour.data))
       return yield put(
-        actions.modals.showModal(walletTour.name, walletTour.data)
+        actions.analytics.logEvent(GENERAL_EVENTS.WALLET_INTRO_OFFERED)
       )
     }
   }

packages/blockchain-wallet-v4-frontend/src/scenes/Home/model.js

@@ -1,8 +1,13 @@
-import React from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import React, { useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
 import styled, { keyframes } from 'styled-components'
 
 import { Button, Icon, Image, Text } from 'blockchain-info-components'
+import { actions, model } from 'data'
+
+const { GENERAL_EVENTS } = model.analytics
 
 const Scale = () => {
   return keyframes`
@@ -77,28 +82,55 @@ const CloseTourIcon = styled(Icon)`
   }
 `
 
-export const TourTooltip = props => {
+const TourTooltipComponent = ({
+  analyticsActions,
+  index,
+  isLastStep,
+  primaryProps,
+  skipProps,
+  step,
+  tooltipProps,
+  ...rest
+}) => {
+  useEffect(() => {
+    switch (index) {
+      case 0:
+        analyticsActions.logEvent(GENERAL_EVENTS.WALLET_INTRO_PORTFOLIO_VIEWED)
+        break
+      case 1:
+        analyticsActions.logEvent(GENERAL_EVENTS.WALLET_INTRO_REQUEST_VIEWED)
+        break
+      case 2:
+        analyticsActions.logEvent(GENERAL_EVENTS.WALLET_INTRO_SEND_VIEWED)
+        break
+      case 3:
+        analyticsActions.logEvent(GENERAL_EVENTS.WALLET_INTRO_SWAP_VIEWED)
+        break
+      case 4:
+        analyticsActions.logEvent(GENERAL_EVENTS.WALLET_INTRO_BUYSELL_VIEWED)
+        break
+    }
+  }, [index])
+
   return (
-    <TooltipBody {...props.tooltipProps}>
+    <TooltipBody {...tooltipProps}>
       <CloseTourIcon
         color='grey400'
         name='close'
         size='16px'
         weight={600}
-        {...props.skipProps}
+        {...skipProps}
       />
-      {props.step.content && (
-        <TooltipContent>{props.step.content}</TooltipContent>
-      )}
-      <TooltipFooter isLastStep={props.isLastStep}>
+      {step.content && <TooltipContent>{step.content}</TooltipContent>}
+      <TooltipFooter isLastStep={isLastStep}>
         <Button
           width='110px'
           height='48px'
           nature='primary'
           fullwidth
-          {...props.primaryProps}
+          {...primaryProps}
         >
-          {props.isLastStep ? (
+          {isLastStep ? (
             <FormattedMessage id='wallet.tour.finish' defaultMessage='Close' />
           ) : (
             <FormattedMessage id='wallet.tour.next' defaultMessage='Next' />
@@ -221,3 +253,12 @@ export const TOUR_STEPS = [
     disableBeacon: true
   }
 ]
+
+const mapDispatchToProps = dispatch => ({
+  analyticsActions: bindActionCreators(actions.analytics, dispatch)
+})
+
+export const TourTooltip = connect(
+  null,
+  mapDispatchToProps
+)(TourTooltipComponent)