GH-2072: Add subscription interval to ping params and change UpgradePlan CTA link params

app/hub/Views/UpgradePlanView/UpgradePlanView.jsx

@@ -166,20 +166,14 @@ const UpgradePlanView = (props) => {
 		mobileComparisonTableRef.current.scrollIntoView({ behavior: 'smooth' });
 	};
 
-	// UTM params
-	const signedIn = +!!user;
-	const subscriptionType = () => {
-		if (isPremium) return 'PREMIUM';
-		if (isPlus) return 'SUPPORTER';
-		return '-1';
-	};
-	// Interval is the query Param to show monthly/yearly pricing in checkout web, also used as a ping parameter
+	// UTM and Query Params
+	// interval is the query param to show monthly/yearly pricing in checkout web
 	const interval = show_yearly_prices ? 'year' : 'month';
-	const utmParams = `utm_source=gbe&signedIn=${signedIn}&st=${subscriptionType()}&subscription_interval=${interval}`;
+	const params = `utm_source=gbe&interval=${interval}`;
 
 	const plusCTAButton = (position) => {
-		const utm_campaign = position === 'top' ? 'c_1' : 'c_2';
-		const plusCheckoutLink = `${globals.CHECKOUT_BASE_URL}/plus?${utmParams}&utm_campaign=intro_hub_${utm_campaign}`;
+		const utm_campaign = (position === 'top' ? 'c_1' : 'c_2');
+		const plusCheckoutLink = `${globals.CHECKOUT_BASE_URL}/plus?${params}&utm_campaign=intro_hub_${utm_campaign}`;
 
 		return (
 			<a className="button button-gold" href={plusCheckoutLink} target="_blank" rel="noopener noreferrer" title="Upgrade to Plus">
@@ -189,8 +183,8 @@ const UpgradePlanView = (props) => {
 	};
 
 	const premiumCTAButton = (position) => {
-		const utm_campaign = position === 'top' ? 'c_3' : 'c_4';
-		const premiumCheckoutLink = `${globals.CHECKOUT_BASE_URL}/premium?${utmParams}&utm_campaign=intro_hub_${utm_campaign}`;
+		const utm_campaign = (position === 'top' ? 'c_3' : 'c_4');
+		const premiumCheckoutLink = `${globals.CHECKOUT_BASE_URL}/premium?${params}&utm_campaign=intro_hub_${utm_campaign}`;
 
 		return (
 			<a className="button button-premium" href={premiumCheckoutLink} target="_blank" rel="noopener noreferrer" title="Upgrade to Premium">

src/classes/Metrics.js

@@ -370,7 +370,9 @@ class Metrics {
 
 			// New parameter for Ghostery 8.5.2
 			// Hub Promo variant
-			`&hp=${encodeURIComponent(Metrics._getHubPromoVariant().toString())}`;
+			`&hp=${encodeURIComponent(Metrics._getHubPromoVariant().toString())}` +
+			// Subscription Interval
+			`&subscription_interval=${encodeURIComponent(Metrics._getSubscriptionInterval().toString())}`;
 
 		if (CAMPAIGN_METRICS.includes(type)) {
 			// only send campaign attribution when necessary
@@ -550,6 +552,24 @@ class Metrics {
 		}
 	}
 
+	/**
+	 * Get the Int associated with the users subscription interval
+	 * @private
+	 * @return {number} String associated with the users subscription interval
+	 */
+	static _getSubscriptionInterval() {
+		const subscriptionInterval = conf && conf.account && conf.account.subscriptionData && conf.account.subscriptionData.planInterval;
+
+		switch (subscriptionInterval) {
+			case 'month':
+				return 1;
+			case 'year':
+				return 2;
+			default:
+				return 0;
+		}
+	}
+
 	/**
 	 * Calculate remaining scheduled time for a ping
 	 *