Merge pull request #8095 from guardian/mxdvl/refactor-ad-targeting

Share AdTargeting between Islands

dotcom-rendering/index.d.ts

@@ -277,27 +277,6 @@ interface FENavType {
 
 type StageType = 'DEV' | 'CODE' | 'PROD';
 
-/**
- * BlocksRequest is the expected body format for POST requests made to /Blocks
- */
-interface FEBlocksRequest {
-	blocks: Block[];
-	format: FEFormat;
-	host?: string;
-	pageId: string;
-	webTitle: string;
-	ajaxUrl: string;
-	isAdFreeUser: boolean;
-	isSensitive: boolean;
-	edition: string;
-	section: string;
-	sharedAdTargeting: Record<string, unknown>;
-	adUnit: string;
-	videoDuration?: number;
-	switches: { [key: string]: boolean };
-	keywordIds: string;
-}
-
 /**
  * KeyEventsRequest is the expected body format for POST requests made to /KeyEvents
  */

dotcom-rendering/package.json

@@ -62,7 +62,7 @@
 		"@emotion/react": "11.10.5",
 		"@emotion/server": "11.10.0",
 		"@guardian/ab-core": "4.0.0",
-		"@guardian/atoms-rendering": "31.0.0",
+		"@guardian/atoms-rendering": "32.2.0",
 		"@guardian/braze-components": "13.3.0",
 		"@guardian/bridget": "2.3.0",
 		"@guardian/browserslist-config": "5.0.0",

dotcom-rendering/src/components/ArticleBody.tsx

@@ -20,7 +20,6 @@ type Props = {
 	format: ArticleFormat;
 	blocks: Block[];
 	pinnedPost?: Block;
-	adTargeting: AdTargeting;
 	host?: string;
 	pageId: string;
 	webTitle: string;
@@ -123,7 +122,6 @@ export const ArticleBody = ({
 	format,
 	blocks,
 	pinnedPost,
-	adTargeting,
 	host,
 	pageId,
 	webTitle,
@@ -183,7 +181,6 @@ export const ArticleBody = ({
 					format={format}
 					blocks={blocks}
 					pinnedPost={pinnedPost}
-					adTargeting={adTargeting}
 					host={host}
 					pageId={pageId}
 					webTitle={webTitle}
@@ -239,7 +236,6 @@ export const ArticleBody = ({
 				<ArticleRenderer
 					format={format}
 					elements={blocks[0] ? blocks[0].elements : []}
-					adTargeting={adTargeting}
 					host={host}
 					pageId={pageId}
 					webTitle={webTitle}

dotcom-rendering/src/components/ArticlePage.tsx

@@ -3,6 +3,7 @@ import { ArticleDesign } from '@guardian/libs';
 import { brandAlt, focusHalo, neutral } from '@guardian/source-foundations';
 import { StrictMode } from 'react';
 import { DecideLayout } from '../layouts/DecideLayout';
+import { buildAdTargeting } from '../lib/ad-targeting';
 import { filterABTestSwitches } from '../model/enhance-switches';
 import type { NavType } from '../model/extract-nav';
 import type { FEArticleType } from '../types/frontend';
@@ -16,6 +17,7 @@ import { Island } from './Island';
 import { Metrics } from './Metrics.importable';
 import { ReaderRevenueDev } from './ReaderRevenueDev.importable';
 import { SetABTests } from './SetABTests.importable';
+import { SetAdTargeting } from './SetAdTargeting.importable';
 import { SkipTo } from './SkipTo';
 
 interface BaseProps {
@@ -39,6 +41,16 @@ interface AppProps extends BaseProps {
  * */
 export const ArticlePage = (props: WebProps | AppProps) => {
 	const { article, format, renderingTarget } = props;
+
+	const adTargeting = buildAdTargeting({
+		isAdFreeUser: article.isAdFreeUser,
+		isSensitive: article.config.isSensitive,
+		edition: article.config.edition,
+		section: article.config.section,
+		sharedAdTargeting: article.config.sharedAdTargeting,
+		adUnit: article.config.adUnit,
+	});
+
 	return (
 		<StrictMode>
 			<Global
@@ -102,6 +114,9 @@ export const ArticlePage = (props: WebProps | AppProps) => {
 							isDev={!!article.config.isDev}
 						/>
 					</Island>
+					<Island clientOnly={true}>
+						<SetAdTargeting adTargeting={adTargeting} />
+					</Island>
 				</>
 			)}
 			{renderingTarget === 'Apps' ? (

dotcom-rendering/src/components/EnhancePinnedPost.importable.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 import { initPerf } from '../client/initPerf';
 import { submitComponentEvent } from '../client/ophan/ophan';
+import { isServer } from '../lib/isServer';
 import { useIsInView } from '../lib/useIsInView';
 
-const isServer = typeof window === 'undefined';
-
 const pinnedPost: HTMLElement | null = !isServer
 	? window.document.querySelector('[data-gu-marker=pinned-post]')
 	: null;

dotcom-rendering/src/components/FrontPage.tsx

@@ -2,6 +2,7 @@ import { css, Global } from '@emotion/react';
 import { brandAlt, focusHalo, neutral } from '@guardian/source-foundations';
 import { StrictMode } from 'react';
 import { FrontLayout } from '../layouts/FrontLayout';
+import { buildAdTargeting } from '../lib/ad-targeting';
 import { filterABTestSwitches } from '../model/enhance-switches';
 import type { NavType } from '../model/extract-nav';
 import type { DCRFrontType } from '../types/front';
@@ -12,6 +13,7 @@ import { FocusStyles } from './FocusStyles.importable';
 import { Island } from './Island';
 import { Metrics } from './Metrics.importable';
 import { SetABTests } from './SetABTests.importable';
+import { SetAdTargeting } from './SetAdTargeting.importable';
 import { ShowHideContainers } from './ShowHideContainers.importable';
 import { SkipTo } from './SkipTo';
 
@@ -29,6 +31,15 @@ type Props = {
  * @param {NAVType} props.NAV - The article JSON data
  * */
 export const FrontPage = ({ front, NAV }: Props) => {
+	const adTargeting = buildAdTargeting({
+		isAdFreeUser: front.isAdFreeUser,
+		isSensitive: front.config.isSensitive,
+		edition: front.config.edition,
+		section: front.config.section,
+		sharedAdTargeting: front.config.sharedAdTargeting,
+		adUnit: front.config.adUnit,
+	});
+
 	return (
 		<StrictMode>
 			<Global
@@ -75,6 +86,9 @@ export const FrontPage = ({ front, NAV }: Props) => {
 					isDev={!!front.config.isDev}
 				/>
 			</Island>
+			<Island clientOnly={true}>
+				<SetAdTargeting adTargeting={adTargeting} />
+			</Island>
 			<FrontLayout front={front} NAV={NAV} />
 		</StrictMode>
 	);

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

@@ -64,10 +64,6 @@ export const VideoAsSecond = () => {
 	return (
 		<Wrapper>
 			<LiveBlock
-				adTargeting={{
-					customParams: { sens: 'f', urlkw: [] },
-					adUnit: '',
-				}}
 				format={{
 					theme: ArticlePillar.News,
 					design: ArticleDesign.LiveBlog,
@@ -113,10 +109,6 @@ export const Title = () => {
 	return (
 		<Wrapper>
 			<LiveBlock
-				adTargeting={{
-					customParams: { sens: 'f', urlkw: [] },
-					adUnit: '',
-				}}
 				format={{
 					theme: ArticlePillar.News,
 					design: ArticleDesign.LiveBlog,
@@ -183,10 +175,6 @@ export const Video = () => {
 	return (
 		<Wrapper>
 			<LiveBlock
-				adTargeting={{
-					customParams: { sens: 'f', urlkw: [] },
-					adUnit: '',
-				}}
 				format={{
 					theme: ArticlePillar.News,
 					design: ArticleDesign.LiveBlog,
@@ -228,10 +216,6 @@ export const RichLink = () => {
 	return (
 		<Wrapper>
 			<LiveBlock
-				adTargeting={{
-					customParams: { sens: 'f', urlkw: [] },
-					adUnit: '',
-				}}
 				format={{
 					theme: ArticlePillar.News,
 					design: ArticleDesign.LiveBlog,
@@ -264,10 +248,6 @@ export const FirstImage = () => {
 	return (
 		<Wrapper>
 			<LiveBlock
-				adTargeting={{
-					customParams: { sens: 'f', urlkw: [] },
-					adUnit: '',
-				}}
 				format={{
 					theme: ArticlePillar.News,
 					design: ArticleDesign.LiveBlog,
@@ -326,10 +306,6 @@ export const ImageRoles = () => {
 	return (
 		<Wrapper>
 			<LiveBlock
-				adTargeting={{
-					customParams: { sens: 'f', urlkw: [] },
-					adUnit: '',
-				}}
 				format={{
 					theme: ArticlePillar.News,
 					design: ArticleDesign.LiveBlog,
@@ -377,10 +353,6 @@ export const Thumbnail = () => {
 	return (
 		<Wrapper>
 			<LiveBlock
-				adTargeting={{
-					customParams: { sens: 'f', urlkw: [] },
-					adUnit: '',
-				}}
 				format={{
 					theme: ArticlePillar.News,
 					design: ArticleDesign.LiveBlog,
@@ -414,10 +386,6 @@ export const ImageAndTitle = () => {
 	return (
 		<Wrapper>
 			<LiveBlock
-				adTargeting={{
-					customParams: { sens: 'f', urlkw: [] },
-					adUnit: '',
-				}}
 				format={{
 					theme: ArticlePillar.News,
 					design: ArticleDesign.LiveBlog,
@@ -447,10 +415,6 @@ export const Updated = () => {
 	return (
 		<Wrapper>
 			<LiveBlock
-				adTargeting={{
-					customParams: { sens: 'f', urlkw: [] },
-					adUnit: '',
-				}}
 				format={{
 					theme: ArticlePillar.News,
 					design: ArticleDesign.LiveBlog,
@@ -484,10 +448,6 @@ export const Contributor = () => {
 	return (
 		<Wrapper>
 			<LiveBlock
-				adTargeting={{
-					customParams: { sens: 'f', urlkw: [] },
-					adUnit: '',
-				}}
 				format={{
 					theme: ArticlePillar.News,
 					design: ArticleDesign.LiveBlog,
@@ -519,10 +479,6 @@ export const NoAvatar = () => {
 	return (
 		<Wrapper>
 			<LiveBlock
-				adTargeting={{
-					customParams: { sens: 'f', urlkw: [] },
-					adUnit: '',
-				}}
 				format={{
 					theme: ArticlePillar.Opinion,
 					design: ArticleDesign.LiveBlog,
@@ -557,10 +513,6 @@ export const TitleAndContributor = () => {
 	return (
 		<Wrapper>
 			<LiveBlock
-				adTargeting={{
-					customParams: { sens: 'f', urlkw: [] },
-					adUnit: '',
-				}}
 				format={{
 					theme: ArticlePillar.Sport,
 					design: ArticleDesign.LiveBlog,

dotcom-rendering/src/components/LiveBlock.tsx

@@ -10,7 +10,6 @@ type Props = {
 	block: Block;
 	pageId: string;
 	webTitle: string;
-	adTargeting: AdTargeting;
 	host?: string;
 	ajaxUrl: string;
 	isAdFreeUser: boolean;
@@ -26,7 +25,6 @@ export const LiveBlock = ({
 	block,
 	pageId,
 	webTitle,
-	adTargeting,
 	host = 'https://www.theguardian.com',
 	ajaxUrl,
 	isAdFreeUser,
@@ -68,7 +66,6 @@ export const LiveBlock = ({
 					key={index}
 					format={format}
 					element={element}
-					adTargeting={adTargeting}
 					ajaxUrl={ajaxUrl}
 					host={host}
 					index={index}

dotcom-rendering/src/components/LiveBlogBlocksAndAdverts.tsx

@@ -9,7 +9,6 @@ import { LiveBlock } from './LiveBlock';
 type Props = {
 	format: ArticleFormat;
 	blocks: Block[];
-	adTargeting: AdTargeting;
 	pinnedPost?: Block;
 	host?: string;
 	pageId: string;
@@ -26,7 +25,6 @@ export const LiveBlogBlocksAndAdverts = ({
 	format,
 	blocks,
 	pinnedPost,
-	adTargeting,
 	host,
 	pageId,
 	webTitle,
@@ -47,7 +45,6 @@ export const LiveBlogBlocksAndAdverts = ({
 						block={block}
 						pageId={pageId}
 						webTitle={webTitle}
-						adTargeting={adTargeting}
 						host={host}
 						ajaxUrl={ajaxUrl}
 						isLiveUpdate={isLiveUpdate}
@@ -93,7 +90,6 @@ export const LiveBlogBlocksAndAdverts = ({
 							block={block}
 							pageId={pageId}
 							webTitle={webTitle}
-							adTargeting={adTargeting}
 							host={host}
 							ajaxUrl={ajaxUrl}
 							isLiveUpdate={isLiveUpdate}

dotcom-rendering/src/components/Liveness.importable.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { initHydration } from '../client/islands/initHydration';
 import { updateTimeElement } from '../client/relativeTime/updateTimeElements';
+import { isServer } from '../lib/isServer';
 import { useApi } from '../lib/useApi';
 import { Toast } from './Toast';
 
@@ -19,8 +20,6 @@ type Props = {
 	selectedTopics?: Topic[];
 };
 
-const isServer = typeof window === 'undefined';
-
 const topOfBlog: Element | null = !isServer
 	? window.document.getElementById('top-of-blog')
 	: null;

dotcom-rendering/src/components/MainMedia.tsx

@@ -65,7 +65,6 @@ type Props = {
 	format: ArticleFormat;
 	elements: FEElement[];
 	hideCaption?: boolean;
-	adTargeting?: AdTargeting;
 	starRating?: number;
 	host?: string;
 	pageId: string;
@@ -80,7 +79,6 @@ export const MainMedia = ({
 	elements,
 	format,
 	hideCaption,
-	adTargeting,
 	starRating,
 	host,
 	pageId,
@@ -98,7 +96,6 @@ export const MainMedia = ({
 					key={index}
 					format={format}
 					element={element}
-					adTargeting={adTargeting}
 					ajaxUrl={ajaxUrl}
 					host={host}
 					index={index}