AMP SDK

This guide explains how to setup AMP to work with Didomi by configuring <amp-consent> with the Didomi CMP.

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

Getting started

Follow these steps to configure AMP Consent and Didomi

Embed amp-consent

Add the amp-consent script to your AMP page:

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

Configure the Didomi SDK

We support two options to configure the UI and the behavior of the SDK:

• Didomi Console: the SDK is configured remotely from the Didomi Console.

• Local configuration: the SDK is configured from a JSON configuration object directly on your AMP website.

From the Console (Recommended)

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.

Local configuration

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.

<amp-consent layout="nodisplay" id="didomi" type="didomi">
    <script type="application/json">
    {
        "clientConfig": {
            "gdprAppliesGlobally": true,
            "config": {
                "website": {
                    "apiKey": "<API_KEY>",
                    "vendors": {
                        "iab": {
                          "all": true
                        }
                    }
                }
            }
        }
    }
    </script>
</amp-consent>

type='didomi' in <amp-consent> is really important as it tells AMP which CMP to use.

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 Web SDK documentation.

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.

If you are a company based outside of the EU and only want to require the consent in EU, you do not need to configure the countries where GDPR applies yourself. It is done automatically by Didomi and the only configuration you have to do is switching gdprAppliesGlobally to falsein the configuration.

Set the height of your banner

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.

<amp-consent layout="nodisplay" id="didomi" type="didomi">
    <script type="application/json">
    {
        "clientConfig": {
            "gdprAppliesGlobally": true,
            "config": {
                "notice": {
                    "initialHeight": "40vh"
                }
            }
        }
    }
    </script>
</amp-consent>

Block navigation before consent

If you want to block the navigation before consent, you can do that by adding an overlay attribute in your configuration

<amp-consent layout="nodisplay" id="didomi" type="didomi">
    <script type="application/json">
    {
        "uiConfig": { "overlay": true },
        "clientConfig": { ... }
    }
    </script>
</amp-consent>

Add the amp-consent-blocking meta tag at the top of your page

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

Add a link for the user to manage their preferences

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:

<amp-consent layout="nodisplay" id="didomi" type="didomi">
    <script type="application/json">
    {
        "postPromptUI": "postPromptUI", // This is related to the div below
        "clientConfig": {...}
    }
    </script>
    
    <div id="postPromptUI">
        You can manage your consents by clicking here :
        <button on="tap:didomi.prompt()" role="button">Manage</button>
    </div>
</amp-consent>

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.

Share consent with <amp-ad> through sharedData

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.

The vendor can access data through the window.context object. For more information, please read this section of the documentation.

Didomi is sharing 2 values through the window.context.consentSharedData:

• consentStateValue which contains the consent state

• consentString which contains the IAB consent string

Using amp-consent with a website in right to left direction

if you are using amp-consent with a website using dir="rtl", the banner will not be displayed properly. The fix provided by AMP is to add dir="ltr" to the amp-consent tag.

Blocking behaviors

In AMP, blocking behaviors 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 our dedicated documentation on blocking behaviors to ensure that you correctly configure your tags to be compliant.

Your configuration will not be complete and your website will not be compliant until you configure the blocking behaviors.