Versions Compared

Old Version 4

changes.mady.by.user Nelson Pina

Saved on

compared with

New Version Current

changes.mady.by.user Reinhard Steiner

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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>:

...

  • It is possible to customize AdConsent, like a custom logo. Please contact your Account Manager to set this information for you.

  • Add the attribute data-block-on-consent to all elements you want to block until the consent is given. For example: <amp-ad data-block-on-consent ...></amp-ad>.

  • To block all the AMP elements present on your page by default, add the meta tag "amp-consent-blocking" in the page <head>.

    Code Block
    <meta name="amp-consent-blocking" content="amp-analytics,amp-ad"/>COPY>

    The tag will block all AMP components by default (<amp-ad>, <amp-analytics>, <amp-sticky-ad>, <amp-iframe>,...) until consent is given.
    This guide will always use the attribute data-block-on-consent explicitly, meaning this tag is not required.

...

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-carpet component 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 ad

  • The 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)