onboarding analytics for visiting pages and some events wip

src/components/Onboarding/steps/Analytics.js

@@ -6,6 +6,7 @@ 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 { Title, Description, FixedTopContainer, StepContainerInner } from '../helperComponents'
 import OnboardingFooter from '../OnboardingFooter'
 
@@ -19,7 +20,7 @@ type State = {
 }
 
 const INITIAL_STATE = {
-  analyticsToggle: false,
+  analyticsToggle: true,
   sentryLogsToggle: true,
 }
 
@@ -46,11 +47,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>

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,8 @@ 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/Track'
+import { track } from 'analytics/segment'
 
 import { OnboardingFooterWrapper } from '../../helperComponents'
 
@@ -18,10 +20,12 @@ export function GenuineCheckUnavailableFooter({
   prevStep,
   nextStep,
   t,
+  onboarding,
 }: {
   prevStep: () => void,
   nextStep: () => void,
   t: T,
+  onboarding: OnboardingState,
 }) {
   return (
     <OnboardingFooterWrapper>
@@ -29,7 +33,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="Skip Genuine Check"
+          onClick={() => nextStep()}
+          mx={2}
+        >
           {t('app:common.skipThisStep')}
         </Button>
         <Button padded onClick={nextStep} disabled primary>
@@ -51,7 +61,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 Unavailable 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' ? (
@@ -250,7 +259,12 @@ class GenuineCheck extends PureComponent<StepProps, State> {
           </Box>
         </StepContainerInner>
         {genuine.genuineCheckUnavailable ? (
-          <GenuineCheckUnavailableFooter nextStep={nextStep} prevStep={prevStep} t={t} />
+          <GenuineCheckUnavailableFooter
+            nextStep={nextStep}
+            prevStep={prevStep}
+            t={t}
+            onboarding={onboarding}
+          />
         ) : (
           <OnboardingFooter
             t={t}

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">

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} />