GH-2100, GH-2097: Onboarding test 2 (#603)

* Implement A/B test for hub with modified tabs

* Remove promo variant test, repurpose ping param

* Make comments and ternaries more clear

* Change param for A/B test

Co-authored-by: wlycdgr <ilya.zarembsky@gmail.com>

app/hub/Views/SideNavigationView/SideNavigationView.jsx

@@ -15,8 +15,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ClassNames from 'classnames';
 import { NavLink } from 'react-router-dom';
+import QueryString from 'query-string';
 import globals from '../../../../src/classes/Globals';
 
+// Flag to display alternate hub view (used for A/B testing ticket GH-2097)
+const ah = (QueryString.parse(window.location.search).ah === 'true') || false;
+
 const { GHOSTERY_BASE_URL } = globals;
 
 /**
@@ -97,6 +101,8 @@ const SideNavigationView = (props) => {
 		disabled: disableNav,
 	});
 
+	const menuClassNames = ClassNames(`SideNavigation__menu ${ah ? '' : 'flex-child-grow'} flex-container flex-dir-column`);
+
 	return (
 		<div className={containerClassNames}>
 			<a
@@ -106,7 +112,7 @@ const SideNavigationView = (props) => {
 				target="_blank"
 				className={topClassNames}
 			/>
-			<div className="SideNavigation__menu flex-child-grow flex-container flex-dir-column">
+			<div className={menuClassNames}>
 				{menuItems.map(item => _renderMenuItem(item, disableNav))}
 			</div>
 			<div className="SideNavigation__bottom flex-container flex-dir-column">

app/hub/Views/SideNavigationView/SideNavigationViewContainer.jsx

@@ -13,12 +13,16 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import QueryString from 'query-string';
 import SideNavigationView from './SideNavigationView';
 import globals from '../../../../src/classes/Globals';
 
 const { IS_CLIQZ, BROWSER_INFO } = globals;
 const IS_ANDROID = (BROWSER_INFO.os === 'android');
 
+// Flag to display alternate hub view (used for A/B testing ticket GH-2097)
+const ah = (QueryString.parse(window.location.search).ah === 'true') || false;
+
 /**
  * @class Implement the Side Navigation View for the Ghostery Hub
  * @extends Component
@@ -50,7 +54,10 @@ class SideNavigationViewContainer extends Component {
 		const { user, location } = this.props;
 		const disableRegEx = /^(\/setup(?!\/4$))|(\/tutorial(?!\/6$))/;
 
-		const menuItems = [
+		const menuItems = ah ? [
+			{ href: '/home', icon: 'home', text: t('hub_side_navigation_home') },
+			{ href: '/setup', icon: 'setup', text: t('customize_setup') },
+		] : [
 			{ href: '/home', icon: 'home', text: t('hub_side_navigation_home') },
 			{ href: '/', icon: 'shield', text: t('hub_side_navigation_upgrade_plan') },
 			{ href: '/setup', icon: 'setup', text: t('customize_setup') },
@@ -59,6 +66,7 @@ class SideNavigationViewContainer extends Component {
 			...((IS_CLIQZ || IS_ANDROID) ? [] : [{ href: '/rewards', icon: 'rewards', text: t('hub_side_navigation_rewards') }]),
 			...((IS_ANDROID) ? [] : [{ href: '/products', icon: 'products', text: t('hub_side_navigation_products') }])
 		];
+
 		const bottomItems = user ? [
 			{ id: 'email', href: `${globals.ACCOUNT_BASE_URL}/`, text: user.email },
 			{ id: 'logout', text: t('sign_out'), clickHandler: this._handleLogoutClick },

app/hub/index.jsx

@@ -17,6 +17,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { HashRouter as Router, Route } from 'react-router-dom';
 import { Provider } from 'react-redux';
+import QueryString from 'query-string';
 import createStore from './createStore';
 
 // Containers
@@ -34,14 +35,17 @@ import UpgradePlanView from './Views/UpgradePlanView';
 
 const store = createStore();
 
+// Flag to display alternate hub view (used for A/B testing ticket GH-2097)
+const ah = (QueryString.parse(window.location.search).ah === 'true') || false;
+
 /**
  * Top-Level Component for the Ghostery Hub
  * @memberof HubComponents
  */
 const Hub = () => (
 	<AppView>
 		<Route exact path="/" component={UpgradePlanView} />
-		<Route exact path="/home" component={HomeView} />
+		<Route exact path="/home" component={ah ? UpgradePlanView : HomeView} />
 		<Route path="/setup" component={SetupView} />
 		<Route path="/tutorial" component={TutorialView} />
 		<Route exact path="/plus" component={PlusView} />

manifest.json

@@ -114,5 +114,6 @@
 		"cliqz/offers-templates/reminder.html",
 		"cliqz/offers-templates/checkout.html",
 		"cliqz/offers-templates/control-center.html"
-	]
+	],
+	"debug": true
 }

src/background.js

@@ -1111,26 +1111,20 @@ function getAntitrackingTestConfig() {
 }
 
 /**
- * Set option for Hub promo A/B/C test based
+ * Set option for Hub Layout A/B test based
  * on the results returned from the abtest endpoint.
  * @memberOf Background
- *
- * @return {Object} 	Hub promotion configuration parameters
  */
-function setupHubPromoABTest() {
+function setupHubLayoutABTest() {
 	if (
 		!abtest.hasBeenFetched
-		|| conf.hub_promo_variant !== 'not_yet_set'
-	) {
-		return;
-	}
+		|| conf.hub_layout !== 'not_yet_set'
+	) { return; }
 
-	if (abtest.hasTest('hub_plain')) {
-		conf.hub_promo_variant = 'plain';
-	} else if (abtest.hasTest('hub_midnight')) {
-		conf.hub_promo_variant = 'midnight';
+	if (abtest.hasTest('hub_alternate')) {
+		conf.hub_layout = 'alternate';
 	} else {
-		conf.hub_promo_variant = 'upgrade';
+		conf.hub_layout = 'default';
 	}
 }
 
@@ -1155,7 +1149,7 @@ function setupABTest() {
 		cliqz.prefs.set('attrackBloomFilter', false);
 	}
 
-	setupHubPromoABTest();
+	setupHubLayoutABTest();
 }
 
 /**
@@ -1764,10 +1758,10 @@ function initializeGhosteryModules() {
 			// We need to do this after running scheduledTasks for the first time
 			// because of an A/B test that determines which promo variant is shown in the Hub on install
 			if (globals.JUST_INSTALLED) {
-				const route = ((conf.hub_promo_variant === 'upgrade' || conf.hub_promo_variant === 'not_yet_set') && !IS_ANDROID) ? '' : '#home';
-				const showPremiumPromoModal = (conf.hub_promo_variant === 'midnight' && !IS_ANDROID);
+				const showAlternateHub = conf.hub_layout === 'alternate';
+				const route = showAlternateHub ? '#home' : '';
 				chrome.tabs.create({
-					url: chrome.runtime.getURL(`./app/templates/hub.html?$justInstalled=true&pm=${showPremiumPromoModal}${route}`),
+					url: chrome.runtime.getURL(`./app/templates/hub.html?$justInstalled=true&ah=${showAlternateHub}${route}`),
 					active: true
 				});
 			}

src/classes/ConfData.js

@@ -116,7 +116,7 @@ class ConfData {
 			_initProperty('enable_smart_block', true);
 			_initProperty('expand_all_trackers', true);
 			_initProperty('hide_alert_trusted', false);
-			_initProperty('hub_promo_variant', 'not_yet_set');
+			_initProperty('hub_layout', 'not_yet_set');
 			_initProperty('ignore_first_party', true);
 			_initProperty('import_callout_dismissed', true);
 			_initProperty('insights_promo_modal_last_seen', 0);

src/classes/Metrics.js

@@ -369,8 +369,8 @@ class Metrics {
 			`&th=${encodeURIComponent(Metrics._getThemeValue().toString())}` +
 
 			// New parameters for Ghostery 8.5.2
-			// Hub Promo variant
-			`&hp=${encodeURIComponent(Metrics._getHubPromoVariant().toString())}` +
+			// Hub Layout View
+			`&t2=${encodeURIComponent(Metrics._getHubLayoutView().toString())}` +
 			// Subscription Interval
 			`&si=${encodeURIComponent(Metrics._getSubscriptionInterval().toString())}` +
 			// Product ID Parameter
@@ -534,20 +534,18 @@ class Metrics {
 	}
 
 	/**
-	 * Get the Int associated with the Hub promo variant shown on install
+	 * Get the Int associated with the Hub layout view shown on install
 	 * @private
-	 * @return {number} Int associated with the Hub promo variant
+	 * @return {number} Int associated with the Hub layout view
 	 */
-	static _getHubPromoVariant() {
-		const { hub_promo_variant } = conf;
+	static _getHubLayoutView() {
+		const { hub_layout } = conf;
 
-		switch (hub_promo_variant) {
-			case 'upgrade':
+		switch (hub_layout) {
+			case 'default':
 				return 1;
-			case 'plain':
+			case 'alternate':
 				return 2;
-			case 'midnight':
-				return 3;
 			case 'not_yet_set':
 			default:
 				return 0;