如何借助 amp-story-consent 构建 AMP cookie 同意? [英] How to construct AMP cookie consent with the help of amp-story-consent?

问题描述

我想向我的 AMP 静态网站添加 cookie 同意.我想利用 amp-story-consent 可以提供给我的模态对话框.我研究了各种例子，可能最完整的是这个:

https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fexamples%2Fuser-consent%2Fstory_user_consent&format=websites(示例文档https://amp.dev/documentation/examples/user-同意/story_user_consent/?referrer=ampbyexample.com)

我的问题是我只想显示 JSON 片段中定义的标题/消息/供应商

 <脚本类型=应用程序/json">{"title": "标题","message": "这是关于此选项的更多信息.这是与此选项相关的项目列表.",供应商":[项目 1"、项目 2"、项目 3"、项目 4"、项目 5"、项目 6"、项目 7"、项目 8"、项目 9"、第 10 项"]}</amp-story-consent>

加上接受和拒绝按钮.获得 Cookie 同意后，我实际上没有任何故事页面或任何故事书挡，但 AMP 验证规则似乎需要它.这是一个问题.操场上显示了拒绝/接受按钮对，我想要一个拒绝/接受对，但我看不到在哪里可以定义.

在纯粹的 amp-consent 文档中有按钮(请参阅 https://amp.dev/documentation/components/amp-consent/):

<button on="tap:consent-element.accept" role="button">接受</button><button on="tap:consent-element.reject" role="button">拒绝</button><button on="tap:consent-element.dismiss" role="button">Dismiss</button>

有人有例子或指导吗?

<小时>

请注意，https://amp.dev/documentation/components/amp-consent/ 有这个示例片段.它说示例:在 AMP 故事上显示提示用户界面"

<脚本类型=应用程序/json">{同意":{我的同意":{"checkConsentHref": "https://amp.dev/documentation/examples/api/get-consent","promptUI": "同意用户界面"}}}<amp-story-consent id="consent-ui" layout="nodisplay"><脚本类型=应用程序/json">{"title": "我的标题","message": "我的示例消息.",供应商":[项目 1"、项目 2"、项目 3"、项目 4"]}</amp-story-consent></amp-consent>

如何让它发挥作用?(正如我提到的，我没有任何故事页面或任何故事书挡，正如代码片段所暗示的那样).

解决方案

你不能在 amp-story 之外使用 amp-story-consent，它必须有一些amp-story-page 元素的数量.

I'd like to add a cookie consent to my AMP static website. I'd like to take advantage of the modal dialog what the amp-story-consent could provide to me. I studied various examples, maybe the most complete is this:

https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fexamples%2Fuser-consent%2Fstory_user_consent&format=websites (example documentation https://amp.dev/documentation/examples/user-consent/story_user_consent/?referrer=ampbyexample.com)

My problem is that I only want to display the title / message / vendors defined in the JSON snippet

    <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>

plus an Accept and a Reject button. With a Cookie consent I don't really have any story pages or any story bookend, but the AMP validation rules seems to require it. That's one problem. The playground shows a Decline / Accept button pair, I'd like a Reject / Accept pair but I don't see where this can be defined.

In the bare amp-consent documentation there are buttons (see "Consent configuration" at https://amp.dev/documentation/components/amp-consent/):

<div id="consent-ui">
  <button on="tap:consent-element.accept" role="button">Accept</button>
  <button on="tap:consent-element.reject" role="button">Reject</button>
  <button on="tap:consent-element.dismiss" role="button">Dismiss</button>
</div>

Does anyone have an example or guidance?

---

Note that the https://amp.dev/documentation/components/amp-consent/ has this example snippet. It says "Example: Displays a prompt user interface on an AMP Story"

<amp-consent layout="nodisplay" id="consent-element">
  <script type="application/json">
    {
      "consents": {
        "my-consent": {
          "checkConsentHref": "https://amp.dev/documentation/examples/api/get-consent",
          "promptUI": "consent-ui"
        }
      }
    }
  </script>
  <amp-story-consent id="consent-ui" layout="nodisplay">
    <script type="application/json">
      {
        "title": "My title",
        "message": "My example message.",
        "vendors": ["Item 1", "Item 2", "Item 3", "Item 4"]
      }
    </script>
  </amp-story-consent>
</amp-consent>

How to get that working? (As I mentioned I don't have any story pages or any story bookend as the snippet suggests as well).

解决方案

You cannot use amp-story-consent outside of an amp-story, which must have some number of amp-story-page elements.

这篇关于如何借助 amp-story-consent 构建 AMP cookie 同意?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！