diff --git a/app/hub/Views/SideNavigationView/SideNavigationView.jsx b/app/hub/Views/SideNavigationView/SideNavigationView.jsx index b0aa74d8d..1e26d995c 100644 --- a/app/hub/Views/SideNavigationView/SideNavigationView.jsx +++ b/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 (
{ target="_blank" className={topClassNames} /> -
+
{menuItems.map(item => _renderMenuItem(item, disableNav))}
diff --git a/app/hub/Views/SideNavigationView/SideNavigationViewContainer.jsx b/app/hub/Views/SideNavigationView/SideNavigationViewContainer.jsx index 644f773b1..6ba4f00fa 100644 --- a/app/hub/Views/SideNavigationView/SideNavigationViewContainer.jsx +++ b/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 }, diff --git a/app/hub/index.jsx b/app/hub/index.jsx index 6e8f215ab..aa9e73e1d 100644 --- a/app/hub/index.jsx +++ b/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,6 +35,9 @@ 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 @@ -41,7 +45,7 @@ const store = createStore(); const Hub = () => ( - + diff --git a/manifest.json b/manifest.json index 0cc3b9ee0..5d66a00a0 100644 --- a/manifest.json +++ b/manifest.json @@ -114,5 +114,6 @@ "cliqz/offers-templates/reminder.html", "cliqz/offers-templates/checkout.html", "cliqz/offers-templates/control-center.html" - ] + ], + "debug": true } diff --git a/src/background.js b/src/background.js index 4df749520..acc30028c 100644 --- a/src/background.js +++ b/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 }); } diff --git a/src/classes/ConfData.js b/src/classes/ConfData.js index c542d5090..f50f64145 100644 --- a/src/classes/ConfData.js +++ b/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); diff --git a/src/classes/Metrics.js b/src/classes/Metrics.js index 2ebf6d2e6..2efe7b1a8 100644 --- a/src/classes/Metrics.js +++ b/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;