AMP Anzeigenkennzeichnung

Da in AMP-Seiten der Adcontroller nicht verbaut ist, muss eine Anzeigenkennzeichnung durch den Publisher erfolgen. Diese Anleitung ist ein Beispiel, wie die Werbekennzeichnung auf einer AMP-Seite „ausgeblendet“ werden kann, sofern kein Ad auf einer Platzierung ausgespielt wurde.

Beispiel-Aufbau einer Anzeigenkennzeichnung

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

• Das "iqadmarker"-div kommt im HTML-Code hinter das amp-ad-Tag
• Der umliegende div-Container "iqampcenter" bekommt zusätzlich das CSS-Styling:

display: flex; 
flex-direction: column;

• Das "iqadmarker"-div bekommt das CSS-Styling:

order: -1;
display:none;

Dadurch rutscht es vor das amp-ad und ist erst mal nicht sichtbar.

• Wenn eine Werbung gebucht, ausgeliefert und das amp-ad dadurch angezeigt wird, so erscheint mit folgendem Code auch die Anzeigenkennzeichnung:

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

iqampcenter und iqadmarker sind natürlich nur Beispielnamen, die gerne durch bessere Bezeichnungen ersetzt werden können.

Zusammenfassung

Zur schnellen Übersicht hier noch einmal die verwendeten Code-Blöcke:

HTML-Struktur

<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; 
}