GH-2097/t2-to-utm-content-fix

app/hub/Views/UpgradePlanView/UpgradePlanView.jsx

@@ -15,6 +15,7 @@ import React, { Fragment, useRef, useEffect } from 'react';
 import ClassNames from 'classnames';
 import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
+import QueryString from 'query-string';
 import { BASIC, PLUS, PREMIUM } from './UpgradePlanViewConstants';
 import globals from '../../../../src/classes/Globals';
 
@@ -113,8 +114,11 @@ const premiumAlreadyProtectedButton = () => (
 	</NavLink>
 );
 
+// Whether we are displaying this Upgrade Plan view in the alternate or the default Hub layout (as per the A/B test in ticket GH-2097)
+const ah = (QueryString.parse(window.location.search).ah === 'true') || false;
+
 /**
- * A React class component for rendering the Upgrade Plan View
+ * A React function component for rendering the Upgrade Plan View
  * @return {JSX} JSX for rendering the Upgrade Plan View of the Hub app
  * @memberof HubComponents
  */
@@ -178,7 +182,8 @@ const UpgradePlanView = (props) => {
 
 	const plusCTAButton = (position) => {
 		const utm_campaign = (position === 'top' ? 'c_1' : 'c_2');
-		const plusCheckoutLink = `${globals.CHECKOUT_BASE_URL}/plus?${params}&utm_campaign=intro_hub_${utm_campaign}`;
+		const utm_content = (ah ? '2' : '1');
+		const plusCheckoutLink = `${globals.CHECKOUT_BASE_URL}/plus?${params}&utm_campaign=intro_hub_${utm_campaign}&utm_content=${utm_content}`;
 
 		return (
 			<a className="button button-gold" href={plusCheckoutLink} target="_blank" rel="noopener noreferrer" title="Upgrade to Plus">
@@ -189,7 +194,8 @@ const UpgradePlanView = (props) => {
 
 	const premiumCTAButton = (position) => {
 		const utm_campaign = (position === 'top' ? 'c_3' : 'c_4');
-		const premiumCheckoutLink = `${globals.CHECKOUT_BASE_URL}/premium?${params}&utm_campaign=intro_hub_${utm_campaign}`;
+		const utm_content = (ah ? '2' : '1');
+		const premiumCheckoutLink = `${globals.CHECKOUT_BASE_URL}/premium?${params}&utm_campaign=intro_hub_${utm_campaign}&utm_content=${utm_content}`;
 
 		return (
 			<a className="button button-premium" href={premiumCheckoutLink} target="_blank" rel="noopener noreferrer" title="Upgrade to Premium">

src/classes/Metrics.js

@@ -296,11 +296,6 @@ class Metrics {
 			// AB tests enabled?
 			`&ts=${encodeURIComponent(conf.enable_abtests ? '1' : '0')}`;
 
-		if (conf.enable_abtests) {
-			// Hub Layout A/B test. Added in 8.5.3. GH-2097, GH-2100
-			metrics_url += `&t2=${encodeURIComponent(Metrics._getHubLayoutView().toString())}`;
-		}
-
 		if (CAMPAIGN_METRICS.includes(type)) {
 			// only send campaign attribution when necessary
 			metrics_url +=
@@ -451,25 +446,6 @@ class Metrics {
 		}
 	}
 
-	/**
-	 * Get the Int associated with the Hub layout view shown on install
-	 * @private
-	 * @return {number} Int associated with the Hub layout view
-	 */
-	static _getHubLayoutView() {
-		const { hub_layout } = conf;
-
-		switch (hub_layout) {
-			case 'default':
-				return 1;
-			case 'alternate':
-				return 2;
-			case 'not_yet_set':
-			default:
-				return 0;
-		}
-	}
-
 	/**
 	 * Get the Int associated with the users subscription interval
 	 * @private