AMP SDK
Last updated
Last updated
This guide explains how to setup AMP to work with Didomi by configuring with the Didomi CMP.
AMP supports collecting user consent and conditioning the loading of vendors' tags through the tag.
At the moment, AMP has several limitations that Didomi is subject to:
A single common consent status is stored and all vendors and purposes have the same status. This means that the user cannot enable or disable purposes or vendors specifically.
Limited support of the IAB specification and integrations. The IAB consent string is collected and passed into AMP but support of the consent depends on IAB vendors. Confirm with your IAB vendors that they have updated their AMP integrations to collect consent strings.
Once the Preferences dialog is opened from the notice (by clicking on "Learn more"), it is not possible to close it and re-open the notice. This means that, when the user clicks on “Learn more” in the notice and opens the Preferences view, they have to make a choice there and cannot close the Preferences to go back to the consent notice like they can do on Web or Mobile. This does not prevent the user from opening the Preferences view at a later point and changing their choice.
Due to the single consent status limitation we do not support the sharing consents across devices for AMP SDK.
The AMP team has plans to mitigate some of these limitations. Didomi will update its SDK when updates are made to the AMP platform.
Follow these steps to configure AMP Consent and Didomi
amp-consent
Add the script to your AMP page:
We support two options to configure the UI and the behavior of the SDK:
You can configure the consent notice in your app by creating a notice in your Didomi Console. It will automatically create a tag for you that you will have to copy and paste inside the body of your HTML.
In this option, you create your own SDK configuration JSON and integrate it directly in your AMP website. This tag will have to be added to the body of your HTML.
type='didomi'
in <amp-consent>
is really important as it tells AMP which CMP to use.
Because the Didomi SDK is embedded by AMP in an iframe that appears at the bottom of the page with a defined height, we only support and force notice.position
to bottom
in the configuration object.
AMP allows to set the height of the banner with values between 10vh and 60vh. You can do that by editing the attribute notice.initialHeight
. The default value is 30vh.
If you want to block the navigation before consent, you can do that by adding an overlay attribute in your configuration
amp-consent-blocking
meta tag at the top of your pageYou have to add <meta name="amp-consent-blocking" content="">
at the top of your page to avoid having an error in the AMP validator.
This meta tag allows you to block a set of tags for the entire page. For example <meta name="amp-consent-blocking" content="amp-ad">
would block all the amp-ad
tags on the page.
If you decide not to use that feature to block a particular tag, you still have to add that tag with an empty content.
After the user has given consent or closed the consent notice, you must give them an easy access to their choices so that they can update them.
Add a link on your website to allow the user to open the consent preferences UI and update their choices. This div
must be placed inside the amp-consent
element. This will create a banner at the bottom of the page with a button that will allow the client to open the Didomi notice.
To create that link that you have to add a postPromptUI
element to your Didomi SDK tag:
postPromptUI
is optional and allow you to have a banner at the bottom of the page if the user wants to reopen the banner to manage his consents, in case a consent has already been given.
id='didomi'
in <amp-consent>
is used to reference the node, for instance for on="tap:didomi.prompt()"
to work properly if you use postPromptUI
.
If a vendor needs access to the consent state/string by using an amp-ad
without an RTC config, Didomi allows this feature on page load by sharing the values through the sharedData
object.
Didomi is sharing 2 values through the window.context.consentSharedData
:
consentStateValue
which contains the consent state
consentString
which contains the IAB consent string
amp-consent
with a website in right to left directionYour configuration will not be complete and your website will not be compliant until you configure the blocking behaviors.
: the SDK is configured remotely from the Didomi Console.
: the SDK is configured from a JSON configuration object directly on your AMP website.
The object config
inside clientConfig
contains the Didomi configuration (window.didomiConfig
) required to make the Web SDK works. Most options supported by the Web SDK can be used here. You can read more about this in the .
The vendor can access data through the window.context
object. For more information, please read .
if you are using amp-consent
with a website using dir="rtl"
, the banner will not be displayed properly. The fix is to add dir="ltr"
to the amp-consent
tag.
In AMP, define when an element (ad, analytics, etc.) on the page can be loaded based on the user consent status collected by the CMP.
Please read on blocking behaviors to ensure that you correctly configure your tags to be compliant.