AMP 通过示例的基于地理位置的同意流程是否存在故障?



嗨堆栈溢出社区,

我正在使用此处找到的基于地理位置的同意流程:https://ampbyexample.com/user_consent/geolocation-based_consent_flow

问题在于,基于地理位置的同意消息同时显示在美国和欧盟浏览器上,而不仅仅是欧盟浏览器上。

当我将自定义国家/地区代码附加到示例中时,

欧盟:https://ampbyexample.com/user_consent/geolocation-based_consent_flow/#amp-geo=de

非欧盟:https://ampbyexample.com/user_consent/geolocation-based_consent_flow/#amp-geo=us

我仍然在两个示例中看到同意消息。但是,文档说:

在此示例中,我们将生成一个同意对话框,该对话框仅向来自欧盟的用户显示。

同样,当我将基于地理位置的同意流添加到我自己的网站时,我遇到了同样的问题:

欧盟:https://marcelluslong.com/amp/#amp-geo=de

非欧盟:https://marcelluslong.com/amp/#amp-geo=us

以下是 AMP HTML:

<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum- 
scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>My Consent Form</title>
<link rel="canonical" href="https://example.com/items/55555" />
<script async custom-element="amp-consent" 
src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
<script async custom-element="amp-geo" 
src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script> 
<link href="https://fonts.googleapis.com/cssfamily=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Patua+One" rel="stylesheet">
<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>
.ampstart-btn,.ampstart-btn:visited{color:#DFE4E4}.ampstart-btn{font-family:'Roboto',sans-serif;font-weight:500;font-size:1rem;line-height:1.4;padding:.7em .8em;text-decoration:none;white-space:nowrap;word-wrap:normal;vertical-align:middle;cursor:pointer;background-color:#7e50bb;border:1px solid #8c62c2}.ampstart-btn:active .ampstart-btn:focus{opacity:.8}.ampstart-btn[disabled],.ampstart-btn[disabled]:active,.ampstart-btn[disabled]:focus,.ampstart-btn[disabled]:hover{opacity:.5;outline:0;cursor:default}.ampstart-btn-reject{background-color:#bb5058;color:#fff;border:1px solid #bb5058}.ampstart-btn-reject:visited{color:#fff}.ampstart-btn-accept{background-color:#8dbb50;color:#fff;border:1px solid #8dbb50}.ampstart-btn-accept:visited{color:#fff}.m1{margin:1rem}.consent-msg {font-family:'Roboto',sans-serif;font-weight:400;}.consent-headline {font-family: 'Patua One', cursive; font-size:36px;}.consentPopup{padding:20px;margin:0 auto;background:#F8F7D3;border-radius:5px;position:relative;max-width:700px;width:95%} .popupOverlay{height:100vh;width:100vw;background:F8F7D3;padding:5% 0}.dismiss-button{position:absolute;right:24px;top:16px;cursor:pointer} .amp-caps {text-transform: uppercase;letter-spacing: 0}.popupOverlay p{ color: #333333; padding:15px; }.mx1 {margin-left: 0rem}.mx1{margin-right: 0rem}
</style>
</head>
<body>
<amp-geo layout="nodisplay">
<script type="application/json">
{
"ISOCountryGroups": {
"eu": ["al", "ad", "am", "at", "by", "be", "ba", "bg", "ch", 
"cy", "cz", "de", "dk", "ee", "es", "fo", "fi", "fr", "gb", 
"ge", "gi", "gr", "hu", "hr", "ie", "is", "it", "lt", "lu", 
"lv", "mc", "mk", "mt", "no", "nl", "po", "pt", "ro", "ru", 
"se", "si", "sk", "sm", "tr", "ua", "uk", "va"]
}
}
</script>
</amp-geo>
<amp-consent id="myUserConsent"
layout="nodisplay">
<script type="application/json">
{
"consents": {
"eu": {
"promptIfUnknownForGeoGroup": "eu",
"promptUI": "myConsentFlow"
}
},
"postPromptUI": "post-consent-ui"
}
</script>
<div id="myConsentFlow"
class="popupOverlay">
<div class="consentPopup">
<div class="dismiss-button"
role="button"
tabindex="0"
on="tap:myUserConsent.dismiss">X</div>
<div class="h3 option-font m1 consent-headline">Please choose an option.</div>
<p class="m1 consent-msg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="https://example.com/privacy-policy-amp.pdf">Learn more</a>. 
</p>
<button on="tap:myUserConsent.accept"
class="ampstart-btn ampstart-btn-accept amp-caps mx1">I accept 
cookies</button>
<button on="tap:myUserConsent.reject"
class="ampstart-btn ampstart-btn-reject amp-caps">I refuse 
cookies
</button>
</div>
</div>
<div id="post-consent-ui">
<button on="tap:myUserConsent.prompt()"
class="ampstart-btn amp-caps m1">Manage my cookie settings</button>
</div>
</amp-consent>
</body>
</html>

http://jsbin.com/cixoruliko/edit?html,output

AMP 版本:1528841168349

我是否在 AMP 中遇到了 AMP 基于地理位置的同意流程故障还是其他故障?任何建设性的投入将不胜感激。

要使测试参数正常工作,您需要通过以下方式启用 AMP 开发频道: https://cdn.ampproject.org/experiments.html(第一个复选框(。

最新更新