...
This integration guide provides a detailed explanation of the implementation of AMP ads, Video units, Consent Management (CMP), and User Sync on a website developed exclusively with AMP.
AMP Ads
AMP pages can be monetized by displaying Ads through a specific AMP component: <amp-ad>. This component is a customizable ad extension to the AMP library delivering ads through Snigel's Bid-Push server side header-bidding and Google Ad Manager (GAM).
...
AMP HTML documents must contain the following AMP Boilerplate Code in the <head> tag.
| Code Block |
|---|
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both
}
@-webkit-keyframes -amp-start {
from { visibility: hidden }
to { visibility: visible }
}
@-moz-keyframes -amp-start {
from { visibility: hidden }
to { visibility: visible }
}
@-ms-keyframes -amp-start {
from { visibility: hidden }
to { visibility: visible }
}
@-o-keyframes -amp-start {
from { visibility: hidden }
to { visibility: visible }
}
@keyframes -amp-start {
from { visibility: hidden }
to { visibility: visible }
}
</style>
<noscript>
<style amp-boilerplate> body { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none } </style>
</noscript> |
...
Consent Management
If you are using AdConsent to manage user consent, there are additional elements required to be compliant with privacy laws.
It's highly recommended to use a CMP to assure your site is compliant with data regulation laws such as GDPR. With Snigel's AdConsent you are compliant in accordance with IAB Europe’s Transparency and Consent Framework (TCF).
Implementing a CMP in a publisher site that relies on ads to subsist will ultimately lead to better revenue in the areas where consent is needed.
To implement AdConsent, just add the following code on the top of the page <body>:
...
The page body needs to define <amp-ad> elements which will be filled with ads. They need to be placed where the ad should be displayed.
The <amp-ad> elements should reserve the maximum width and height of the displayed ad to prevent Cumulative Layout Shift (CLS). To reserve the proper space please consult your account manager to get the exact ad sizes.
...
Replace domain-placement_amp and other attribute values with the actual data provided by your account manager
Load
amp-fx-flying-carpetcomponent in the<head>element of the AMP page:Code Block <script async custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>
If the page does not use consent management, remove the data-block-on-consent attribute
The height attribute means the flying carpet's "window"
If you don't want to have the "Advertising" label on top of the element, remove the respective
<div>By default, the
<amp-fx-flying-carpet>is center-align in the viewport and the same for the adThe following requirements are imposed on
<amp-fx-flying-carpet>positioning:It should be positioned so that it doesn't obscure the first viewport (outside of the top 75%).
It should be positioned so that its top can reach or be above the top of the last viewport when scrolled.
Related links
AdConsent
Accelerated Mobile Pages<amp-ad> Component<amp-sticky-ad> Component<amp-iframe> Component<amp-fx-flying-carpet> Component
AMP Boilerplate Code
Cumulative Layout Shift (CLS)