10up
Ad Component
@nicholasio
Requirements
- GPT Support
- TypeScript Support
- Single Request Architecture
- Ad Sizes
- Key Value Targeting
- Refresh
- Minimize Layout Shift
- Options to be toggled via .env vars.
GPT Support
If GPT is enabled from .env var, GPT is to be added in _app.tsx.
TypeScript
The component should be type-safe, and use the DefinitetlyType package for GPT. https://www.npmjs.com/package/@types/google-publisher-tag
Single Request Architecture
SRA adjusts the initial options passed to GPT and how each Ad is called, plans for the architecture of the component to be generalised to support both where practicable, and for this to be controlled via a global option as an environment variable or on a per ad basis via prop.
Ad Sizes
Support for props that provide ad sizing for the slot.
Key Values
Support for props that provide targeting values for the slot
Refresh
Refresh is to be controlled using intersectionObserver https://www.npmjs.com/package/react-intersection-observer, and refresh only occurs when the slot has been in the viewport for the required X seconds.
Layout Shift
CSS in place to control CLS, min-height, and collapse empty slots to be taken into consideration.
