AMP SDK (Beta)

Last updated 3 months ago

This guide explains how to setup AMP to work with Didomi by configuring <amp-consent> and sending events into the Didomi analytics platform.

By integrating AMP and Didomi, you can currently benefit from the following features:

  • Consent UI and workflows provided by Didomi, or custom consent UI

  • Require consent for EU-based visitors only or all visitors

  • Legal storage of collected consents

  • Consent analytics

The AMP SDK is currently in closed beta. Please reach out to your account manager or tech contact to get your API key enabled for AMP.

AMP consent support and limitations

AMP supports collecting user consent and conditioning the loading of vendors' tags through the <amp-consent> tag. At the moment, AMP has several limitations that cannot be overcome at the momenti:

  • Binary consent (ie a global Agree or Disagree) and no support for consent per purpose or per vendor. No support of the IAB specification and integrations.

  • Vendors can only be blocked or un-blocked but there is no support for non-personalized data processing or advertising.

  • A limited set of events can be tracked and reported on.

There are plans to allow Consent Management Platforms like Didomi to build a richer (and more compliant) solution, similar to what can be offered on regular web pages or mobile applications. You can follow the discussions on the AMP Github. Didomi will support this improved experience as soon as possible

Consent notice

This section describes how to configure your AMP website to collect consent with a banner, a popup, a custom notice or a specific notice for AMP stories.

In all cases (even when Didomi is not providing the consent UI), Didomi is used for deciding when consent should be collected, providing legal storage of consent and consent analytics.

The following query-string parameters need to be replaced in all the AMP tags you might use:

Query

Description

Values

key

Didomi API key

The Didomi API key that belongs to your account.

gdpr_applies_globally

Whether GDPR applies to all visitors on only EU-based visitors.

true if you are an EU company or if you want to collect consent for all visitors. false if you are a non-EU company and want to collect consent from EU visitors only.

To collect consent via a Didomi banner positioned at the bottom of your website, configure and add the following tag to your web pages:

<amp-consent layout="nodisplay" id="consent-element">
<script type="application/json">
{
"consents": {
"didomi-consent": {
"checkConsentHref": "https://api.didomi.io/amp/check-consent?key={API-KEY}&gdpr_applies_globally=true",
"onUpdateHref": "https://api.didomi.io/amp/report-consent?key={API-KEY}&gdpr_applies_globally=true",
"promptUI": "consent-ui"
}
}
}
</script>
<amp-iframe
id="consent-ui"
height="200"
sandbox="allow-scripts"
layout="fixed-height"
frameborder="0"
src="https://sdk.privacy-center.org/amp-consent-notice.html?key={API-KEY}&gdpr_applies_globally=true&position=banner">
<amp-img layout="nodisplay" width="0" height="0" placeholder></amp-img>
</amp-iframe>
</amp-consent>

Blocking popup

To collect consent via a Didomi popup that blocks access to your content, configure and add the following tag to your web pages:

<amp-consent layout="nodisplay" id="consent-element">
<script type="application/json">
{
"consents": {
"didomi-consent": {
"checkConsentHref": "https://api.didomi.io/amp/check-consent?key={API-KEY}&gdpr_applies_globally=true",
"onUpdateHref": "https://api.didomi.io/amp/report-consent?key={API-KEY}&gdpr_applies_globally=true",
"promptUI": "consent-ui"
}
}
}
</script>
<amp-iframe
id="consent-ui"
width="200" height="100"
sandbox="allow-scripts"
layout="responsive"
frameborder="0"
src="https://sdk.privacy-center.org/amp-consent-notice.html?key={API-KEY}&gdpr_applies_globally=true&position=popup">
<amp-img layout="nodisplay" width="0" height="0" placeholder></amp-img>
</amp-iframe>
</amp-consent>

Custom notice

You are free to provide your own UI for collecting consent while still relying on Didomi for determining when consent should be collected, storing legal proof of consent and running analytics. All standard AMP components can be used for building your own consent UI.

To do so, you can adapt the following script that is pre-configured for Didomi:

<amp-consent layout="nodisplay" id="consent-element">
<script type="application/json">
{
"consents": {
"didomi-consent": {
"checkConsentHref": "https://api.didomi.io/amp/check-consent?key={API-KEY}&gdpr_applies_globally=true",
"onUpdateHref": "https://api.didomi.io/amp/report-consent?key={API-KEY}&gdpr_applies_globally=true",
"promptUI": "consent-ui"
}
}
}
</script>
<div id="consent-ui">
<!-- Build your own consent collection UI here -->
<button on="tap:consent-element.accept" role="button">Accept</button>
<button on="tap:consent-element.reject" role="button">Reject</button>
<button on="tap:consent-element.dismiss" role="button">Dismiss</button>
</div>
</amp-consent>

Use the instructions from the AMP documentation to build your consent UI: https://www.ampproject.org/docs/reference/components/amp-consent#consent-management

Notice for Stories

If you use AMP stories, you need to use a specific configuration for the consent UI as documented on https://www.ampproject.org/docs/reference/components/amp-consent#prompt-ui-for-stories.

Standard consent UI for AMP stoies

Use the following tag as a base for collecting consent in AMP stories:

<amp-consent layout="nodisplay" id="consent-element">
<script type="application/json">
{
"consents": {
"didomi-consent": {
"checkConsentHref": "https://api.didomi.io/amp/check-consent?key={API-KEY}&gdpr_applies_globally=true",
"onUpdateHref": "https://api.didomi.io/amp/report-consent?key={API-KEY}&gdpr_applies_globally=true",
"promptUI": "consent-ui"
}
}
}
</script>
<amp-story-consent id="consent-ui" layout="nodisplay">
<script type="application/json">
{
“title”: "A message from us",
“message”: "Ads help us run this site. By continuing your navigation on our site, pre-selected companies may set cookies or access and use non-sensitive information on your device to serve relevant ads or personalized content.",
“vendors”: ["Vendor 1", "Vendor 2", "Vendor 3", "Vendor 4"]
}
</script>
</amp-story-consent>
</amp-consent>

With AMP stories, the consent UI is the default AMP UI and not Didomi's. Didomi is still used to decide when consent should be collected, provide legal storage of consent and consent analytics.

Blocking vendors

After setting up your consent UI, you can condition any tag to only be loaded after consent has been collected by adding the data-block-on-consent attribute to it.

Example to block your analytics provider until after user gives consent:

<amp-analytics data-block-on-consent
type="googleanalytics">
</amp-analytics>

Refer to the AMP documentation for more details on blocking vendors and additional options: https://www.ampproject.org/docs/reference/components/amp-consent#blocking-behaviors