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

To have an optimized and effective ad setup on amp pages, a few code tags need to be implemented as outlined below.

Head Configuration

Prerequisites

Before adding the necessary scripts to use all the necessary AMP elements/components verify that your page is effectively an AMP page by verifying that contains an <html ⚡> or <html amp> element on top of the page:

<!DOCTYPE html>
<html amp>

Page Metadata

The following metadata tags are required for every AMP page:

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

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

AMP components

The following AMP components need to be loaded in the page <head> to be able to display ads.

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

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 Boilerplate Code

AMP HTML documents must contain the following AMP Boilerplate Code in the <head> tag.

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

Or the compressed version:

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

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

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

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

User Sync

User sync helps advertisers to synchronize user information to deliver user specific ads which will ultimately increase revenue.

Implement User Sync with Consent Management

It is recommended to implement user sync together with consent management. Add the following tag to the page <body> after the CMP tag.

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

Note

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

Implement User Sync without Consent Management

Add the following tag to the page <body>.

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

Note

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

Implement more than one User Sync module

There are exceptional cases where publishers want to implement AMP ad units from different vendors, each using their own user sync module. This way, each vendor can send requests to their bidders with different user ids.

To implement more than one User ID Sync module it is necessary to implement more than one <amp-iframe>. However, there is an important limitation regarding the use of <amp-iframe> in pages that use <amp-analytics>: ”AMP only allows a single iframe that is used for analytics and tracking purposes, per page".
For this reason, we present two solutions to implement more than one User Sync module in the same AMP page.

First solution

Set the width and height size of the iframe larger than 10px. By doing this, AMP will not consider this iframe for tracking or analytics purposes. Add the following tag to the page <body>:

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

Note

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

Second solution

This solution is more complex. On the AMP page, you have to implement an <amp-iframe> that calls an HTML page page containing all the explicit code needed to call the /cookie_sync endpoint for our vendor and for the other vendors. However, there is an important detail: the origin of <amp-iframe> must not be equal to its container. Which means its source attribute (src) must have a different domain or you must add a subdomain to respect this rule. Add the following example tag to the page <body>:

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

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.

AMP Ad Unit

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.

For each ad on your page, create a tag like the following example.

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

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

AMP Adhesive Ad Unit

AMP also supports other types of ads, like the Adhesive/Sticky Ads. This type of ad will stick to the bottom of the screen with a high viewability causing higher ad revenues.

Create a tag like the following example for an adhesive ad unit.

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

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:

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

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

AMP Video Unit

AMP also supports In-stream Video units. The implementation of Video units in AMP pages is similar to the AMP Ad unit since they share the same component: <amp-ad>.

This type of ad is known for increasing revenue.

Create a tag like the following example for an AMP video unit.

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

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

AMP Flying Carpet Ad Unit

AMP supports flying carpet ad units. A flying carpet is a component composed of a parent ad unit window and a child ad unit fixed in place in relation to the viewport. As the user scrolls up, the parent ad unit, which appears as a transparent window, comes into view and reveals a child ad section. The child ad unit stays in the same place, but the window that the user looks through moves up and down as they scroll. This type of component allows you to show ads with much greater heights than the space reserved for showing the ad.

Create a tag like the following example for an AMP video unit.

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

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:

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

AdEngine AMP Setup

Overview

AMP Ads

Head Configuration

Prerequisites

Page Metadata

Note

AMP components

Note

AMP Boilerplate Code

Body Configuration

Consent Management

Note

User Sync

Implement User Sync with Consent Management

Note

Implement User Sync without Consent Management

Note

Implement more than one User Sync module

First solution

Note

Second solution

Note

AMP Ad Unit

Note

AMP Adhesive Ad Unit

Note

AMP Video Unit

Note

AMP Flying Carpet Ad Unit

Note

Related links