Tlohmann at 08:14, 22 March 2022

2022-03-22T08:14:23Z

← Older revision		Revision as of 10:14, 22 March 2022
Line 55:		Line 55:
	</syntaxhighlight>		</syntaxhighlight>

	[[~~Kategorie~~:Ad Technology]][[~~Kategorie~~:AMP]]		[[Category:Ad Technology]][[Category:AMP]]
	[[de:AMP Anzeigenkennzeichnung]]		[[de:AMP Anzeigenkennzeichnung]]

Tlohmann: Created page with "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==
…
Anzeige

*The "iqadmarker" div is positioned behind the amp-ad tag in the HTML cod..."

2022-03-22T08:04:46Z

Created page with "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== <syntaxhighlight lang="html"> <div class="iqampcenter"> <amp-ad> … </amp-ad> <div class="iqadmarker">Anzeige</div> </div> </syntaxhighlight> *The "iqadmarker" div is positioned behind the amp-ad tag in the HTML cod..."

New page

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==
<syntaxhighlight lang="html">
<div class="iqampcenter">
<amp-ad> … </amp-ad>
<div class="iqadmarker">Anzeige</div>
</div>
</syntaxhighlight>
*The "iqadmarker" div is positioned behind the amp-ad tag in the HTML code.
*The surrounding div container "iqampcenter" gets additional CSS styling:
<syntaxhighlight lang="css">
display: flex;
flex-direction: column;
</syntaxhighlight>
*The "iqadmarker"-div gets the CSS styling:
<syntaxhighlight lang="css">
order: -1;
display:none;
</syntaxhighlight>
: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:
<syntaxhighlight lang="css">
.iqampcenter > amp-ad:not([hidden]) + .iqadmarker {
display: table;
}
</syntaxhighlight>
'''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===
<syntaxhighlight lang="html">
<div class="iqampcenter" >
<amp-ad … </amp-ad>
<div class="iqadmarker">Anzeige</div>
</div>
</syntaxhighlight>

===CSS===
<syntaxhighlight lang="css">
.iqampcenter {
display: flex;
flex-direction: column;
}

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

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

[[Kategorie:Ad Technology]][[Kategorie:AMP]]
[[de:AMP Anzeigenkennzeichnung]]

AMP Ad labelling - Revision history

Tlohmann at 08:14, 22 March 2022