feat(Signup): set up mat. experiment

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

@@ -17,7 +17,7 @@ export const CUSTOM_VARIABLES = {
 //
 export const AB_TESTS = {
   PIT_SIDE_NAV_TEST3: 'PitSidenavTest3',
-  MIN_MAX_EXCHANGE: 'MinMaxExchange'
+  WALLET_PIT_SIGNUP: 'WalletPitSignup'
 }
 
 //

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

@@ -6,7 +6,8 @@ import { AB_TESTS } from './model'
 
 const INITIAL_STATE = {
   ab_tests: {
-    [AB_TESTS.PIT_SIDE_NAV_TEST3]: Remote.NotAsked
+    [AB_TESTS.PIT_SIDE_NAV_TEST3]: Remote.NotAsked,
+    [AB_TESTS.WALLET_PIT_SIGNUP]: Remote.NotAsked
   }
 }
 

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

@@ -1,5 +1,5 @@
 import { call, delay, put, select, take } from 'redux-saga/effects'
-import { add, equals, map, not, propOr, reduce, toLower } from 'ramda'
+import { add, equals, map, not, propOr, reduce } from 'ramda'
 import Bitcoin from 'bitcoinjs-lib'
 import BIP39 from 'bip39'
 
@@ -141,7 +141,7 @@ export default ({ api }) => {
       const { event } = action.payload
       yield call(postMessage, {
         method: 'trackEvent',
-        messageData: map(toLower, event)
+        messageData: event
       })
     } catch (e) {
       yield put(actions.logs.logErrorMessage(logLocation, 'logEvent', e))

packages/blockchain-wallet-v4-frontend/src/middleware/matomoMiddleware.js

@@ -23,8 +23,6 @@ const TYPE_WHITELIST = [
   'SHOW_MODAL'
 ]
 
-const _paq = window._paq || []
-
 const matomoMiddleware = () => store => next => action => {
   const eventCategory = prop('type', action)
   const nextAction =
@@ -39,7 +37,14 @@ const matomoMiddleware = () => store => next => action => {
   const logEvent = contains(action.type, TYPE_WHITELIST)
 
   if (logEvent) {
-    _paq.push(['trackEvent', eventCategory, eventAction, eventName])
+    const frame = document.getElementById('matomo-iframe')
+    frame.contentWindow.postMessage(
+      {
+        method: 'trackEvent',
+        messageData: [eventCategory, eventAction, eventName]
+      },
+      '*'
+    )
   }
 
   return next(action)

packages/blockchain-wallet-v4-frontend/src/providers/AnalyticsTracker/index.js

@@ -3,7 +3,9 @@ import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import styled from 'styled-components'
 
-import { actions, selectors } from 'data'
+import { actions, model, selectors } from 'data'
+
+const { AB_TESTS } = model.analytics
 
 const Iframe = styled.iframe`
   position: absolute;
@@ -15,11 +17,16 @@ const Iframe = styled.iframe`
 `
 
 class AnalyticsTracker extends React.PureComponent {
+  handleOnLoad = () => {
+    this.props.analyticsActions.createABTest(AB_TESTS.WALLET_PIT_SIGNUP)
+  }
+
   render () {
     const { domains, siteId } = this.props
     return (
       <Iframe
         id='matomo-iframe'
+        onLoad={this.handleOnLoad}
         src={domains.walletHelper + '/wallet-helper/matomo/#/?siteId=' + siteId}
       />
     )

packages/blockchain-wallet-v4-frontend/src/scenes/Register/PitCallout/index.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import styled, { keyframes, css } from 'styled-components'
+import { prop } from 'ramda'
 import { Icon, Image, Link, Text } from 'blockchain-info-components'
 import { Wrapper } from 'components/Public'
 
@@ -70,8 +71,14 @@ const GoLink = styled.div`
   }
 `
 
-const PitCallout = () => {
-  return (
+const PitCallout = ({ abTestR, domainsR }) => {
+  const domain = prop(
+    'thePit',
+    domainsR.getOrElse({ thePit: 'https://pit.blockchain.com' })
+  )
+  const campaign = abTestR.getOrElse('original')
+
+  return campaign === 'original' ? null : (
     <PitCalloutWrapper>
       <InnerWrapper>
         <CopyWrapper>
@@ -97,7 +104,7 @@ const PitCallout = () => {
           }}
         />
         <FooterLink
-          href='google.com'
+          href={`${domain}/?utm_source=web_wallet&utm_medium=wallet_signup&utm_campaign=${campaign}`}
           className='footer'
           target='_blank'
           rel='noopener noreferrer'

packages/blockchain-wallet-v4-frontend/src/scenes/Register/index.js

@@ -2,11 +2,45 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { formValueSelector } from 'redux-form'
+import { pathOr } from 'ramda'
+import { Remote } from 'blockchain-wallet-v4'
 
 import Register from './template'
-import { actions, selectors } from 'data'
+import { actions, model, selectors } from 'data'
+
+const { AB_TESTS } = model.analytics
 
 class RegisterContainer extends React.PureComponent {
+  componentDidMount () {
+    if (Remote.Success.is(this.props.abTestR)) return
+
+    // This line is done in AnalyticsTracker because we need to wait for
+    // the matomo iframe to mount. See ../../providers/AnalyticsTracker/index
+    // this.props.analyticsActions.createABTest(AB_TESTS.WALLET_PIT_SIGNUP)
+
+    window.addEventListener('message', this.receiveMatomoMessage, false)
+
+    // Fallback if a/b test can not be created
+    setTimeout(() => {
+      if (!Remote.Success.is(this.props.abTestR)) {
+        this.props.analyticsActions.createABTestSuccess(
+          AB_TESTS.WALLET_PIT_SIGNUP,
+          'original'
+        )
+      }
+    }, 2000)
+  }
+
+  receiveMatomoMessage = res => {
+    if (res.data.from === 'matomo') {
+      const result = pathOr('original', ['data', 'command'], res)
+      this.props.analyticsActions.createABTestSuccess(
+        AB_TESTS.WALLET_PIT_SIGNUP,
+        result
+      )
+    }
+  }
+
   onSubmit = () => {
     const { email, password, language } = this.props
     this.props.authActions.register(email, password, language)
@@ -20,12 +54,13 @@ class RegisterContainer extends React.PureComponent {
       Loading: () => true,
       NotAsked: () => false
     })
+
     const passwordLength = (password && password.length) || 0
 
     return (
       <Register
-        onSubmit={this.onSubmit}
         busy={busy}
+        onSubmit={this.onSubmit}
         password={password}
         passwordLength={passwordLength}
         {...this.props}
@@ -36,13 +71,16 @@ class RegisterContainer extends React.PureComponent {
 
 const mapStateToProps = state => ({
   data: selectors.auth.getRegistering(state),
+  domainsR: selectors.core.walletOptions.getDomains(state),
   language: selectors.preferences.getLanguage(state),
   email: formValueSelector('register')(state, 'email'),
   goals: selectors.goals.getGoals(state),
-  password: formValueSelector('register')(state, 'password') || ''
+  password: formValueSelector('register')(state, 'password') || '',
+  abTestR: selectors.analytics.selectAbTest(AB_TESTS.WALLET_PIT_SIGNUP)(state)
 })
 
 const mapDispatchToProps = dispatch => ({
+  analyticsActions: bindActionCreators(actions.analytics, dispatch),
   alertActions: bindActionCreators(actions.alerts, dispatch),
   authActions: bindActionCreators(actions.auth, dispatch)
 })

packages/blockchain-wallet-v4-frontend/src/scenes/Register/template.js

@@ -86,7 +86,7 @@ const validStrongPassword = value =>
       )
 
 const Register = props => {
-  const { handleSubmit, busy, invalid, password, passwordLength, goals } = props
+  const { busy, goals, handleSubmit, invalid, password, passwordLength } = props
   let passwordScore = has('zxcvbn', window) ? window.zxcvbn(password).score : 0
   const isLinkAccountGoal = find(propEq('name', 'linkAccount'), goals)
 
@@ -233,7 +233,7 @@ const Register = props => {
           </FormGroup>
         </RegisterForm>
       </PublicWrapper>
-      <PitCallout />
+      <PitCallout {...props} />
     </SignupWrapper>
   )
 }