Created
April 23, 2020 13:48
-
-
Save homanp/fba0a1e5bb8f4f669cad3f36644be7ce to your computer and use it in GitHub Desktop.
Amp consent
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| ## Introduction | |
| Users today want additional control over their online experience. Additionally, publishers are faced with a variety of different demands on how they provide notice and choice to their users - from vendor policies to evolving legal requirements. The open source AMP Project is working to give publishers and tech vendors tools to implement their preferred user controls and to support their varied individual compliance requirements on their AMP pages. | |
| This page demonstrates how a basic blocking consent flow can be built, which would just show a simple blocking popup with an accept and reject button. On reject some content in the page will be blocked. | |
| Important: The consent is saved to localstorage - after accepting/rejecting it once you will only get the popup dialog again after deleting the localstorage content for this host, for example via [Chrome Dev Tools](https://developers.google.com/web/tools/chrome-devtools/manage-data/local-storage#local-storage). | |
| --> | |
| <!-- --> | |
| <!doctype html> | |
| <html ⚡> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="canonical" href="https://amp.dev/documentation/examples/user-consent/client_side_user_consent_flow/index.html"> | |
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | |
| <script async src="https://cdn.ampproject.org/v0.js"></script> | |
| <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> | |
| <title>Client Side User Consent Flow</title> | |
| <!-- ## Setup --> | |
| <!-- Import the consent component in the header. --> | |
| <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script> | |
| <!-- for this example we use `amp-ad` as well as... --> | |
| <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script> | |
| <!-- ... `amp-list` together with... --> | |
| <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script> | |
| <!-- ... `amp-mustache`. --> | |
| <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> | |
| <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> | |
| <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> | |
| <style amp-custom> | |
| :root { | |
| --space-3: 1.5rem; /* 24px */ | |
| } | |
| .consentPopup { | |
| padding: var(--space-3); | |
| margin: 0 auto; | |
| background: #fff; | |
| position: relative; | |
| max-width: 700px; | |
| width: 95%; | |
| width: 65vw; | |
| height: 65vh; | |
| } | |
| .popupOverlay { | |
| height: 100vh; | |
| width: 100vw; | |
| background: rgba(0, 0, 0, 0.7); | |
| padding: 5% 0; | |
| } | |
| #post-consent-ui { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: var(--space-3); | |
| } | |
| .consentPopup amp-iframe { | |
| border-radius: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- | |
| ## Basic usage | |
| The [`amp-consent`](/content/amp-dev/documentation/components/reference/amp-consent.md) component allows to specify the required user consent for this page using the required 'consentRequired' flag. A CORS endpoints can be specified via the `checkConsentHref` attribute. The `amp-consent` component then will check via a POST request if the consent UI needs to be shown. The response should look like this: | |
| ```json | |
| { | |
| "consentRequired": boolean (required), | |
| "consentStateValue": enum (accepted/rejected/unknown) (optional), | |
| "consentString": string (optional), | |
| "expireCache": boolean (default false), | |
| } | |
| ``` | |
| It is possible, to re-trigger the consent dialog using the `myConsent.prompt()` action. One use case for this is giving users the option to change their settings after consent dialog has been dismissed. For this to work, the post consent UI needs to be specified in the `amp-consent` JSON config: `"promptUI": "consentDialog"`. | |
| If `consentRequired` was set to `true` in the incline script config, then `amp-consent` will first check localstorage for an existing consent decision and use it if present. Otherwise it will show the promptUi (if configured). If `consentRequired` was set to false, `amp-consent` will immediately unblock all elements. | |
| --> | |
| <amp-consent id="myUserConsent" layout="nodisplay"> | |
| <script type="application/json"> | |
| { | |
| "consentInstanceId": "consent-id", | |
| "consentRequired": true, | |
| "promptUI": "myConsentFlow", | |
| "postPromptUI": "post-consent-ui" | |
| } | |
| </script> | |
| <div id="myConsentFlow" class="popupOverlay"> | |
| <div class="consentPopup"> | |
| <amp-iframe layout="fill" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" src="https://amp-by-example-api.appspot.com/iframe/external-consent-iframe.html"> | |
| <div placeholder>Loading</div> | |
| </amp-iframe> | |
| </div> | |
| </div> | |
| <div id="post-consent-ui"> | |
| <button on="tap:myUserConsent.prompt()">Update Consent</button> | |
| </div> | |
| </amp-consent> | |
| <amp-img data-block-on-consent src="/static/samples/img/landscape_lake_300x201.jpg" width="300" height="201"> | |
| </amp-img> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment