Campaign
Examples of installing AMP-HTML ad units
Discover practical examples of integrating AMP HTML ad units – from fixed banner formats to fully responsive layouts.
Overview
In this article you will find various examples for integrating AMP HTML ad blocks.
If you have not yet completed the basic setup, we recommend that you first read the article "How do you integrate an AMP HTML ad block?".
Fixed-size ad block
Use the layout fixed if your ad block should always be displayed with a fixed width and height.
<amp-ad type="aduptech" layout="fixed" width="500" height="200" data-placementkey="07d120d1abbd5f37dc4f1f8feceaebe1"></amp-ad>
Suitable for:
classic banner formats
desktop placements
fixed advertising spaces
Ad block with dynamic size
With the layout fill, the ad block adapts fully to its surrounding container.
Define container
<style amp-custom>#parent { width: 350px; height: 300px; position: relative;}</style>
Integrate ad block
<div id="parent"> <amp-ad type="aduptech" layout="fill" data-placementkey="07d120d1abbd5f37dc4f1f8feceaebe1"> </amp-ad></div>
Suitable for:
flexible layouts
dynamic containers
modern websites
Ad block with fixed height
With fixed-height, the height of the ad block remains constant, while the width automatically adapts to the available space.
<amp-ad type="aduptech" layout="fixed-height" height="100" data-placementkey="07d120d1abbd5f37dc4f1f8feceaebe1"></amp-ad>
Suitable for:
horizontal banners
header and footer placements
responsive websites
Ad block with fixed aspect ratio
With responsive, the ad block adapts flexibly to the available space while maintaining the defined aspect ratio.
In the following example, a ratio of 16:9 is used.
<amp-ad type="aduptech" layout="responsive" width="16" height="9" data-placementkey="07d120d1abbd5f37dc4f1f8feceaebe1"></amp-ad>
This layout is particularly suitable for:
responsive websites
mobile devices
modern content layouts
When should you use which layout?
Layout | Recommendation |
|---|---|
| For banners with a fixed size |
| When the ad should adapt completely to the container |
| For banners with a fixed height and variable width |
| For responsive layouts with a fixed aspect ratio |
Best Practices
Prefer responsive layout
For most modern websites, we recommend the responsive layout, as ads adapt flexibly to different screen sizes.
Consider container size
Layouts like fill require a container with defined dimensions.
If this is missing, the ad cannot be displayed correctly.
Test placements
Check each ad placement on:
Desktop
Tablet
Smartphone
This ensures that ads are displayed correctly on all devices.
Use test mode
During implementation, use the parameter data-adtest to test ads without recording impressions or clicks.
Common Sources of Error
Missing container size with fill
With the fill layout, the parent container must have a defined size.
Width and height are missing
Layouts like fixed or responsive require valid values for width and height.
Incorrect layout selected
Select the layout that fits the purpose so that ads are displayed optimally.