feat: Ad Targeting – Viewport (#424)

Includes values related to the viewport:
- breakpoint (deprecated?)
- whether a CMP banner will show
- size of page skin

src/targeting/viewport.spec.ts

@@ -0,0 +1,59 @@
+import type { ViewportTargeting } from './viewport';
+import { getViewportTargeting } from './viewport';
+
+describe('Viewport targeting', () => {
+	test('No CMP banner will show', () => {
+		const expected: ViewportTargeting = {
+			bp: 'desktop',
+			inskin: 't',
+			skinsize: 's',
+		};
+		const targeting = getViewportTargeting(1280, false);
+		expect(targeting).toMatchObject(expected);
+	});
+
+	test('No CMP will show', () => {
+		const expected: ViewportTargeting = {
+			bp: 'desktop',
+			inskin: 'f',
+			skinsize: 's',
+		};
+		const targeting = getViewportTargeting(1280, true);
+		expect(targeting).toMatchObject(expected);
+	});
+
+	const windowWidths: Array<
+		[number, ViewportTargeting['bp'], ViewportTargeting['skinsize']]
+	> = [
+		[320, 'mobile', 's'],
+		[640, 'mobile', 's'],
+		[739, 'mobile', 's'],
+
+		[750, 'tablet', 's'],
+		[960, 'tablet', 's'],
+
+		[1024, 'desktop', 's'],
+		[1280, 'desktop', 's'],
+		[1440, 'desktop', 's'],
+		[1559, 'desktop', 's'],
+
+		[1560, 'desktop', 'l'],
+		[1680, 'desktop', 'l'],
+		[1920, 'desktop', 'l'],
+		[2560, 'desktop', 'l'],
+	];
+
+	test.each(windowWidths)(
+		'Screen size %f => bp:%s, skinsize:%s',
+		(windowWidth, bp, skinsize) => {
+			const expected: ViewportTargeting = {
+				inskin: 't',
+				bp,
+				skinsize,
+			};
+
+			const targeting = getViewportTargeting(windowWidth, false);
+			expect(targeting).toMatchObject(expected);
+		},
+	);
+});

src/targeting/viewport.ts

@@ -0,0 +1,70 @@
+import type { False, True } from '../types';
+
+/* -- Types -- */
+
+/**
+ * Viewport Targeting
+ *
+ * Includes values related to the viewport:
+ * - breakpoint (deprecated?)
+ * - whether a CMP banner will show
+ * - size of page skin
+ */
+export type ViewportTargeting = {
+	/**
+	 * **B**reak**p**oint – [see on Ad Manager][gam]
+	 *
+	 * Type: _Predefined_
+	 *
+	 * TODO: remove 'wide'
+	 *
+	 * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=180327
+	 */
+	bp: 'mobile' | 'tablet' | 'desktop';
+
+	/**
+	 * InSkin (CMP Banner shown) – [see on Ad Manager][gam]
+	 *
+	 * Australia-specific (via Bonzai?)
+	 *
+	 * Type: _Predefined_
+	 *
+	 * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=11916570
+	 * */
+	inskin: True | False;
+
+	/**
+	 * **Skin size** – [see on Ad Manager][gam]
+	 *
+	 * Large or Small. Used for InSkin page skins
+	 *
+	 * Type: _Predefined_
+	 *
+	 * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=12312030
+	 */
+	skinsize: 'l' | 's';
+};
+
+/* -- Methods -- */
+
+const findBreakpoint = (width: number): ViewportTargeting['bp'] => {
+	if (width >= 980) return 'desktop';
+	if (width >= 740) return 'tablet';
+	return 'mobile';
+};
+
+/* -- Targeting -- */
+
+export const getViewportTargeting = (
+	viewPortWidth: number,
+	cmpBannerWillShow: boolean,
+): ViewportTargeting => {
+	// Don’t show inskin if if a privacy message will be shown
+	const inskin = cmpBannerWillShow ? 'f' : 't';
+
+	return {
+		bp: findBreakpoint(viewPortWidth),
+		skinsize: viewPortWidth >= 1560 ? 'l' : 's',
+		inskin,
+	};
+};

src/types.ts

@@ -72,3 +72,8 @@ export type AdsConfigEnabled =
 export type AdsConfig = AdsConfigEnabled | AdsConfigDisabled;
 
 export type AdTargetingBuilder = () => Promise<AdsConfig>;
+
+type True = 't';
+type False = 'f';
+type NotApplicable = 'na';
+export type { True, False, NotApplicable };