AMP Ad labelling

Since the ad controller is not built into AMP pages, ad labelling must be done by the publisher. This guide is an example of how to "hide" the ad tag on an AMP page, provided no ad has been played on a placement.

Example structure of an ad label

<div class="iqampcenter">
    <amp-ad> … </amp-ad>
    <div class="iqadmarker">Anzeige</div>
</div>

• The "iqadmarker" div is positioned behind the amp-ad tag in the HTML code.
• The surrounding div container "iqampcenter" gets additional CSS styling:

display: flex; 
flex-direction: column;

• The "iqadmarker"-div gets the CSS styling:

order: -1;
display:none;

Thus it slips in front of the amp-ad and is not visible at first.

• If an ad is booked, delivered and the amp-ad is displayed as a result, the ad label will appear with the following code:

.iqampcenter > amp-ad:not([hidden]) + .iqadmarker { 
    display: table; 
}

iqampcenter and iqadmarker are of course only example names, which can be replaced by better names.

Summary

For a quick overview, here are the code blocks used again:

HTML structure

<div class="iqampcenter" >
    <amp-ad … </amp-ad>
    <div class="iqadmarker">Anzeige</div>
</div>

CSS

.iqampcenter {
    display: flex; 
    flex-direction: column;
}

.iqadmarker {
    order: -1;
    display:none;
}

.iqampcenter > amp-ad:not([hidden]) + .iqadmarker { 
    display: table; 
}