Merge pull request #850 from NastiaS/integrate-analytics-send-flow

add tracking to the send modal

src/components/FeesField/GenericContainer.js

@@ -7,11 +7,15 @@ import LabelWithExternalIcon from 'components/base/LabelWithExternalIcon'
 import { translate } from 'react-i18next'
 import { openURL } from 'helpers/linking'
 import { urls } from 'config/support'
+import { track } from 'analytics/segment'
 
 export default translate()(({ children, t }: { children: React$Node, t: * }) => (
   <Box flow={1}>
     <LabelWithExternalIcon
-      onClick={() => openURL(urls.feesMoreInfo)}
+      onClick={() => {
+        openURL(urls.feesMoreInfo)
+        track('Send Flow Fees Help Requested')
+      }}
       label={t('app:send.steps.amount.fees')}
     />
     <Box horizontal flow={5}>

src/components/Onboarding/steps/Analytics.js

@@ -6,13 +6,13 @@ import { connect } from 'react-redux'
 import { saveSettings } from 'actions/settings'
 import Box from 'components/base/Box'
 import Switch from 'components/base/Switch'
+import FakeLink from 'components/base/FakeLink'
 import TrackPage from 'analytics/TrackPage'
 import Track from 'analytics/Track'
 import { openModal } from 'reducers/modals'
 import { MODAL_SHARE_ANALYTICS, MODAL_TECHNICAL_DATA } from 'config/constants'
 import ShareAnalytics from '../../modals/ShareAnalytics'
 import TechnicalData from '../../modals/TechnicalData'
-import FakeLink from '../../base/FakeLink'
 import { Title, Description, FixedTopContainer, StepContainerInner } from '../helperComponents'
 import OnboardingFooter from '../OnboardingFooter'
 

src/components/RecipientAddress/index.js

@@ -11,6 +11,7 @@ import { radii } from 'styles/theme'
 import QRCodeCameraPickerCanvas from 'components/QRCodeCameraPickerCanvas'
 import Box from 'components/base/Box'
 import Input from 'components/base/Input'
+import { track } from 'analytics/segment'
 
 import IconQrCode from 'icons/QrCode'
 
@@ -64,10 +65,13 @@ class RecipientAddress extends PureComponent<Props, State> {
     qrReaderOpened: false,
   }
 
-  handleClickQrCode = () =>
+  handleClickQrCode = () => {
+    const { qrReaderOpened } = this.state
     this.setState(prev => ({
       qrReaderOpened: !prev.qrReaderOpened,
     }))
+    !qrReaderOpened ? track('Send Flow QR Code Opened') : track('Send Flow QR Code Closed')
+  }
 
   handleOnPick = (code: string) => {
     const { address, ...rest } = decodeURIScheme(code)

src/components/base/LabelWithExternalIcon.js

@@ -8,7 +8,7 @@ import Box from 'components/base/Box'
 import IconExternalLink from 'icons/ExternalLink'
 
 // can add more dynamic options if needed
-export function LabelWithExternalIcon({ onClick, label }: { onClick: () => void, label: string }) {
+export function LabelWithExternalIcon({ onClick, label }: { onClick: ?() => void, label: string }) {
   return (
     <LabelWrapper onClick={onClick}>
       <span>{label}</span>

src/components/modals/Send/fields/RecipientField.js

@@ -8,6 +8,7 @@ import { urls } from 'config/support'
 import Box from 'components/base/Box'
 import LabelWithExternalIcon from 'components/base/LabelWithExternalIcon'
 import RecipientAddress from 'components/RecipientAddress'
+import { track } from 'analytics/segment'
 
 type Props<Transaction> = {
   t: T,
@@ -63,6 +64,7 @@ class RecipientField<Transaction> extends Component<Props<Transaction>, { isVali
 
   handleRecipientAddressHelp = () => {
     openURL(urls.recipientAddressInfo)
+    track('Send Flow Recipient Address Help Requested')
   }
   render() {
     const { bridge, account, transaction, t, autoFocus } = this.props

src/components/modals/Send/steps/01-step-amount.js

@@ -10,6 +10,7 @@ import FormattedVal from 'components/base/FormattedVal'
 import Text from 'components/base/Text'
 import CounterValue from 'components/CounterValue'
 import Spinner from 'components/base/Spinner'
+import TrackPage from 'analytics/TrackPage'
 
 import RecipientField from '../fields/RecipientField'
 import AmountField from '../fields/AmountField'
@@ -34,6 +35,7 @@ export default ({
 
   return (
     <Box flow={4}>
+      <TrackPage category="Send Flow" name="Step 1" />
       <Box flow={1}>
         <Label>{t('app:send.steps.amount.selectAccountDebit')}</Label>
         <SelectAccount autoFocus={!openedFromAccount} onChange={onChangeAccount} value={account} />

src/components/modals/Send/steps/02-step-connect-device.js

@@ -11,7 +11,7 @@ import type { StepProps } from '../index'
 export default function StepConnectDevice({ account, onChangeAppOpened }: StepProps<*>) {
   return (
     <Fragment>
-      <TrackPage category="Send" name="Step2" />
+      <TrackPage category="Send Flow" name="Step 2" />
       <EnsureDeviceApp
         account={account}
         waitBeforeSuccess={200}

src/components/modals/Send/steps/03-step-verification.js

@@ -33,7 +33,7 @@ export default class StepVerification extends PureComponent<StepProps<*>> {
     const { t } = this.props
     return (
       <Container>
-        <TrackPage category="Send" name="Step3" />
+        <TrackPage category="Send Flow" name="Step 3" />
         <WarnBox>{multiline(t('app:send.steps.verification.warning'))}</WarnBox>
         <Info>{t('app:send.steps.verification.body')}</Info>
         <DeviceConfirm />

src/components/modals/Send/steps/04-step-confirmation.js

@@ -60,7 +60,7 @@ export default function StepConfirmation({ t, optimisticOperation, error }: Step
   const translatedErrDesc = error ? <TranslatedError error={error} field="description" /> || '' : ''
   return (
     <Container>
-      <TrackPage category="Send" name="Step4" />
+      <TrackPage category="Send Flow" name="Step 4" />
       <span style={{ color: iconColor }}>
         <Icon size={43} />
       </span>
@@ -88,10 +88,10 @@ export function StepConfirmationFooter({
     <Fragment>
       <Button onClick={closeModal}>{t('app:common.close')}</Button>
       {optimisticOperation ? (
-        // TODO: actually go to operations details
         url ? (
           <Button
             ml={2}
+            event="Send Flow Step 4 View OpD Clicked"
             onClick={() => {
               closeModal()
               if (account && optimisticOperation) {