Documentation

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

Caution

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

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>

Add the user notification element in the body of the template:

<amp-user-notification id="notification1" layout="nodisplay">
    <div>
        This is an amp-user-notification. It uses local storage to store the dismissed state.
        <button on="tap:notification1.dismiss">I accept</button>
    </div>
</amp-user-notification>

Optional attributes:

  • data-show-if-href => a GET request to the specified url will determine if the notification should be shown (2 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 will always show on every page visit

Pay attention here:

  • An id is required because multiple amp-user-notification elements are allowed and the id is used to differentiate them
  • To close amp-user-notification, add an on attribute to a button with the following value scheme on="event:idOfUserNotificationElement.dismiss"
  • The amp-user-notification component should always have layout=nodisplay and will be position: fixed after layout (default is bottom: 0, which can be overridden)

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 id="my-notification" layout="nodisplay">
    <div>
        This is an amp-user-notification. It uses local storage to store the dismissed state.
        <button on="tap:my-notification.dismiss" class="ampstart-btn caps ml1">I accept</button>
    </div>
</amp-user-notification>

CSS

<style amp-custom>
    amp-user-notification > div {
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

AMP banner
Screenshot from the official AMP page

Another, more iubenda-like setup:

Section

<amp-user-notification id="my-notification" layout="nodisplay">
    <div>
        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:my-notification.dismiss" class="ampstart-btn caps ml1">I accept</button>
    </div>
</amp-user-notification>

CSS

<style amp-custom>
    amp-user-notification > div {
        font: 14px/1.5 Helvetica, Arial, sans-serif;
        color: #fff;
        background: #000;
        padding: 1rem;
    }
    
    amp-user-notification > div a {
        color: #fff;
    }
</style>

AMP iubenda banner
Screenshot with styling resembling iubenda's Cookie Solution more

How to use this setup

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

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

Example

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

amp-analytics

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

amp-ad

<amp-ad width="123" height="123" type="XYZ" data-consent-notification-id="sameIdOfAmpUserNotification"></amp-ad>

Limits of this setup

There is a limit to this setup here. At the moment there are only 2 components that accept the attribute data-consent-notification-id. They are amp-ad and amp-analytics, the rest of the components do not accept it.

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

It's also worth noting here that Google Tag Manager has built-in AMP functionality (via the AMP Container). You can read more about that on Google's blog here.

Still have questions?

Visit our support forum Email us