Deeply read right ab test (#1365)

* Add 650px to top of desktopRightRailAds when in deeplyReadMostViewed test variant

* lint

* Update article.ts

* Don't add extra height for paid content

* Fix typo

* Add changeset

---------

Co-authored-by: Dominik Lander <dominik.lander@guardian.co.uk>

.changeset/afraid-nails-speak.md

@@ -0,0 +1,5 @@
+---
+'@guardian/commercial': minor
+---
+
+Add Deeply Read 0% AB test

src/experiments/ab-tests.ts

@@ -1,4 +1,5 @@
 import type { ABTest } from '@guardian/ab-core';
+import { deeplyReadRightColumn } from './tests/deeply-read-right-column';
 import { mpuWhenNoEpic } from './tests/mpu-when-no-epic';
 
 /**
@@ -9,4 +10,5 @@ import { mpuWhenNoEpic } from './tests/mpu-when-no-epic';
 export const concurrentTests: readonly ABTest[] = [
 	// one test per line
 	mpuWhenNoEpic,
+	deeplyReadRightColumn,
 ];

src/experiments/tests/deeply-read-right-column.ts

@@ -0,0 +1,35 @@
+import type { ABTest } from '@guardian/ab-core';
+
+export const deeplyReadRightColumn: ABTest = {
+	id: 'DeeplyReadRightColumn',
+	author: '@dotcom-platform',
+	start: '2024-04-30',
+	expiry: '2024-07-31',
+	audience: 0 / 100,
+	audienceOffset: 0 / 100,
+	audienceCriteria: '',
+	successMeasure: 'Improved click though rate',
+	description:
+		'Test the impact of adding deeply read component to the right column.',
+	variants: [
+		{
+			id: 'most-viewed-only',
+			test: (): void => {
+				/* no-op */
+			},
+		},
+		{
+			id: 'deeply-read-and-most-viewed',
+			test: (): void => {
+				/* no-op */
+			},
+		},
+		{
+			id: 'deeply-read-only',
+			test: (): void => {
+				/* no-op */
+			},
+		},
+	],
+	canRun: () => true,
+};

src/insert/spacefinder/article.ts

@@ -17,6 +17,8 @@ import {
 	getCurrentBreakpoint,
 	getCurrentTweakpoint,
 } from 'lib/detect/detect-breakpoint';
+import { isInVariantSynchronous } from '../../experiments/ab';
+import { deeplyReadRightColumn } from '../../experiments/tests/deeply-read-right-column';
 import { waitForAdvert } from '../../lib/dfp/wait-for-advert';
 import fastdom from '../../utils/fastdom-promise';
 import { computeStickyHeights, insertHeightStyles } from '../sticky-inlines';
@@ -25,6 +27,14 @@ import { isInHighValueSection } from './utils';
 
 type SlotName = Parameters<typeof createAdSlot>[0];
 
+/**
+ * As estimation of the height of the most viewed island.
+ * This appears from desktop breakpoints on the right-hand side.
+ * Knowing the height of the element is useful when
+ * calculating where to place ads in the right column.
+ */
+const MOST_VIEWED_HEIGHT = 600;
+
 const articleBodySelector = '.article-body-commercial-selector';
 
 const isPaidContent = window.guardian.config.page.isPaidContent;
@@ -34,6 +44,11 @@ const hasImages = !!window.guardian.config.page.lightboxImages?.images.length;
 const hasShowcaseMainElement =
 	window.guardian.config.page.hasShowcaseMainElement;
 
+const isInDeeplyReadMostViewedVariant = isInVariantSynchronous(
+	deeplyReadRightColumn,
+	'deeply-read-and-most-viewed',
+);
+
 const minDistanceBetweenRightRailAds = 500;
 const minDistanceBetweenInlineAds = isInHighValueSection ? 500 : 750;
 
@@ -209,11 +224,12 @@ const addDesktopRightRailAds = (fillSlot: FillAdSlot): Promise<boolean> => {
 
 	/**
 	 * In special cases, inline2 can overlap the "Most viewed" island, so
-	 * we need to make an adjustment to move the inline2 further down the page.
+	 * we need to make an adjustment to move the inline2 further down the page
 	 */
-	if (isPaidContent) {
-		minAbove += 600;
+	if (isInDeeplyReadMostViewedVariant || isPaidContent) {
+		minAbove += MOST_VIEWED_HEIGHT;
 	}
+
 	// Some old articles don't have a main image, which means the first paragraph is much higher
 	if (!hasImages) {
 		minAbove += 600;