DCAR: Toggle Display Of Ad Placeholders In Development

[JamieB-gu]

By default we don't show the ad placeholders that are used to insert ads; we only display them if we're able to check with the native layer that the user is not premium.

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

Lines 130 to 155 in 8901550

	/**
	* Setup Ads
	*
	* After first render, and only after first render, check if the user has
	* the premium tier. If not, set up ads by looking for ad placeholder
	* elements in the page and storing them. These will be used to render
	* client-side ad slots.
	*/
	useEffect(() => {
	void getUserClient()
	.isPremium()
	.then((isPremium) => {
	if (!isPremium) {
	setAdPlaceholders(
	Array.from(
	document.getElementsByClassName(adPlaceholderClass),
	),
	);
	setRightAdPlaceholder(
	document.getElementsByClassName(
	rightAdsPlaceholderClass,
	)[0],
	);
	}
	});
	}, []);

As a result, when viewing DCAR in a browser for development purposes you will never see the ad placeholders, because there is no native layer to query.

However, sometimes it's useful to be able to see these placeholders outside of the app. For example, when interactive developers (Design, Visuals) are building interactives they would like to be able to see them, to make sure they can work around them correctly.

We discussed coming up with a mechanism for toggling the placeholders on and off for development purposes, possibly with a query parameter. Ideally this parameter would work in preview.

[petternitter]

Moving this to Art+Pub for triage given the context provided in the issue and recent/ongoing work on Interactives and preview of those; if no longer relevant pls do close this issue.