Skip to content

Enable TCF 2.0 consent on AMP pages

If you serve EU or UK readers, you need an IAB TCF 2.0 compliant consent prompt before Vuukle widgets and ads can run. This guide adds an AMP-compatible consent flow to your existing AMP pages.

1. Add the AMP extensions in <head>

<script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
<amp-geo layout="nodisplay">
<script type="application/json">
{
"ISOCountryGroups": {
"eea": ["preset-eea", "unknown"]
}
}
</script>
</amp-geo>
<amp-consent id="consent" layout="nodisplay" type="opencmp">
<script type="application/json">
{
"promptIfUnknownForGeoGroup": "eea",
"postPromptUI": "opencmp-consent-prompt-ui",
"clientConfig": {}
}
</script>
<div id="opencmp-consent-prompt-ui">
Post Prompt UI
<button on="tap:consent.prompt(consent=opencmp)" role="button">
Privacy Settings
</button>
</div>
</amp-consent>

Add data-block-on-consent="_auto_reject" and the gdpr_consent=CONSENT_STRING parameter to every Vuukle/DFP ad tag:

<amp-ad data-block-on-consent="_auto_reject" width="300" height="250" type="doubleclick"
data-slot="/213794966/amp/{domain}"
data-enable-refresh="30"
data-multi-size="1x1,200x200,312x260,250x250,320x100,320x50,300x250"
rtc-config='{"urls":["https://pb.vuukle.com/openrtb2/amp?tag_id={domain}&amp;w=ATTR(width)&amp;h=ATTR(height)&amp;ow=ATTR(data-override-width)&amp;oh=ATTR(data-override-height)&amp;ms=ATTR(data-multi-size)&amp;slot=ATTR(data-slot)&amp;targeting=TGT&amp;curl=CANONICAL_URL&amp;timeout=TIMEOUT&amp;adcid=ADCID&amp;purl=HREF&amp;gdpr_consent=CONSENT_STRING"]}'>
</amp-ad>

Replace {domain} with your site host (no www, no protocol).

Reference example

Working sample: https://example-amp-with-consent.netlify.app/

Was this page helpful?
Help us improve — drop a note or open the dashboard.