AMP

This page guides you step by step on how installing the AMP CMP on your site.

IAB Compliance

We are a valid registered CMP at the TCF ( ID_CMP = 2 ). We currently support the last stable version of the TCFV2. We also issued an AMP version that is now available. You can have a check here.

As IAB Member, we are also member and contributor of the french IAB Privacy Task Force.

The AMP developer website gives general informations on how to implement an AMP CMP. Make sure you are familiar with it before proceeding: https://amp.dev/documentation/components/amp-consent/

Embed amp-consent tag

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>

Generate a Notice in AppConsent

This does not change from other implementations. Create a CMP on a Web Source.

This tag will have to be added to the body of your HTML.

<amp-consent id='foobar' layout='nodisplay' type='appconsent'>
<script type="application/json">
{
"clientConfig": {
"appKey": "simple",
"debug": true
}
}
</script>
</amp-consent>

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

The appKey is the same as your web notice .Get your appKey directly from the Backoffice by clicking on a notice and copy/past.

The object clientConfig contains the AppConsent configuration required to make the AMP SDK works.

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.

To create that link that you have to add a postPromptUI element to your AppConsent SDK tag:

<amp-consent layout="nodisplay" id="cmp" type="appconsent">
<script type="application/json">
{
"postPromptUI": "postPromptUIInstance", // This is related to the div below
"clientConfig": {...}
}
</script>
<div id="postPromptUIInstance">
You can manage your consents by clicking here :
<button on="tap:cmp.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='cmp' in <amp-consent> is used to reference the node, for instance for on="tap:cmp.prompt()" to work properly if you use postPromptUI.