Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

✨amp-consent: support external consent flow #15805

Merged
merged 5 commits into from Jun 20, 2018
Merged

✨amp-consent: support external consent flow #15805

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ddfeaf6
external consent flow
zhouyx Jun 4, 2018
3048f2c
remove dependency
zhouyx Jun 8, 2018
48bab28
move logic to amp-consent
zhouyx Jun 18, 2018
84c0227
add tests
zhouyx Jun 18, 2018
1e4083a
address comment
zhouyx Jun 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
338 changes: 338 additions & 0 deletions examples/amp-consent-iframe.amp.html
View file
Open in desktop
@@ -0,0 +1,338 @@
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>AMP Consent Test</title>
<link rel="canonical" href="amps.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>

<style amp-custom>
body {
margin: 0;
font-family: 'Georgia', Serif;
}

.brand-logo {
font-family: 'Open Sans';
}

.ad-container {
display: flex;
justify-content: center;
}

.content-container p {
line-height: 24px;
}

header,
.article-body {
padding: 15px;
}

.full-bleed {
margin: 0 -15px;
}

figure {
margin: 0;
}

figcaption {
color: #6f757a;
padding: 15px 0;
font-size: .9em;
}

.author {
display: flex;
align-items: center;

background: #f4f4f4;
padding: 0 15px;

font-size: .8em;

border: solid #dcdcdc;
border-width: 1px 0;
}

.header-time {
color: #a8a3ae;
font-family: 'Roboto';
font-size: 12px;
}

.author p {
margin: 5px;
}

.byline {
font-family: 'Roboto';
display: inline-block;
}

.byline p {
line-height: normal;
}

.byline .brand {
color: #6f757a;
}

.standfirst {
color: #6f757a;
}

.mailto {
text-decoration: none;
}

#author-avatar {
margin: 10px;
border: 5px solid #fff;
width: 50px;
height: 50px;
border-radius: 50%;
}

h1 {
margin: 5px 0;
font-weight: normal;
}

footer {
display: flex;
align-items: center;
justify-content: center;
height: 226px;
background: #f4f4f4;
}

amp-consent {
min-height: 30px;
font-family: 'Roboto';
font-weight: 500;
line-height: 30px;
padding: 8px;
background: #46b6ac;
}

amp-consent button {
border: none;
border-radius: 2px;

color: #fafafa;
height: 26px;
min-width: 32px;
padding: 0 16px;
margin: 0 16px;
text-transform: uppercase;
letter-spacing: 0;
cursor: pointer;
vertical-align: middle;
line-height: 26px;
text-align: center;
background: #3f51b5;
}

hr {
margin: 0;
}
</style>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<header>
<div class="brand-logo">
PublisherLogo
</div>
</header>
<main role="main">
<h3>Image that is blocked by consent</h3>
<amp-img
data-block-on-consent
src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no-n" width=300 height=200></amp-img>

<h3>Image that is NOT blocked by consent</h3>
<amp-img
src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no-n" width=300 height=200></amp-img>


<article>


<div class="content-container">
<header>
<h1 itemprop="headline">Lorem Ipsum</h1>
<time class="header-time" itemprop="datePublished"
datetime="2015-09-14 13:00">September 14, 2015</time>
<p class="standfirst">
Fusce pretium tempor justo, vitae consequat dolor maximus eget.
</p>
</header>

<div>
Revoke consent
<button class="button" on="tap:ABC.prompt" role="button">Manage</button>
</div>

<div class="author">
<div class="byline">
<p>
by <span itemscope itemtype="http://schema.org/Person"
itemprop="author"><b>Lorem Ipsum</b>
<a class="mailto" href="mailto:lorem.ipsum@">
lorem.ipsum@</a></span>
</p>
<p class="brand">PublisherName News Reporter<p>
</div>
</div>
<div class="article-body" itemprop="articleBody">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
luctus nunc ut elit cursus, et imperdiet diam vehicula.
Duis et nisi sed urna blandit bibendum et sit amet erat.
Suspendisse potenti. Curabitur consequat volutpat arcu nec
elementum. Etiam a turpis ac libero varius condimentum.
Maecenas sollicitudin felis aliquam tortor vulputate,
ac posuere velit semper.
</p>
<amp-ad width="320" height="50"
data-block-on-consent
type="doubleclick"
data-slot="/4119129/mobile_ad_banner"
rtc-config='{"vendors": {"fakeVendor": {"SLOT_ID": "1", "PAGE_ID": "1"}, "nonexistent-vendor": {"SLOT_ID": "1"}, "fakeVendor2": {"SLOT_ID": "1"}}, "urls": ["https://localhost:4443/posts?slot_id=1", "https://localhost:4443/abc?timeout=true", "https://broken.zzzzzz", "https://localhost:4443/zqq?slot_id=1"], "timeoutMillis": 500}'
json='{"targeting":{"food":["burgers","chicken"]},"categoryExclusions":["health"],"tagForChildDirectedTreatment":0}'>
</amp-ad>
<p>
Fusce pretium tempor justo, vitae consequat dolor maximus eget.
Aliquam iaculis tincidunt quam sed maximus. Suspendisse faucibus
ornare sodales. Nullam id dolor vitae arcu consequat ornare a
et lectus. Sed tempus eget enim eget lobortis.
Mauris sem est, accumsan sed tincidunt ut, sagittis vel arcu.
Nullam in libero nisi.
</p>

<p>
Sed pharetra semper fringilla. Nulla fringilla, neque eget
varius suscipit, mi turpis congue odio, quis dignissim nisi
nulla at erat. Duis non nibh vel erat vehicula hendrerit eget
vel velit. Donec congue augue magna, nec eleifend dui porttitor
sed. Cras orci quam, dignissim nec elementum ac, bibendum et purus.
Ut elementum mi eget felis ultrices tempus. Maecenas nec sodales
ex. Phasellus ultrices, purus non egestas ullamcorper, felis
lorem ultrices nibh, in tristique mauris justo sed ante.
Nunc commodo purus feugiat metus bibendum consequat. Duis
finibus urna ut ligula auctor, sed vehicula ex aliquam.
Sed sed augue auctor, porta turpis ultrices, cursus diam.
In venenatis aliquet porta. Sed volutpat fermentum quam,
ac molestie nulla porttitor ac. Donec porta risus ut enim
pellentesque, id placerat elit ornare.
</p>

<amp-ad width=300 height=250
type="_ping_"
data-block-on-consent
data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n'
data-valid='true'>
</amp-ad>

<p>
Curabitur convallis, urna quis pulvinar feugiat, purus diam
posuere turpis, sit amet tincidunt purus justo et mi. Donec
sapien urna, aliquam ut lacinia quis, varius vitae ex.
Maecenas efficitur iaculis lorem, at imperdiet orci viverra
in. Nullam eu erat eu metus ultrices viverra a sit amet leo.
Pellentesque est felis, pulvinar mollis sollicitudin et,
suscipit eget massa. Nunc bibendum non nunc et consequat.
Quisque auctor est vel leo faucibus, non faucibus magna ultricies.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Vestibulum tortor lacus, bibendum et
enim eu, vehicula placerat erat. Nullam gravida rhoncus accumsan.
Integer suscipit iaculis elit nec mollis. Vestibulum eget arcu
nec lectus finibus rutrum vel sed orci.
</p>

<figure>
<figcaption>
Fusce pretium tempor justo, vitae consequat dolor maximus eget.
</figcaption>
</figure>
<hr>

<p>
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nulla et viverra turpis. Fusce
viverra enim eget elit blandit, in finibus enim blandit. Integer
fermentum eleifend felis non posuere. In vulputate et metus at
aliquam. Praesent a varius est. Quisque et tincidunt nisi.
Nam porta urna at turpis lacinia, sit amet mattis eros elementum.
Etiam vel mauris mattis, dignissim tortor in, pulvinar arcu.
In molestie sem elit, tincidunt venenatis tortor aliquet sodales.
Ut elementum velit fermentum felis volutpat sodales in non libero.
Aliquam erat volutpat.
</p>

<p>
Morbi at velit vitae eros congue congue venenatis non dui.
Sed lacus sem, feugiat sed elementum sed, maximus sed lacus.
Integer accumsan magna in sagittis pharetra. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Suspendisse ac nisl efficitur ligula aliquam lacinia
eu in magna. Vestibulum non felis odio. Ut consectetur venenatis
felis aliquet maximus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
</div>

<amp-iframe id='1234' width=300 height=50
on:"message:myConsentId.accept"
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
layout="responsive"
frameborder="0"
src="http://ads.localhost:8000/test/manual/diy-consent.html">
<placeholder></placeholder>
</amp-iframe>

<amp-consent id='ABC' layout='nodisplay'>
<script type="application/json">{
"consents": {
"myConsentId": {
"checkConsentHref": "http://localhost:8000/get-consent-v1",
"promptUI": "ui1"
}
},
"postPromptUI": "postPromptUI"
}</script>
<div id="ui1">
Can I load the image??
<amp-iframe id='5678' width=300 height=50
on:"message:myConsentId.accept"
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
layout="responsive"
frameborder="0"
src="http://ads.localhost:8000/test/manual/diy-consent.html">
<placeholder></placeholder>
</amp-iframe>
</div>
<div id="postPromptUI">
Post Prompt UI
<button on="tap:ABC.prompt" role="button">Manage</button>
</div>
</amp-consent>
</article>
</main>

<footer>
<div class="brand-logo">PublisherLogo</div>
</footer>
</body>
</html>