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 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.
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> |
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"> |
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
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> |
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.
<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> |
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> |
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"/> |
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 helps advertisers to synchronize user information to deliver user specific ads which will ultimately increase revenue.
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> |
Replace **site.domain** with the actual site domain
Place the script at the top of <body> after the <amp-consent> tag
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> |
Replace **site.domain** with the actual site domain
Place the script at the top of <body>
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.
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> |
Replace **site.domain** with the actual site domain
Place the script at the top of <body>
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> |
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.
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> |
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 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> |
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 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> |
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 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> |
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.
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)