From 060642b9ce644c366aaf5155a3a5c324d34574e5 Mon Sep 17 00:00:00 2001
From: Daniel Clifton
 <110032454+DanielCliftonGuardian@users.noreply.github.com>
Date: Thu, 16 May 2024 14:51:50 +0100
Subject: [PATCH] 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              |  5 +++
 src/experiments/ab-tests.ts                   |  2 ++
 .../tests/deeply-read-right-column.ts         | 35 +++++++++++++++++++
 src/insert/spacefinder/article.ts             | 22 ++++++++++--
 4 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/afraid-nails-speak.md
 create mode 100644 src/experiments/tests/deeply-read-right-column.ts

diff --git a/.changeset/afraid-nails-speak.md b/.changeset/afraid-nails-speak.md
new file mode 100644
index 000000000..0360101a1
--- /dev/null
+++ b/.changeset/afraid-nails-speak.md
@@ -0,0 +1,5 @@
+---
+'@guardian/commercial': minor
+---
+
+Add Deeply Read 0% AB test
diff --git a/src/experiments/ab-tests.ts b/src/experiments/ab-tests.ts
index f0ba76467..ddf8227b8 100644
--- a/src/experiments/ab-tests.ts
+++ b/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,
 ];
diff --git a/src/experiments/tests/deeply-read-right-column.ts b/src/experiments/tests/deeply-read-right-column.ts
new file mode 100644
index 000000000..564c67380
--- /dev/null
+++ b/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,
+};
diff --git a/src/insert/spacefinder/article.ts b/src/insert/spacefinder/article.ts
index 57f59c1bc..d9ef0f14d 100644
--- a/src/insert/spacefinder/article.ts
+++ b/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;