feat(adTargeting): use SWR to share targetting

This simplifies the logic of handling ad targetting across all Islands by setting it once via SWR.
guardian · Jun 30, 2023 · f2538d7 · f2538d7
1 parent ed0e66f
commit f2538d7
Show file tree

Hide file tree

Showing 24 changed files with 93 additions and 212 deletions.
diff --git a/dotcom-rendering/src/components/ArticleBody.tsx b/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}

diff --git a/dotcom-rendering/src/components/ArticlePage.tsx b/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' ? (

diff --git a/dotcom-rendering/src/components/FrontPage.tsx b/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>
 	);

diff --git a/dotcom-rendering/src/components/LiveBlock.stories.tsx b/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,

diff --git a/dotcom-rendering/src/components/LiveBlock.tsx b/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}

diff --git a/dotcom-rendering/src/components/LiveBlogBlocksAndAdverts.tsx b/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}

diff --git a/dotcom-rendering/src/components/MainMedia.tsx b/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}