Table of Contents

minLevel	1
maxLevel	7

Overview

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).

...

Code Block
<!DOCTYPE html> <html amp>COPYamp>

Page Metadata

The following metadata tags are required for every AMP page:

Code Block
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <link rel="canonical">COPY>

Note

The tags <meta charset="utf-8"> and <meta name="viewport" content="width=device-width,minimum-scale=1"> must be the first child of the <head> tag.
The tag <link rel="canonical" href="$SOME_URL"> must be added to the top. Please, assure that your canonical domain is a correct URL ending with a "/", like for example: https://site-domain/ or https://site-domain/my-page/. Verify also the HTTP protocol (HTTP or HTTPS). If the canonical attribute is absent or wrong no ads will be displayed.
- The href attribute is optional. If no href is defined AMP uses the page's URL as the canonical link. Furthermore, it is recommended because of SEO
- With the MCM Migration for GAM if the page URL doesn't have a valid or approved domain, no ads will be displayed. In this case, you can define the attribute href with a page URL containing a valid domain, in order to get ads. For example: testing pages, usually don't have valid/approved domains but you can define one in href to get the page working

...

Code Block

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>
<script async custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>COPYscript>

Note

The tag <script async src="https://cdn.ampproject.org/v0.js"></script> should be included in the script as early as possible in the <head>. It's the AMP Javascript library
The tag <script async custom-element="amp-consent" ... is required for consent management
The tag <script async custom-element="amp-iframe" ... is required for user sync
The tag <script async custom-element="amp-ad" ... is required to show AMP ads
The tag <script async custom-element="amp-sticky-ad" ... is required to use adhesive ads. If no adhesive ad is used, remove this tag
The tag <script async custom-element="amp-fx-flying-carpet" ... is required to use flying carpet ads. If no flying carpet ad is used, remove this tag

...

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

Or the compressed version:

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

Body Configuration

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

Code Block

<amp-consent id="ampcmp" layout="nodisplay">
  <script type="application/json">
    {
      "consentInstanceId": "ampcmp-inst",
      "consentRequired": true,
      "promptUISrc": "https://cdn.snigelweb.com/adengine/**site.domain**/amp.html"
    }
  </script>
</amp-consent>COPYconsent>

Note

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.

...

Code Block

<div>
  <amp-iframe data-block-on-consent
    title="User Sync"
    width="1"
    height="1"
    sandbox="allow-scripts allow-same-origin"
    frameborder="0"
    src="https://cdn.snigelweb.com/adengine/**site.domain**/amp-sync-with-consent.html">
    <amp-img layout="fill" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" placeholder></amp-img>
  </amp-iframe>
</div>COPYdiv>

Note

Replace **site.domain** with the actual site domain
Place the script at the top of <body> after the <amp-consent> tag

...

Code Block

<div>
  <amp-iframe
    title="User Sync"
    width="1"
    height="1"
    sandbox="allow-scripts allow-same-origin"
    frameborder="0"
    src="https://cdn.snigelweb.com/adengine/**site.domain**/amp-sync.html">
    <amp-img layout="fill" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" placeholder></amp-img>
  </amp-iframe>
</div>COPYdiv>

Note

Replace **site.domain** with the actual site domain
Place the script at the top of <body>

...

Code Block

<div style="visibility: hidden;">
  <amp-iframe data-block-on-consent
    title="User Sync"
    width="11"
    height="11"
    sandbox="allow-scripts allow-same-origin"
    frameborder="0"
    src="https://cdn.snigelweb.com/adengine/**site.domain**/amp-sync-with-consent.html">
    <amp-img layout="fill" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" placeholder></amp-img>
  </amp-iframe>
</div>COPYdiv>

Note

Replace **site.domain** with the actual site domain
Place the script at the top of <body>

...

Code Block

<div>
  <amp-iframe
    title="User Sync"
    width="1"
    height="1"
    sandbox="allow-scripts allow-same-origin"
    frameborder="0"
    src="https://**sub.site.domain**/example-cookies-sync.html">
    <amp-img layout="fill" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" placeholder></amp-img>
  </amp-iframe>
</div>COPYdiv>

Note

Replace **sub.site.domain** with the actual site subdomain with the example-cookies-sync.html page
Place the script at the top of <body>
A testing page can be provided to exemplify this implementation (including for example-cookies-sync.html). To find out more, consult your Account Manager.

...

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.

...

Code Block

<div>
  <amp-ad data-block-on-consent
    width="300"
    height="250"
    layout="fixed"
    type="doubleclick"
    data-slot="/01234567/domain_placement_amp"
    data-multi-size="300x50" data-multi-size-validation="false"
    data-enable-refresh="30"
    rtc-config='{"vendors": {"snigel": {"PLACEMENT_ID":"**domain-placement_amp**"}}}'
    json='{"targeting":{"_sn-amp":"true"}}'>
    <div overflow fallback>
      <p>No Ad to show</p>
    </div>
  </amp-ad>
</div>COPYdiv>

Note

Replace **domain-placement_amp** and other attribute values with the actual data provided by your account manager
Put the tag in the page body on the position where the ad should be displayed
If the page does not use consent management, remove the data-block-on-consent attribute

...

Code Block

<amp-sticky-ad layout="nodisplay">
  <amp-ad data-block-on-consent
    width="320"
    height="100"
    layout="fixed"
    type="doubleclick"
    data-slot="/01234567/domain_placement_amp"
    data-multi-size="320x50" data-multi-size-validation="false"
    data-enable-refresh="30"
    rtc-config='{"vendors": {"snigel": {"PLACEMENT_ID":"**domain-placement_amp**"}}}'
    json='{"targeting":{"_sn-amp":"true"}}'>
    <div overflow fallback>
      <p>No Ad to show</p>
    </div>
  </amp-ad>
</amp-sticky-ad>COPYad>

Note

Replace **domain-placement_amp** and other attribute values with the actual data provided by your account manager
Put the tag in the page body after consent management and user sync tags

Load amp-sticky-ad component in the <head> element of the AMP page:

Code Block
<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>COPYscript>

If the page does not use consent management, remove the data-block-on-consent attribute
Ads of various sizes are not recommended for sticker ad units, because the height must be reserved when the page loads. It's defined in <amp-ad>
The max-height of the adhesive ad is 100px. If the height exceeds 100px then the height would be 100px and overflow content will be hidden

...

Code Block
<amp-ad data-block-on-consent width="300" height="200" type="doubleclick" data-slot="/01234567/domain-placement_amp" json='{"targeting":{"sn_cv":"Video_URL"}}'> </amp-ad>COPYad>

Note

For this AMP unit, only one video size is considered: 300x200. This is also the size of the <amp-ad> unit and placement (primary size that defines the space reserved on the page for the unit)
If a different video size is required, it must be ordered to your AM. Also, you will have to change the main size of the <amp-ad> element after the AM has made the necessary changes
Replace the Video_URL with the link to your own .mp4
If the page does not use consent management, remove the data-block-on-consent attribute

...

Code Block

<div class="amp-flying-carpet-text-border" style="text-align: center;">Advertising</div>
<amp-fx-flying-carpet height="300px">
  <amp-ad data-block-on-consent
    width="300"
    height="600"
    type="doubleclick"
    layout="fixed"
    data-slot="/01234567/domain_placement_amp"
    data-multi-size="160 x 600" data-multi-size-validation="false"
    data-enable-refresh="30"
    rtc-config='{"vendors": {"snigel": {"PLACEMENT_ID": "**domain-placement_amp**"}}}'
    json='{"targeting":{"_sn-amp":"true"}}'>
    <div overflow></div>
  </amp-ad>
</amp-fx-flying-carpet>COPYcarpet>

Note

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

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.

Versions Compared

Old Version 3

New Version Current

Key

Overview

AMP Ads

Page Metadata

Note

Note

Body Configuration

Consent Management

Note

Note

Note

Note

Note

Note

Note

Note

Note

Related links

Page Comparison

Versions Compared

Old Version 3

New Version Current

Key

Overview

AMP Ads

Page Metadata

Note

Note

Body Configuration

Consent Management

Note

Note

Note

Note

Note

Note

Note

Note

Note

Related links