Creating a Cookie Notification with Google's AMP

The European Union (EU) requires websites to display a “Cookie Policy” notification when a user from the EU visits a website.

Luckily, if your site uses AMP, it’s really easy to implement a cookie notification. Even better, you can set up your notification to only be visible to users un the EU.

If you’re not familiar with AMP, check out this getting started guide

Basic Implementation

The first thing you’ll need to do is include the AMP user notification script:

<!-- AMP user notification -->

<script async custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>

Now you’ll need to create the notification element. In this example, we’ll just make it display the message “This site uses cookies.” and a button to hide the message. Depending on how your site uses cookies, you’ll need to update the notification.

Here’s an example of the notification code:

<amp-user-notification id="cookie-notif" layout="nodisplay">

    <div>

      <!-- text displayed in the notification -->

      This site uses cookies.

      <!-- "accept" link -->

      <a on="tap:cookie-notif.dismiss">accept</a>

    </div>

</amp-user-notification>

The notification will only be displayed until the user clicks the “accept” link, it has built-in functionality to keep track of its status in LocalStroage.

Adding Geography Tracking

You can also set up the notification to only display in certain countries. The first step for location-based tracking is to include the AMP geo script:

<!-- AMP geo -->

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

Next, create an amp-geo element with the country codes for the EU (I got a list of codes from this repository):

<amp-geo layout="nodisplay">

  <script type="application/json">

  {

    "ISOCountryGroups": {

      "ineu":

         ["al","ad","at","az","by","be","ba","bg","hr","cy","cz","dk","ee","fi","fr","ge","de","gr","hu","is","ie", "it","kz","xk","lv","li","lt","lu","mk","mt","md","mc","me","nl","no","pl","pt","ro","ru","sm","rs","sk", "si","es","se","ch","tr","ua","gb","va"]

    }

  }

  </script>

</amp-geo>

Last but not least, we’ll need to add a conditional statement on the amp-user-notification to only show the notification in the "ineu" group we created - we can use the data-show-if-geo attribute for that:

<amp-user-notification id="cookie-notif" layout="nodisplay" data-show-if-geo="ineu">

    <div>

      <!-- text displayed in the notification -->

      This site uses cookies.

      <!-- "accept" link -->

      <a on="tap:cookie-notif.dismiss">accept</a>

    </div>

</amp-user-notification>

Styling Your Notification

You can style your notification just like any other element. You can use the amp-user-notification selector or add a class or id to the element.