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>2. Add the consent boilerplate in <body>
<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>3. Update your ad tag to respect 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}&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&adcid=ADCID&purl=HREF&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/
Related
Was this page helpful?
Help us improve — drop a note or open the dashboard.