Ad strategy for inside PageBuilder Editor
Note
This article does not apply to Themes clients using the Google Ad - Themes Block. This is only for custom developed ad strategies.
Loading ads within PageBuilder Editor’s preview functionality is not necessarily an anti-pattern, but it degrades performance and the editorial experience. Ad blocks create unnecessary network requests when loading the preview and increases render time until you can interact with the preview. Furthermore, it obscures which ad-type/size has been selected within the preview.
Problem
In the worst-case scenario, your ads are implemented in a way that requires all ad requests to be resent on every re-render of the preview in Editor. All those network requests slow down the editorial experience because the ad requests block the preview render and you cannot interact with blocks within the preview. If you make multiple changes to blocks at the same time, the preview appears unusable until the ad requests are complete. Additionally, showing the rendered ad does not give a clear indication on which ad-type or size has been requested without opening the Block configuration panel for each ad.
Solution
Do not load any ads inside the PageBuilder Editor. Avoid making any ad requests and skip all code that runs for ads.
Show placeholders
We recommend adding a placeholder div with the appropriate size and text, showing the ad placement, the estimated size, and ad-type and size in the preview.
The following example shows a placeholder ad within the Google Ad - Themes Block:
 |
You can render placeholders within PageBuilder Editor using the isAdmin flag provided by useFusionContext. This flag is true only within PageBuilder Editor and end-users never experience this page render.
Inside your ads block, create an alternative rendering depending on isAdmin and return a placeholder instead.
For more information, see Context Component API - isAdmin.
Minimize impact
If you must render ads in PageBuilder Editor, take these steps to minimize the impact.
Send ads-requests once
The preview within PageBuilder Editor re-renders after every change. If ad-requests are not part of page-load, but part of render-steps for components, ensure to send them only once and not on every re-render. For example, by putting them into useEffect.
Make Ads container Static
To ensure ads are excluded from the client-side re-render after changes in the PageBuilder Editor preview, wrap the ads containers in the Fusion Static Tag. This way, even if the ads need to be rendered, they remain static on the re-render for preview updates.
If you make changes directly to the ads block, the block re-renders but not as part of other changes.
For more information, see Static Component API.