Didomi - Developers documentation
  • Introduction
  • SDKs
    • Introduction
    • Web SDK
      • Getting started
      • Tags and vendors management
        • Tags management
          • Events & Variables
            • Deprecated
            • Custom events
          • Tag managers
            • Adobe Launch/DTM
            • Eulerian
            • Google Tag Manager
              • Configure the Didomi / GTM integration
              • Didomi's GTM template
            • Tealium
            • Other tag managers
        • Custom Didomi <script> tags
        • Third-party integrations
          • Google Ad Manager / AdSense
            • GDPR via Non-Personalized Ads
              • Share consent and load/refresh ads
              • Share consent without loading or refreshing ads
            • US states laws
          • Google Consent Mode V2
          • Kameleoon
          • Piano Analytics (AT Internet)
          • Prebid
            • GDPR via IAB TCF
            • US states laws
          • Salesforce DMP (Krux)
        • IAB frameworks
        • Programmatic API
      • Configuration
        • Bots (SEO & Performance tools)
        • Configuration by URL
        • Cookies and storage
        • Custom domains for events
        • Notice
          • Behavior
          • Interactions
          • Look and feel
        • Preferences
        • Theme
      • AB tests
      • Custom domain
        • Domain delegation
        • Reverse proxy
      • Share consents between domains
      • Share consents across devices
      • Pass user choices in query string
      • Serve Didomi assets from your domain
      • Reference
        • API
          • Deprecated
        • Events
      • Performance
      • Versions
    • Mobile and TV SDKs
      • Android and Android TV
        • Setup
        • Logging
        • Reference
          • API
            • Deprecated
          • Events
        • Versions
      • iOS and tvOS
        • Setup
        • Logging
        • App Tracking Transparency (iOS 14.5+)
        • Reference
          • API
            • Deprecated
          • Events
        • Versions
      • Unity
        • Setup
        • Reference
        • Versions
        • Troubleshooting
      • React Native
        • Setup
        • Reference
          • Deprecated
        • Versions
      • Flutter
        • Setup
        • Reference
        • Versions
      • Consent notice
        • Getting started
        • Customize the notice
        • Customize the preferences popup
        • Customize the theme & UI
        • Load notice by ID
      • Third-party SDKs
      • Share consents across devices
      • Share consent with WebViews
      • Google Consent Mode v2
      • FAQ
    • AMP SDK
      • Blocking Behaviors
        • Load immediately on page load
        • Load only after consent (positive or negative)
        • Load only after positive consent
      • Consent status for vendors
    • Help & Support
  • API
    • Introduction
      • Authentication
      • Errors
      • Pagination
      • Filters
      • Caching
      • Rate limiting
      • Quotas
      • Translations
    • Data Manager
      • Regulations
      • Configuration Tree
      • Purposes
        • Purposes & Vendors Numerical IDs
      • Preferences Library
      • User Rights
    • Widgets
      • Consent notices
        • Notices
        • Configurations
        • Multi-Regulation Configurations
          • Migration of Existing Notices and API Updates
        • Deployments
        • Tutorials
          • Create and publish a consent notice
          • Create and publish a multi-regulation consent notice
      • Privacy widgets
        • Create a widget
        • Retrieve widgets
        • Edit a widget
          • Content & Design
            • Themes & Shapes
            • Components
              • auth
              • dsar_form
              • footer
              • header
              • preference
              • preference_value
              • save
              • section
              • sections
            • Options
          • Purposes & preferences
          • Settings
        • Deploy a Widget
          • Use your own subdomain
          • Use your own domain
          • Implement an embeddable widget on your website
        • Authentication
          • Manage authentication providers
          • Authenticate your end-user
        • Archive a widget
        • Headless widgets
          • Public Methods
          • Custom elements
          • Custom events
          • Event listeners
        • Tutorial
          • Launch a Preference Center from a mobile app
    • Compliance Reports
      • Properties
      • Reports
      • CSV format reference
      • Websites
    • Consents and Preferences
      • Events
        • Generate IAB TCF consent string
      • Links
      • Proofs
      • Tokens
      • Secrets
      • Users
      • Tutorial
        • Collect and operate data
    • Privacy Requests
      • Requests
      • Notes
      • Links
      • Emails
  • Integrations
    • Introduction
      • Quotas
    • Generic integrations
      • Batch export
        • Destinations
          • AWS S3 Bucket (owned by Didomi)
          • GCP Storage Bucket
        • Exported data
          • Notices consents
        • Logs
      • Webhooks
      • Batch import
      • Analytics export
        • Destinations
          • AWS S3 Bucket (owned by Didomi)
          • GCP Storage Bucket
    • Third-party apps
      • CMP integrations
        • Didomi-mParticle integration for your CMP
        • Deploy Didomi’s SDK for your Adobe Commerce website
      • Preference Management Platform integrations
        • Actito
        • Adobe Campaign Classic
        • Adobe Experience Cloud
        • Adobe Marketo Engage
        • Adobe Source Connector
        • Braze
        • Dotdigital
        • Hubspot
        • Mailchimp
        • Microsoft Dynamics 365
        • Salesforce Marketing Cloud
        • Salesforce Sales & Service Cloud
        • Selligent
        • Brevo (ex Sendinblue)
    • Tutorials
      • Configure a HTTP webhook
      • Configure a batch export
      • Configure an analytics export
    • Emailing
      • Configurations
        • Actito Email
        • Actito SMS
        • Adobe Campaign Classic
        • Adobe Campaign Standard
      • Emails
        • Templates
        • Manage your templates
Powered by GitBook
On this page
  • AMP limitations
  • Getting started
  • Embed amp-consent
  • Configure the Didomi SDK
  • Set the height of your banner
  • Block navigation before consent
  • Add the amp-consent-blocking meta tag at the top of your page
  • Add a link for the user to manage their preferences
  • Share consent with <amp-ad> through sharedData
  • Using amp-consent with a website in right to left direction
  • Blocking behaviors
  1. SDKs

AMP SDK

PreviousFAQNextBlocking Behaviors

Last updated 1 year ago

This guide explains how to setup AMP to work with Didomi by configuring with the Didomi CMP.

AMP limitations

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.

Getting started

Follow these steps to configure AMP Consent and Didomi

Embed amp-consent

Add the 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:

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.

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.

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

Blocking behaviors

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

<amp-consent>
<amp-consent>
amp-consent
Web SDK documentation
this section of the documentation
provided by AMP
blocking behaviors
our dedicated documentation
Didomi Console
Local configuration