Merge pull request #739 from NastiaS/onboarding-analytics-integration

Onboarding analytics integration

src/components/GenuineCheck.js

@@ -85,7 +85,7 @@ class GenuineCheck extends PureComponent<Props> {
       .toPromise()
     const isGenuine = res === '0000'
     if (!isGenuine) {
-      return Promise.reject(new Error('Device not genuine')) // TODO: use custom error class
+      return Promise.reject(new DeviceNotGenuineError())
     }
     setDeviceGenuinity(device, true)
     return Promise.resolve(true)
@@ -142,11 +142,11 @@ class GenuineCheck extends PureComponent<Props> {
 
     return (
       <DeviceInteraction
+        {...props}
         waitBeforeSuccess={500}
         steps={steps}
         onSuccess={onSuccess}
         onFail={this.handleFail}
-        {...props}
       />
     )
   }

src/components/Onboarding/steps/Analytics.js

@@ -6,6 +6,8 @@ import { connect } from 'react-redux'
 import { saveSettings } from 'actions/settings'
 import Box from 'components/base/Box'
 import CheckBox from 'components/base/CheckBox'
+import TrackPage from 'analytics/TrackPage'
+import Track from 'analytics/Track'
 import { Title, Description, FixedTopContainer, StepContainerInner } from '../helperComponents'
 import OnboardingFooter from '../OnboardingFooter'
 
@@ -19,7 +21,7 @@ type State = {
 }
 
 const INITIAL_STATE = {
-  analyticsToggle: false,
+  analyticsToggle: true,
   sentryLogsToggle: true,
 }
 
@@ -46,11 +48,17 @@ class Analytics extends PureComponent<StepProps, State> {
   }
 
   render() {
-    const { nextStep, t } = this.props
+    const { nextStep, t, onboarding } = this.props
     const { analyticsToggle, sentryLogsToggle } = this.state
 
     return (
       <FixedTopContainer>
+        <TrackPage
+          category="Onboarding"
+          name="Analytics"
+          flowType={onboarding.flowType}
+          deviceType={onboarding.isLedgerNano ? 'Nano S' : 'Blue'}
+        />
         <StepContainerInner>
           <Title>{t('onboarding:analytics.title')}</Title>
           <Description>{t('onboarding:analytics.desc')}</Description>
@@ -61,6 +69,14 @@ class Analytics extends PureComponent<StepProps, State> {
                 <AnalyticsText>{t('onboarding:analytics.sentryLogs.desc')}</AnalyticsText>
               </Box>
               <Box justifyContent="center">
+                <Track
+                  onUpdate
+                  event={
+                    sentryLogsToggle
+                      ? 'Sentry Logs Enabled Onboarding'
+                      : 'Sentry Logs Disabled Onboarding'
+                  }
+                />
                 <CheckBox isChecked={sentryLogsToggle} onChange={this.handleSentryLogsToggle} />
               </Box>
             </Container>
@@ -70,6 +86,14 @@ class Analytics extends PureComponent<StepProps, State> {
                 <AnalyticsText>{t('onboarding:analytics.shareAnalytics.desc')}</AnalyticsText>
               </Box>
               <Box justifyContent="center">
+                <Track
+                  onUpdate
+                  event={
+                    analyticsToggle
+                      ? 'Analytics Enabled Onboarding'
+                      : 'Analytics Disabled Onboarding'
+                  }
+                />
                 <CheckBox isChecked={analyticsToggle} onChange={this.handleAnalyticsToggle} />
               </Box>
             </Container>

src/components/Onboarding/steps/Finish.js

@@ -8,6 +8,7 @@ import { i } from 'helpers/staticPath'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import ConfettiParty from 'components/ConfettiParty'
+import TrackPage from 'analytics/TrackPage'
 
 import IconCheckFull from 'icons/CheckFull'
 import IconSocialTwitter from 'icons/Twitter'
@@ -58,10 +59,16 @@ export default class Finish extends Component<StepProps, *> {
     this.setState({ emit: false })
   }
   render() {
-    const { finish, t } = this.props
+    const { finish, t, onboarding } = this.props
     const { emit } = this.state
     return (
       <Box sticky justifyContent="center">
+        <TrackPage
+          category="Onboarding"
+          name="Finish"
+          flowType={onboarding.flowType}
+          deviceType={onboarding.isLedgerNano ? 'Nano S' : 'Blue'}
+        />
         <ConfettiLayer>
           <ConfettiParty emit={emit} />
         </ConfettiLayer>

src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js

@@ -4,27 +4,35 @@ import React, { Fragment } from 'react'
 import { i } from 'helpers/staticPath'
 
 import type { T } from 'types/common'
+import type { OnboardingState } from 'reducers/onboarding'
 
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
+import TrackPage from 'analytics/TrackPage'
 
 import { Title, Description, OnboardingFooterWrapper } from '../../helperComponents'
 
 export function GenuineCheckErrorPage({
   redoGenuineCheck,
   contactSupport,
-  isLedgerNano,
+  onboarding,
   t,
 }: {
   redoGenuineCheck: () => void,
   contactSupport: () => void,
-  isLedgerNano: boolean | null,
+  onboarding: OnboardingState,
   t: T,
 }) {
   return (
     <Box sticky pt={50}>
+      <TrackPage
+        category="Onboarding"
+        name="Genuine Check Error Page"
+        flowType={onboarding.flowType}
+        deviceType={onboarding.isLedgerNano ? 'Nano S' : 'Blue'}
+      />
       <Box grow alignItems="center" justifyContent="center">
-        {isLedgerNano ? (
+        {onboarding.isLedgerNano ? (
           <Fragment>
             <Title>{t('onboarding:genuineCheck.errorPage.ledgerNano.title')}</Title>
             <Description>{t('onboarding:genuineCheck.errorPage.ledgerNano.desc')}</Description>

src/components/Onboarding/steps/GenuineCheck/GenuineCheckUnavailable.js

@@ -11,6 +11,7 @@ import IconCross from 'icons/Cross'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import TranslatedError from 'components/TranslatedError'
+import { track } from 'analytics/segment'
 
 import { OnboardingFooterWrapper } from '../../helperComponents'
 
@@ -29,7 +30,13 @@ export function GenuineCheckUnavailableFooter({
         {t('app:common.back')}
       </Button>
       <Box horizontal ml="auto">
-        <Button padded disabled={false} onClick={() => nextStep()} mx={2}>
+        <Button
+          padded
+          disabled={false}
+          event="Onboarding Skip Genuine Check"
+          onClick={() => nextStep()}
+          mx={2}
+        >
           {t('app:common.skipThisStep')}
         </Button>
         <Button padded onClick={nextStep} disabled primary>
@@ -51,7 +58,18 @@ export function GenuineCheckUnavailableMessage({
 }) {
   return (
     <Box align="center" flow={1} color={colors.alertRed}>
-      <FakeLink ff="Open Sans|Regular" fontSize={4} underline onClick={handleOpenGenuineCheckModal}>
+      <FakeLink
+        ff="Open Sans|Regular"
+        fontSize={4}
+        underline
+        onClick={() => {
+          handleOpenGenuineCheckModal()
+          track('Genuine Check Retry', {
+            flowType: onboarding.flowType,
+            deviceType: onboarding.isLedgerNano ? 'Nano S' : 'Blue',
+          })
+        }}
+      >
         {t('app:common.retry')}
       </FakeLink>
       <Box horizontal justify="center">

src/components/Onboarding/steps/GenuineCheck/index.js

@@ -9,6 +9,7 @@ import { colors } from 'styles/theme'
 import { updateGenuineCheck } from 'reducers/onboarding'
 
 import Box from 'components/base/Box'
+import TrackPage from 'analytics/TrackPage'
 import Button from 'components/base/Button'
 import RadioGroup from 'components/base/RadioGroup'
 import GenuineCheckModal from 'components/GenuineCheckModal'
@@ -91,7 +92,9 @@ class GenuineCheck extends PureComponent<StepProps, State> {
     }
   }
 
-  handleOpenGenuineCheckModal = () => this.setState({ isGenuineCheckModalOpened: true })
+  handleOpenGenuineCheckModal = () => {
+    this.setState({ isGenuineCheckModalOpened: true })
+  }
   handleCloseGenuineCheckModal = (cb?: Function) =>
     this.setState(
       state => ({ ...state, isGenuineCheckModalOpened: false }),
@@ -147,7 +150,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
       redoGenuineCheck={this.redoGenuineCheck}
       contactSupport={this.contactSupport}
       t={this.props.t}
-      isLedgerNano={this.props.onboarding.isLedgerNano}
+      onboarding={this.props.onboarding}
     />
   )
 
@@ -161,6 +164,12 @@ class GenuineCheck extends PureComponent<StepProps, State> {
 
     return (
       <FixedTopContainer>
+        <TrackPage
+          category="Onboarding"
+          name="Genuine Check"
+          flowType={onboarding.flowType}
+          deviceType={onboarding.isLedgerNano ? 'Nano S' : 'Blue'}
+        />
         <StepContainerInner>
           <Title>{t('onboarding:genuineCheck.title')}</Title>
           {onboarding.flowType === 'restoreDevice' ? (

src/components/Onboarding/steps/Init.js

@@ -7,6 +7,7 @@ import { colors } from 'styles/theme'
 import styled from 'styled-components'
 import { flowType } from 'reducers/onboarding'
 import Box from 'components/base/Box'
+import TrackPage from 'analytics/TrackPage'
 import IconPlus from 'icons/Plus'
 import IconRecover from 'icons/Recover'
 import IconCheck from 'icons/Check'
@@ -64,6 +65,7 @@ class Init extends PureComponent<StepProps, *> {
 
     return (
       <Box sticky justifyContent="center">
+        <TrackPage category="Onboarding" name="Init" />
         <Box align="center">
           <LiveLogo
             style={{ width: 64, height: 64 }}

src/components/Onboarding/steps/NoDevice.js

@@ -5,6 +5,7 @@ import { shell } from 'electron'
 import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
+import TrackPage from 'analytics/TrackPage'
 import IconCart from 'icons/Cart'
 import IconTruck from 'icons/Truck'
 import IconInfoCircle from 'icons/InfoCircle'
@@ -47,6 +48,7 @@ class NoDevice extends PureComponent<StepProps, *> {
 
     return (
       <Box sticky pt={130}>
+        <TrackPage category="Onboarding" name="No Device" />
         <Box grow alignItems="center">
           <LiveLogo
             style={{ width: 64, height: 64 }}

src/components/Onboarding/steps/SelectDevice.js

@@ -10,6 +10,8 @@ import { rgba } from 'styles/helpers'
 import { isLedgerNano } from 'reducers/onboarding'
 
 import Box from 'components/base/Box'
+import TrackPage from 'analytics/TrackPage'
+
 import IconCheckCirle from 'icons/Check'
 
 import { Title, Inner, FixedTopContainer, StepContainerInner } from '../helperComponents'
@@ -36,6 +38,7 @@ class SelectDevice extends PureComponent<StepProps, {}> {
     const { t, onboarding, jumpStep } = this.props
     return (
       <FixedTopContainer>
+        <TrackPage category="Onboarding" name="Select Device" flowType={onboarding.flowType} />
         <StepContainerInner>
           <Box mb={5}>
             <Title>{t('onboarding:selectDevice.title')}</Title>

src/components/Onboarding/steps/SelectPIN/index.js

@@ -3,6 +3,7 @@
 import React from 'react'
 
 import Box from 'components/base/Box'
+import TrackPage from 'analytics/TrackPage'
 
 import { Title, FixedTopContainer } from '../../helperComponents'
 import OnboardingFooter from '../../OnboardingFooter'
@@ -18,6 +19,12 @@ export default (props: StepProps) => {
 
   return (
     <FixedTopContainer>
+      <TrackPage
+        category="Onboarding"
+        name="Choose PIN"
+        flowType={onboarding.flowType}
+        deviceType={onboarding.isLedgerNano ? 'Nano S' : 'Blue'}
+      />
       {onboarding.flowType === 'restoreDevice' ? (
         <Box grow alignItems="center">
           <Title>{t('onboarding:selectPIN.restore.title')}</Title>

src/components/Onboarding/steps/SetPassword.js

@@ -8,6 +8,7 @@ import { setEncryptionKey } from 'helpers/db'
 
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
+import TrackPage from 'analytics/TrackPage'
 
 import IconChevronRight from 'icons/ChevronRight'
 
@@ -72,7 +73,7 @@ class SetPassword extends PureComponent<StepProps, State> {
   }
 
   render() {
-    const { nextStep, prevStep, t, settings } = this.props
+    const { nextStep, prevStep, t, settings, onboarding } = this.props
     const { newPassword, currentPassword, incorrectPassword, confirmPassword } = this.state
 
     const isPasswordEnabled = settings.password.isEnabled === true
@@ -97,6 +98,12 @@ class SetPassword extends PureComponent<StepProps, State> {
 
     return (
       <FixedTopContainer>
+        <TrackPage
+          category="Onboarding"
+          name="Set Password"
+          flowType={onboarding.flowType}
+          deviceType={onboarding.isLedgerNano ? 'Nano S' : 'Blue'}
+        />
         <StepContainerInner>
           <Fragment>
             <Box alignItems="center">
@@ -128,7 +135,13 @@ class SetPassword extends PureComponent<StepProps, State> {
             {t('app:common.back')}
           </Button>
           <Box horizontal ml="auto">
-            <Button padded disabled={false} onClick={() => nextStep()} mx={2}>
+            <Button
+              padded
+              event="Onboarding Skip Password"
+              onClick={() => nextStep()}
+              disabled={false}
+              mx={2}
+            >
               {t('app:common.skipThisStep')}
             </Button>
             <Button

src/components/Onboarding/steps/Start.js

@@ -5,6 +5,7 @@ import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
+import TrackPage from 'analytics/TrackPage'
 
 import type { StepProps } from '..'
 import { Title, LiveLogo } from '../helperComponents'
@@ -13,6 +14,7 @@ export default (props: StepProps) => {
   const { jumpStep, t } = props
   return (
     <Box sticky justifyContent="center">
+      <TrackPage category="Onboarding" name="Start" />
       <Box alignItems="center">
         <LiveLogo
           style={{ width: 80, height: 80 }}

src/components/Onboarding/steps/WriteSeed/index.js

@@ -3,6 +3,7 @@
 import React from 'react'
 
 import Box from 'components/base/Box'
+import TrackPage from 'analytics/TrackPage'
 
 import OnboardingFooter from '../../OnboardingFooter'
 
@@ -17,6 +18,12 @@ export default (props: StepProps) => {
 
   return (
     <FixedTopContainer>
+      <TrackPage
+        category="Onboarding"
+        name="Recovery Phase"
+        flowType={onboarding.flowType}
+        deviceType={onboarding.isLedgerNano ? 'Nano S' : 'Blue'}
+      />
       <Box grow alignItems="center">
         {onboarding.flowType === 'restoreDevice' ? (
           <WriteSeedRestore onboarding={onboarding} />

src/components/SettingsPage/sections/Profile.js

@@ -192,7 +192,10 @@ class TabProfile extends PureComponent<Props, State> {
             title={t('app:settings.profile.analytics')}
             desc={t('app:settings.profile.analyticsDesc')}
           >
-            <Track onUpdate event={settings.sentryLogs ? 'SentryEnabled' : 'SentryDisabled'} />
+            <Track
+              onUpdate
+              event={settings.shareAnalytics ? 'AnalyticsEnabled' : 'AnalyticsDisabled'}
+            />
             <CheckBox
               isChecked={settings.shareAnalytics}
               onChange={shareAnalytics => saveSettings({ shareAnalytics })}