Documentation index

Cookie solution ›

AMP-HTML: Display a cookie dialog box


Given that AMP restricts what can be done with third party code, a workaround is necessary in order to get certain cookie law-relevant items onto your site. This guide shows you how to implement a dialog box that notifies users about cookies by using the amp-user-notification tag, including blocking cookies before user consent in two cases.

Note:

This is a workaround for you when you want to use a cookie notice while using AMP on your site. It does not in any way involve iubenda’s Cookie solution. As a consequence, you will be subject to any rules and changes the AMP project envisions for their platform and we at iubenda have no way of influencing this.

INITIAL SETUP:

  • 1. Import amp-user-notification and amp-analitycs in the header. Take note that both “amp-user-notification” and “amp-analytics” scripts are required for it to work
<script async custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  • 2. Add the user notification element in the body of the template
<amp-user-notification
  layout=nodisplay
  id="amp-user-notification1"
  data-show-if-href="https://foo.com/api/show-api?timestamp=TIMESTAMP"
  data-dismiss-href="https://foo.com/api/dismissed"
  data-persist-dismissal=“true”>
  This site uses cookies to personalize content.
  <a href="">Learn more.</a>
 <button on="tap:amp-user-notification1.dismiss">I accept</button>
</amp-user-notification>
    • optional attributes:
      • data-show-if-href => a GET request to the specified url will determine if the notification should be shown.
        (two query default variables will be transmitted in the url string:elementId and ampUserId)
      • data-dismiss-href => a POST request to the specified url will be done after user has agreed.
        (as default will be transmitted elementId and ampUserId variables)
      • data-persist-dismissal => default true. If false, notification always will be shown.
      • layout=nodisplay => should be always present.
  • Pay attention here:
    • amp-notification uses localStorage to save the user consent
    • when the notification has already been dismissed, data-dismiss-href and data-show-if-href will be ignored.

GIVING THE BANNER SOME DESIGN

You can change the banner’s appearance just like you would with any other page elements, via CSS:

example banner item and example CSS taken from the official AMP page to have the banner display in the page footer:

section:

<amp-user-notification layout=nodisplay
id="amp-user-notification1">
This is an amp-user-notification.
<button on="tap:amp-user-notification1.dismiss">I accept</button>
</amp-user-notification>

CSS:

<style amp-custom>
footer {
margin-bottom: 50px;
}
amp-user-notification {
padding: 8px;
background: beige;
}
</style>

screenshot 1 from the offical AMP page:
amp_banner_1

another, more iubenda-like setup:

section:

<amp-user-notification
layout="nodisplay"
id="cookie-policy-acceptance">
This website or its third party tools use cookies,
which are necessary to its functioning and required to achieve the purposes illustrated in the
<a href="">cookie policy</a>. By tapping on "I accept" you agree to the use of cookies. <button on="tap:cookie-policy-acceptance.dismiss">I accept</button>
</amp-user-notification>

CSS:

amp-user-notification {
font-size: 16px;
line-height: 26px;
background: #eee;
color: #000;
padding: 20px;
display: block;
}

screenshot 2 with styling resembling iubenda’s Cookie Solution more:
amp_iubenda_banner

HOW TO USE THIS SETUP

Each element that needs to be blocked must contain the "data-permit-notification-id=amp-user-notification-id" attribute.

Example:

This is how you would block the elements with what we’ve learned above:

amp-analytics:

<amp-analytics type="XYZ" data-permit-notification-id="sameIdOfAmpUserNotification”> ... </amp-analytics>

amp-ad:

<amp-ad width=width height=height type="ad-type" data-permit-notification-id="sameIdOfAmpUserNotification” data-slot=“your-slot”></amp-ad>

LIMITS OF THIS SETUP

There is a limit to this setup here. At the moment there are only two components that accept the attribute data-consent-notification-id. They are <amp-ad> and <amp-analytics>(which we’ve used in the example under “initial setup” above), the rest of the components do not accept it.

For your reference, here’s a list of all the AMP-HTML components: https://www.ampproject.org/docs/reference/components.

Avoid showing the cookie policy popup

There is a scenario involving the use of the AMP-HTML technology where the need for a cookie policy dialog box might no longer be necessary.
Such a scenario is strictly identified by the following prerequisites:

  • A website owner has one normal HTML page for which he or she decides to provide an AMP optimized version.
  • Such an alternative AMP page will be referenced from the original page using the following markup (as required by the AMP documentation):
<link rel="amphtml" href="http://www.example.com/url/to/amp/document.html">
  • You are NOT directly sending the user to said AMP page when he or she lands on your website and you are not providing any direct link to that page either.

What will happen after the publication of /url/to/amp/document.html is the following:

  • Google’s spiders will parse your website, find the reference to any AMP page (<link rel="amphtml" />) in your website and cache them.
  • When Google provides a link to a page of your website in a Google search results page, the link will in fact be a link to the cached version of your AMP page and not the actual page hosted in your website.

As a result, Google being the AMP page provider, the website owner (you) is not responsible for the cookie notification anymore and could potentially consider removing any technology meant to perform such tasks from the AMP page code.

Edge cases

What has been briefly outlined in the previous paragraph holds true only in principle.
As a matter of fact, because Google knows the location of your AMP page, it could eventually start providing the url of your original AMP page (hosted in your servers) instead of the cached version (hosted in their servers) in search results.

We don’t have any means by which to control this and therefore it will remain an area of concern for you.
A possible solution to this drawback could be sniffing out the user agent in your AMP pages and redirect anything that is not the Google bot to the normal page.

Summary

If you want to be able to control everything that happens on the page, you should probably avoid using AMP-HTML for the time being. If you need to use it nonetheless, the above technique lets you block two components out of the whole stack:

analytics & ads.

In addition to the above warning, let us also point out that the section “Avoid showing the cookie policy popup” is not necessarily the safe path, as we cannot guarantee the efficacy of the technique described.


Still have questions?

Visit our support forum Email us