Stay organized with collections
Save and categorize content based on your preferences.
Reserve space for ads
Reserving adequate space on your page for ads is key to
minimizing layout shift. This example demonstrates various
approaches to reserving space and their effects on layout stability.
No space reserved: No dimensions are specified for the ad slot
container. The container starts out collapsed and expands when an ad fills,
causing a user-visible layout shift.
Space reserved: Dimensions are specified for the ad slot container. The
container always occupies a constant amount of space on the page, so the
layout does not shift. Blank space is visible prior to an ad being loaded.
Space reserved with placeholder: Dimensions are specified for the ad
slot container. The container occupies a constant amount of space on the
page, so the layout does not shift. CSS is used to style the empty container
to avoid blank space being visible prior to an ad being loaded.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[],null,["# Reserve space for ads\n=====================\n\nReserving adequate space on your page for ads is key to\n[minimizing layout shift](//developers.google.com/publisher-tag/guides/minimize-layout-shift). This example demonstrates various\napproaches to reserving space and their effects on layout stability.\n\n- **No space reserved:** No dimensions are specified for the ad slot container. The container starts out collapsed and expands when an ad fills, causing a user-visible layout shift.\n- **Space reserved:** Dimensions are specified for the ad slot container. The container always occupies a constant amount of space on the page, so the layout does not shift. Blank space is visible prior to an ad being loaded.\n- **Space reserved with placeholder:** Dimensions are specified for the ad slot container. The container occupies a constant amount of space on the page, so the layout does not shift. CSS is used to style the empty container to avoid blank space being visible prior to an ad being loaded.\n\nSample implementation\n---------------------\n\n[View demo](https://googleads.github.io/google-publisher-tag-samples/reserve-space/js/demo.html) \n\n### JavaScript\n\nLoading...\n----------\n\nLoading...\n----------\n\n[Improve this sample](https://github.com/googleads/google-publisher-tag-samples/tree/main/dist/reserve-space/js) [Report an issue](https://github.com/googleads/google-publisher-tag-samples/issues/new?labels=documentation&template=sample-feedback.md&title=Sample+feedback%3A+reserve-space/js)\n\n### TypeScript\n\nLoading...\n----------\n\nLoading...\n----------\n\n[Improve this sample](https://github.com/googleads/google-publisher-tag-samples/tree/main/dist/reserve-space/ts) [Report an issue](https://github.com/googleads/google-publisher-tag-samples/issues/new?labels=documentation&template=sample-feedback.md&title=Sample+feedback%3A+reserve-space/ts)"]]