#BlackLivesMatter
Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
  • stories

User Consent

Introduction

This example shows how to integrate amp-consent in AMP Stories, to offer users control over data sharing and cookies.

Setup

Import the amp-story extension for creating an AMP Story...

<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>

... and the amp-consent extension.

<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>

Implementing User Consent inside an AMP Story

The amp-consent will display the logo specified by publisher-logo-src in the consent dialog.

<amp-story standalone
  title="Story With User Consent"
  publisher="Google"
  poster-portrait-src="https://amp.dev/img/story_video_dog_cover.jpg"
  publisher-logo-src="https://amp.dev/img/amp_logo_pink.svg">

The amp-consent component supports specifying a CORS endpoint via the checkConsentHref attribute, which the component queries via a POST request to determine if the consent UI specified for it needs to be shown. The response should look like this:

  {
    "consentRequired": boolean (required),
    "consentStateValue": enum (accepted/rejected/unknown) (optional),
    "consentString": string (optional),
    "expireCache": boolean (default false),
  }

The response will indicate if the consent needs to be shown or not. If it needs to be shown, the element with the id given in promptUI will be displayed. For AMP Stories, you can specify consent title, message and a list of vendors inside a nested amp-story-consent element.

<amp-consent id="myConsent"
  layout="nodisplay">
  <script type="application/json">
    {
      "consents": {
        "myConsent": {
          "consentInstanceId": "my-amp-story-consent",
          "consentRequired": "remote",
          "checkConsentHref": "/documentation/examples/api/get-consent",
          "promptUI": "consentUI"
        }
      }
    }
  </script>
  <amp-story-consent id="consentUI"
    layout="nodisplay">
    <script type="application/json">
      {
        "title": "Headline",
        "message": "This is some more information about this choice. Here's a list of items related to this choice.",
        "vendors": ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10"]
      }
    </script>
  </amp-story-consent>
</amp-consent>

Demo: amp-consent inside an amp-story

The consent dialog will be shown as an overlay when the story starts.

هل تحتاج إلى مزيد من التوضيح؟

إذا لم تكن الإيضاحات الموجودة في هذه الصفحة تُجيب على جميع أسئلتك، فلا تتردد في التواصل مع مستخدمي AMP الآخرين لمناقشة حالة الاستخدام المحددة لديك بالضبط.

الذهاب إلى Stack Overflow
هل هي ميزة غير موضحة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

تعديل العينة على GitHub