使用者同意
簡介
此範例說明如何在 AMP Story 中整合 amp-consent，讓使用者可以控制資料分享和 Cookie。
設定
匯入 amp-story 擴充功能以建立 AMP Story...
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
... 以及 amp-consent 擴充功能。
<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
在 AMP Story 內實作使用者同意機制
amp-consent 將在同意對話方塊中顯示由 publisher-logo-src 指定的標誌。
<amp-story standalone
title="Story With User Consent"
publisher="Google"
poster-portrait-src="https://amp.dev.org.tw/img/story_video_dog_cover.jpg"
publisher-logo-src="https://amp.dev.org.tw/static/samples/img/amp_logo_pink.svg">
amp-consent 元件支援透過 checkConsentHref 屬性指定 CORS 端點，元件會透過 POST 要求查詢該端點，以判斷是否需要顯示為其指定的同意聲明 UI。回應應如下所示
{ "consentRequired": boolean (required), "consentStateValue": enum (accepted/rejected/unknown) (optional), "consentString": string (optional), "expireCache": boolean (default false), }
回應會指出是否需要顯示同意聲明。如果需要顯示，系統會顯示 ID 在 promptUI 中指定的元素。針對 AMP Story，您可以指定巢狀 amp-story-consent 元素內的同意聲明標題、訊息和廠商清單。
<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>
示範：amp-consent 在 amp-story 內
同意對話方塊會在故事開始時以覆疊方式顯示。
需要進一步說明嗎？
如果本頁的說明未能解答您的所有疑問，歡迎您與其他 AMP 使用者交流，討論您的確切使用案例。
前往 Stack Overflow 有未說明的功能？AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性的貢獻。
在 GitHub 上編輯範例