Geolocation-based Consent Flow

Edit on Github
Open in Playground

Introduction

Sometimes is necessary to ask only users from specific countries for consent. This sample demonstrates how you can use amp-consent together with amp-geo to achieve this. In this sample we'll build a consent dialog that will only show for users from the EU.

Setup

We need to import both, the amp-consent ...

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

... and the amp-geo extension.

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

Setting up amp-geo

First we need to setup the amp-geo extension. We define a group: eu which includes all EU countries.

Example

<amp-geo layout="nodisplay">
  <script type="application/json">
    {
      "ISOCountryGroups": {
        "eu": ["al", "ad", "am", "at", "by", "be", "ba", "bg", "ch", "cy", "cz", "de", "dk", "ee", "es", "fo", "fi", "fr", "gb", "ge", "gi", "gr", "hu", "hr", "ie", "is", "it", "lt", "lu", "lv", "mc", "mk", "mt", "no", "nl", "po", "pt", "ro", "ru", "se", "si", "sk", "sm", "tr", "ua", "uk", "va"]
      }
    }
  </script>
</amp-geo>

We define a basic consent flow, similar to this sample. The flow should only trigger for users in the EU, so we set the flag: "promptIfUnknownForGeoGroup": "eu".

Example

X
Headline

This is an important message requiring you to make a choice if you're based in the EU.

<amp-consent id="myUserConsent"
  layout="nodisplay">
  <script type="application/json">
    {
      "consents": {
        "eu": {
          "promptIfUnknownForGeoGroup": "eu",
          "promptUI": "myConsentFlow"
        }
      },
      "postPromptUI": "post-consent-ui"
    }
  </script>
  <div id="myConsentFlow"
    class="popupOverlay">
    <div class="consentPopup">
      <div class="dismiss-button"
        role="button"
        tabindex="0"
        on="tap:myUserConsent.dismiss">X</div>
      <div class="h2 m1">Headline</div>
      <p class="m1">This is an important message requiring you to make a choice if you're based in the EU.</p>
      <button on="tap:myUserConsent.accept"
        class="ampstart-btn ampstart-btn-secondary caps mx1">Accept</button>
      <button on="tap:myUserConsent.reject"
        class="ampstart-btn ampstart-btn-secondary caps">Reject</button>
    </div>
  </div>
  <div id="post-consent-ui">
    <button on="tap:myUserConsent.prompt()"
      class="ampstart-btn caps m1">Update Consent</button>
  </div>
</amp-consent>

Testing

You can test different behaviors by appending custom country codes to the URL, for example: