Merge pull request #15328 from guardian/sa-preferred-source-100

Roll out Google Preferred Source button to 100% of audience

Author: SiAdcock

ab-testing/config/abTests.ts

@@ -81,18 +81,6 @@ const ABTests: ABTest[] = [
 		groups: ["true"],
 		shouldForceMetricsCollection: false,
 	},
-	{
-		name: "webex-preferred-source",
-		description:
-			"Testing the Preferred Source on Google button in the meta section of articles",
-		owners: ["dotcom.platform@theguardian.com"],
-		expirationDate: "2026-02-25",
-		type: "server",
-		status: "ON",
-		audienceSize: 20 / 100,
-		audienceSpace: "A",
-		groups: ["control", "prefer", "add"],
-	},
 	{
 		name: "commercial-mobile-inline1-halfpage",
 		description:

dotcom-rendering/src/components/ArticleMeta.web.tsx

@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import { between, from, space, until } from '@guardian/source/foundations';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import type { CSSProperties } from 'react';
-import { preferredSourceExperiment } from '../experiments/preferredSource';
 import type { FEArticle } from '../frontend/feArticle';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import {
@@ -13,8 +12,8 @@ import {
 } from '../lib/articleFormat';
 import { getAudioData } from '../lib/audio-data';
 import { getSoleContributor } from '../lib/byline';
-import { useBetaAB } from '../lib/useAB';
 import { palette as themePalette } from '../palette';
+import { hasPreferredSourceButton } from '../preferredSource';
 import type { Branding as BrandingType } from '../types/branding';
 import type { FEElement } from '../types/content';
 import type { Podcast, TagType } from '../types/tag';
@@ -343,12 +342,10 @@ export const ArticleMeta = ({
 	mainMediaElements,
 	crossword,
 }: Props) => {
-	const abTests = useBetaAB();
 	const { renderingTarget } = useConfig();
-	const preferredSource = preferredSourceExperiment(
+	const showPreferredSource = hasPreferredSourceButton(
 		renderingTarget,
 		format,
-		abTests,
 	);
 	const soleContributor = getSoleContributor(tags, byline);
 	const authorName = soleContributor?.title ?? 'Author Image';
@@ -446,7 +443,7 @@ export const ArticleMeta = ({
 				<div
 					data-print-layout="hide"
 					css={metaFlex}
-					style={preferredSourceMetaFlex(preferredSource.hasButton)}
+					style={preferredSourceMetaFlex(showPreferredSource)}
 				>
 					{renderingTarget === 'Web' && (
 						<div
@@ -464,7 +461,7 @@ export const ArticleMeta = ({
 									),
 							]}
 							style={preferredSourceMetaExtras(
-								preferredSource.hasButton,
+								showPreferredSource,
 							)}
 						>
 							<Island
@@ -518,9 +515,7 @@ export const ArticleMeta = ({
 						</div>
 					</div>
 				</div>
-				{preferredSource.hasButton ? (
-					<PreferredSourceButton kind={preferredSource.kind} />
-				) : null}
+				{showPreferredSource ? <PreferredSourceButton /> : null}
 			</div>
 		</div>
 	);

dotcom-rendering/src/components/PreferredSourceButton.stories.tsx

@@ -12,10 +12,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const VariantA = {
-	args: {
-		kind: 'prefer',
-	},
+export const Default = {
 	parameters: {
 		chromatic: {
 			modes: {
@@ -24,16 +21,3 @@ export const VariantA = {
 		},
 	},
 } satisfies Story;
-
-export const VariantB = {
-	args: {
-		kind: 'add',
-	},
-	parameters: {
-		chromatic: {
-			modes: {
-				'vertical leftCol': allModes['vertical leftCol'],
-			},
-		},
-	},
-} satisfies Story;

dotcom-rendering/src/components/PreferredSourceButton.tsx

@@ -6,21 +6,16 @@ import {
 	textSans14Object,
 } from '@guardian/source/foundations';
 import { LinkButton, SvgGoogleBrand } from '@guardian/source/react-components';
-import type { ButtonKind } from '../experiments/preferredSource';
 import { palette } from '../palette';
 
-type Props = {
-	kind: ButtonKind;
-};
-
-export const PreferredSourceButton = ({ kind }: Props) => (
+export const PreferredSourceButton = () => (
 	<LinkButton
 		priority="tertiary"
 		icon={<SvgGoogleBrand />}
 		size="small"
 		href="https://www.google.com/preferences/source?q=theguardian.com"
-		data-component={`preferred-source-button-${kind}`}
-		data-link-name={`preferred-source-button-${kind}`}
+		data-component={`preferred-source-button-prefer`}
+		data-link-name={`preferred-source-button-prefer`}
 		cssOverrides={css({
 			...textSans14Object,
 			padding: '8px 12px 10px',
@@ -52,15 +47,6 @@ export const PreferredSourceButton = ({ kind }: Props) => (
 			backgroundTertiaryHover: palette('--preferred-source-button-hover'),
 		}}
 	>
-		{copy(kind)}
+		{'Prefer the Guardian on Google'}
 	</LinkButton>
 );
-
-const copy = (kind: Props['kind']): string => {
-	switch (kind) {
-		case 'prefer':
-			return 'Prefer the Guardian on Google';
-		case 'add':
-			return 'Add the Guardian on Google';
-	}
-};

dotcom-rendering/src/experiments/preferredSource.ts

@@ -0,0 +1,45 @@
+import {
+	ArticleDesign,
+	type ArticleFormat,
+	ArticleSpecial,
+} from './lib/articleFormat';
+import type { RenderingTarget } from './types/renderingTarget';
+
+export const hasPreferredSourceButton = (
+	renderingTarget: RenderingTarget,
+	format: ArticleFormat,
+): boolean => {
+	if (renderingTarget !== 'Web') {
+		return false;
+	}
+
+	switch (format.design) {
+		case ArticleDesign.Analysis:
+		case ArticleDesign.Audio:
+		case ArticleDesign.Comment:
+		case ArticleDesign.DeadBlog:
+		case ArticleDesign.Editorial:
+		case ArticleDesign.FullPageInteractive:
+		case ArticleDesign.Gallery:
+		case ArticleDesign.Interactive:
+		case ArticleDesign.Letter:
+		case ArticleDesign.LiveBlog:
+		case ArticleDesign.NewsletterSignup:
+		case ArticleDesign.Picture:
+		case ArticleDesign.Video:
+			return false;
+		default:
+			break;
+	}
+
+	switch (format.theme) {
+		case ArticleSpecial.Labs:
+		case ArticleSpecial.SpecialReport:
+		case ArticleSpecial.SpecialReportAlt:
+			return false;
+		default:
+			break;
+	}
+
+	return true;
+};