To reduce CLS, we now provide some "Ad management" CSS class on divs to allow the publisher to know the status of the ad display.
👀 Overview
The publisher can now decide the styles to apply on ad unit placeholders, based on the following CSS classes:
- adm-ad-loading⇒ added on each ad units before the auction call
- adm-ad-empty⇒ added on ad unit that receive no ad after the auction
- adm-ad-rendered⇒ added on ad unit properly rendered
- adm-ad-skin⇒ added only if the ad is recognized as “skin”
- adm-ad-skin-resizable⇒ added to the div carrying the crea skin if the bidder is not 'sublime', 'justpremium' or 'gumgum'
These classes represent the status of an ad unit, so when the auction ends the -loading is replaced by the -rendered/-empty. Those classes are automatically added by Pubstack.
🏗️ Skin
-skin is present as a specification of the -rendered status.
In case of -skin we also provide an attribute data-adm-skin on the same div. It could be gam or prebid, the value represents the source of the skin creative.
A class .adm-ad-skin-resizable is added to the div carrying the crea skin if it's resizable. Defined as resizable if the bidder is not 'sublime', 'justpremium' or 'gumgum'. CSS can then be added client-side or via an extra script to scale the creative.
Here is an example of CSS to be adjusted according to the site:
🏗️ Examples
Example of a rendered ad:
Example of an empty ad:
