Send gb_onboarding and gb_onboarding_success pings. Refactor setSetup…

…Step to use OnboardingConstants. Add react-router to onboarding hub

app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx

@@ -55,7 +55,7 @@ class OnboardingViewContainer extends Component {
 
 		// TODO modify this as needed
 		const { actions, setup } = this.props;
-		actions.setSetupStep({ setup_step: 7 });
+		actions.setSetupStep({ setup_step: 7, origin: ONBOARDING });
 		actions.initSetupProps(setup);
 
 		// TODO modify this as needed
@@ -67,7 +67,7 @@ class OnboardingViewContainer extends Component {
 			this.state = {
 				sendMountActions: true
 			};
-			actions.setSetupStep({ setup_step: 8 });
+			actions.setSetupStep({ setup_step: 8, origin: ONBOARDING });
 			actions.setBlockingPolicy({ blockingPolicy: BLOCKING_POLICY_RECOMMENDED });
 			actions.setAntiTracking({ enable_anti_tracking: true }); // covered
 			actions.setAdBlock({ enable_ad_block: true }); // covered

app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx

@@ -13,6 +13,7 @@
 
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import { LOGIN, ONBOARDING } from '../../OnboardingView/OnboardingConstants';
 
 /**
  * A Functional React component for rendering the Browser Welcome View
@@ -27,7 +28,7 @@ const WelcomeView = (props) => {
 			<div className="WelcomeView__title">{t('ghostery_browser_hub_onboarding_welcome')}</div>
 			<div className="WelcomeView__subtitle">{t('ghostery_browser_hub_onboarding_lets_begin')}</div>
 			<img className="WelcomeView__rocketShip" src="/app/images/hub/welcome/rocketShip.png" />
-			<NavLink className="WelcomeView__ctaButton" to="/onboarding/1" onClick={() => setSetupStep({ setup_step: 1 })}>
+			<NavLink className="WelcomeView__ctaButton" to="/onboarding/1" onClick={() => setSetupStep({ setup_step: LOGIN, origin: ONBOARDING })}>
 				<span>{t('ghostery_browser_hub_onboarding_lets_do_this')}</span>
 			</NavLink>
 		</div>

app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx

@@ -18,6 +18,7 @@ import ClassNames from 'classnames';
 import Step1_LogInForm from '../Step1_LogInForm';
 import Step1_CreateAccountForm from '../Step1_CreateAccountForm';
 import globals from '../../../../../src/classes/Globals';
+import { BLOCK_SETTINGS, ONBOARDING } from '../../OnboardingView/OnboardingConstants';
 
 const SIGN_IN = 'SIGN_IN';
 const CREATE_ACCOUNT = 'CREATE_ACCOUNT';
@@ -94,7 +95,7 @@ const Step1_CreateAccountView = (props) => {
 		<div className="row align-center-middle">
 			<div className="columns small-10 medium-5" />
 			<div className="columns small-10 medium-5">
-				<NavLink className="Step1_CreateAccountView__skip" to="/onboarding/2" onClick={() => setSetupStep({ setup_step: 2 })}>
+				<NavLink className="Step1_CreateAccountView__skip" to="/onboarding/2" onClick={() => setSetupStep({ setup_step: BLOCK_SETTINGS, origin: ONBOARDING })}>
 					<span>{t('ghostery_browser_hub_onboarding_skip')}</span>
 				</NavLink>
 			</div>
@@ -106,7 +107,7 @@ const Step1_CreateAccountView = (props) => {
 			<div className="Step1_CreateAccountView__title">{t('ghostery_browser_hub_onboarding_you_are_signed_in_as')}</div>
 			<div className="Step1_CreateAccountView__email">{email}</div>
 			<div className="Step1_CreateAccountView__ctaButtonContainer">
-				<NavLink className="Step1_CreateAccountView__ctaButton" to="/onboarding/2" onClick={() => setSetupStep({ setup_step: 2 })}>
+				<NavLink className="Step1_CreateAccountView__ctaButton" to="/onboarding/2" onClick={() => setSetupStep({ setup_step: BLOCK_SETTINGS, origin: ONBOARDING })}>
 					<span>{t('next')}</span>
 				</NavLink>
 			</div>

app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx

@@ -16,6 +16,7 @@ import React, { Component } from 'react';
 // import Tooltip from '../../../../panel/components/Tooltip';
 import RadioButton from '../../../../shared-components/RadioButton/RadioButton';
 import ToggleCheckbox from '../../../../shared-components/ToggleCheckbox/ToggleCheckbox';
+import { CHOOSE_DEFAULT_SEARCH, ONBOARDING } from '../../OnboardingView/OnboardingConstants';
 
 /**
  * @class Implement the Block Settings View for the Ghostery Browser Hub
@@ -69,8 +70,7 @@ class BlockSettingsView extends Component {
 			const {
 				setAdBlock, setAntiTracking, setSmartBlocking, setBlockingPolicy, setSetupStep
 			} = actions;
-			// const { context } = this;
-			// const { history } = context;
+			const { history } = this.props;
 
 			setAdBlock(blockAds);
 			setAntiTracking(antiTracking);
@@ -91,8 +91,8 @@ class BlockSettingsView extends Component {
 					break;
 			}
 			setBlockingPolicy({ blockingPolicy });
-			setSetupStep({ setup_step: 3 });
-			// history.push('/onboarding/3');
+			setSetupStep({ setup_step: CHOOSE_DEFAULT_SEARCH, origin: ONBOARDING });
+			history.push('/onboarding/3');
 		} else {
 			const { setToast } = this.props;
 

app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx

@@ -18,6 +18,7 @@ import PropTypes from 'prop-types';
 import RadioButton from '../../../../shared-components/RadioButton';
 import globals from '../../../../../src/classes/Globals';
 import { BASIC, PLUS, PREMIUM } from '../../../../hub/Views/UpgradePlanView/UpgradePlanViewConstants';
+import { SUCCESS, ONBOARDING } from '../../OnboardingView/OnboardingConstants';
 
 const plusCheckoutLink = `${globals.CHECKOUT_BASE_URL}/en/plus`;
 const premiumCheckoutLink = `${globals.CHECKOUT_BASE_URL}/en/premium`;
@@ -270,7 +271,7 @@ class ChoosePlanView extends React.Component {
 					</div>
 				</div>
 				{showCTAButton && (
-					<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: 5 })}>
+					<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: SUCCESS, origin: ONBOARDING })}>
 						<span>{t('ghostery_browser_hub_onboarding_keep')}</span>
 					</NavLink>
 				)}
@@ -337,7 +338,7 @@ class ChoosePlanView extends React.Component {
 						{(isBasic && (
 							<div className="ChoosePlanView__ctaButtonContainer">
 								{(selectedPlan === BASIC) && (
-									<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: 5 })}>
+									<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: SUCCESS, origin: ONBOARDING })}>
 										<span>{t('next')}</span>
 									</NavLink>
 								)}
@@ -350,7 +351,7 @@ class ChoosePlanView extends React.Component {
 							</div>
 						))}
 						{isPremium && (
-							<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: 5 })}>
+							<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: SUCCESS, origin: ONBOARDING })}>
 								<span>{t('next')}</span>
 							</NavLink>
 						)}

app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx

@@ -18,13 +18,17 @@ import React from 'react';
  * @return {JSX} JSX for rendering the Browser Success View of the Hub app
  * @memberof HubComponents
  */
-const SuccessView = () => (
-	<div className="SuccessView__container">
-		<div className="SuccessView__title">{t('ghostery_browser_hub_onboarding_yay_youre_all_set')}</div>
-		<div className="SuccessView__subtitle">{`${t('ghostery_browser_hub_onboarding_start_browsing_the_web_with')} Ghostery`}</div>
-		<img className="SuccessView__ghosterySuite" src="/app/images/hub/success/ghostery-suite.png" />
-		<button className="SuccessView__ctaButton" type="button">{t('ghostery_browser_hub_onboarding_lets_search')}</button>
-	</div>
-);
+const SuccessView = (props) => {
+	const { actions } = props;
+	const { sendPing } = actions;
+	return (
+		<div className="SuccessView__container">
+			<div className="SuccessView__title">{t('ghostery_browser_hub_onboarding_yay_youre_all_set')}</div>
+			<div className="SuccessView__subtitle">{`${t('ghostery_browser_hub_onboarding_start_browsing_the_web_with')} Ghostery`}</div>
+			<img className="SuccessView__ghosterySuite" src="/app/images/hub/success/ghostery-suite.png" />
+			<button className="SuccessView__ctaButton" onClick={() => sendPing({ type: 'gb_onboarding_success' })} type="button">{t('ghostery_browser_hub_onboarding_lets_search')}</button>
+		</div>
+	);
+};
 
 export default SuccessView;

app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/index.js

@@ -12,5 +12,11 @@
  */
 
 import SuccessView from './SuccessView';
+import { buildReduxHOC } from '../../../../shared-hub/utils';
+import sendPing from '../../../../shared-hub/actions/MetricsActions';
 
-export default SuccessView;
+const actionCreators = {
+	sendPing
+};
+
+export default buildReduxHOC(null, actionCreators, SuccessView);

app/shared-hub/utils/index.js

@@ -20,6 +20,7 @@ import {
 	bindActionCreators
 } from 'redux';
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
 
 // Imports utilities from elsewhere in the codebase to reduce duplicate code
 import { log } from '../../../src/utils/common';
@@ -106,7 +107,7 @@ function buildReduxHOC(stateKeys, actionCreators, baseComponent) {
 			actions: bindActionCreators(actionCreators, dispatch)
 		});
 
-	return connect(mapStateToProps, mapDispatchToProps)(baseComponent);
+	return withRouter(connect(mapStateToProps, mapDispatchToProps)(baseComponent));
 }
 
 export {

src/background.js

@@ -557,6 +557,11 @@ function handleGhosteryHub(name, message, callback) {
 			} else {
 				({ setup_step } = setup_step);
 			}
+			const origin = message.origin || '';
+			if (origin === 'onboarding') {
+				conf.setup_step = message.setup_step;
+				metrics.ping('gb_onboarding');
+			}
 			callback({ setup_step });
 			break;
 		}

src/classes/Metrics.js

@@ -184,6 +184,12 @@ class Metrics {
 				this._sendReq(type, ['all']);
 				break;
 
+			// Ghostery Browser Hub - Ghostery 8.5.4+
+			case 'gb_onboarding':
+			case 'gb_onboarding_success':
+				this._sendReq(type, ['all']);
+				break;
+
 			// Uncaught Pings
 			default:
 				log(`metrics ping() error: ping name ${type} not found`);
@@ -285,7 +291,7 @@ class Metrics {
 			// Antitracking state
 			this._buildQueryPair('at', conf.enable_anti_tracking ? '1' : '0') +
 			// The deepest setup page reached by user during setup
-			this._buildQueryPair('ss', (conf.metrics.install_complete_all || type === 'install_complete') ? conf.setup_step.toString() : '-1') +
+			this._buildQueryPair('ss', Metrics._getSetupStep(type).toString()) +
 			// The number of times the user has gone through setup
 			this._buildQueryPair('sl', conf.setup_number.toString()) +
 			// Type of blocking selected during setup
@@ -393,6 +399,22 @@ class Metrics {
 		return 'gbe';
 	}
 
+	/**
+	 * Get the Setup step
+	 *
+	 * @private
+	 *
+	 * @return {number} The deepest setup page reached by user during setup
+	 */
+	static _getSetupStep(type) {
+		console.log('conf.setup_step', conf.setup_step);
+		if (conf.metrics.install_complete_all
+			|| type === 'install_complete'
+			|| type === 'gb_onboarding'
+			|| type === 'gb_onboarding_success') return conf.setup_step;
+		return -1;
+	}
+
 	/**
 	 * Calculate days since the last daily active ping.
 	 *