Skip to content

Commit bff7a4c

Browse files
morssssssebastianbenz
morsssss
authored and
sebastianbenz
committed
Add amp-consent (for GDPR) and ClientID (for analytics) (ampproject#1445)
* Fixed minor typo, added comma * Added HTML and CSS for GDPR. * Made close and OK buttons actually work! * Added inclusion variables for <amp-consent> and <amp-geo> * Use new footer-boilerplate.html. Take consent.css back out of shared.css as it's not being included. More changes as per discussion with sbenz. * Include GDPR consent only if <amp-geo> and <amp-consent> aren't already on the page, as they are in consent/geo samples. If either of these components is used twice, AMP gets mad. * It's ok to include GDPR consent on Story pages. * Let's just pretend that last commit never existed, shall we? * Removed unnecessary extra classes from amp-consent * Add skipValidation to pages that will need to skip validation... for now... * Remove <amp-consent> from list of tags to auto-remove. * Don't insert <amp-consent> into stories. Later, we'll make a mechanism to use <amp-consent-story> instead. (It needs to be a child of <amp-story>, so we can't insert it here. * New template for <amp-story-consent>. * Removed spacing as per @sebastianbenz * Re-enabled validation, as a test * Removed US * Added skipValidation back in.
1 parent 5fac938 commit bff7a4c

20 files changed

+353
-154
lines changed

‎src/stories/10_Introduction/_AMP_Story_Hello_World.html

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
<!---{
2+
"skipValidation": "true"
3+
}--->
14
<!--
25
## Introduction
36

‎src/stories/20_Features/Animations.html

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
<!---{
2+
"skipValidation": "true"
3+
}--->
14
<!--
25
## Introduction
36

‎src/stories/20_Features/Layouts.html

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
<!---{
2+
"skipValidation": "true"
3+
}--->
14
<!--
25
## Introduction
36

‎src/stories/20_Features/Media.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!---{
2-
"experiments": ["amp-google-vrview-image"]
2+
"experiments": ["amp-google-vrview-image"],
3+
"skipValidation": "true"
34
}--->
45
<!--
56
## Introduction

‎src/stories/30_Monetization/DoubleClick.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!--- {
2-
"preview": "default"
2+
"preview": "default",
3+
"skipValidation": "true"
34
}--->
45

56
<!--

‎src/stories/30_Monetization/Publisher_Served.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!--- {
2-
"preview": "default"
2+
"preview": "default",
3+
"skipValidation": "true"
34
}--->
45

56
<!--

‎src/stories/30_Visual_Effects/Ken_Burns.html

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
<!---{
2+
"skipValidation": "true"
3+
}--->
14
<!--
25
## Introduction
36

‎src/stories/50_User_Consent/Story_User_Consent.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!--- {
2-
"preview": "default"
2+
"preview": "default",
3+
"skipValidation": "true"
34
}--->
45
<!--
56
## Introduction

‎tasks/compile-example.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const storyBookend = require('./bookend.json');
3232

3333
const STORY_EMBED_DIR = __dirname + '/../api/dist/';
3434
const AMP_STORY_CLEANER_REGEX =
35-
['amp-story', 'amp-story-auto-ads', 'amp-consent']
35+
['amp-story', 'amp-story-auto-ads']
3636
.map(extension =>
3737
new RegExp('<script\\s+async\\s+custom-element="' + extension
3838
+ '"\\s+src="https:\\/\\/cdn\\.ampproject\\.org\\/v0\\/' + extension
@@ -229,6 +229,8 @@ module.exports = function(config, indexPath, updateTimestamp) {
229229
includesIframe: document.importsComponent('amp-iframe'),
230230
includesSelector: document.importsComponent('amp-selector'),
231231
includesSidebar: document.importsComponent('amp-sidebar'),
232+
includesConsent: document.importsComponent('amp-consent'),
233+
includesGeo: document.importsComponent('amp-geo'),
232234
includesServiceWorker:
233235
document.importsComponent('amp-install-serviceworker')
234236
|| document.metadata.skipServiceWorker,

‎templates/consent-story.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{{^includesConsent}}
2+
{{^includesGeo}}
3+
<amp-geo layout="nodisplay">
4+
<script type="application/json">
5+
{
6+
"ISOCountryGroups": {
7+
"eu": ["at", "be", "bg", "ch", "cy", "cz", "dk", "de", "ee", "el", "es", "fi", "fr", "hr", "ie", "is", "it", "li", "lv", "lt", "lu", "hu", "mt", "nl", "no", "pl", "pt", "ro", "si", "sk", "se", "uk"]
8+
}
9+
}
10+
</script>
11+
</amp-geo>
12+
13+
<amp-consent id="consent" layout="nodisplay">
14+
<script type="application/json">
15+
{
16+
"consents": {
17+
"eu": {
18+
"promptIfUnknownForGeoGroup": "eu",
19+
"promptUI": "consent-popup"
20+
}
21+
}
22+
}
23+
</script>
24+
25+
<amp-story-consent id="consent-popup" layout="nodisplay">
26+
<script type="application/json">
27+
{
28+
"title": "",
29+
"message": "We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href='https://policies.google.com/technologies/cookies'>use of cookies</a> and <a href='https://policies.google.com/privacy'>privacy policy</a>."
30+
"vendors": []
31+
}
32+
</script>
33+
</amp-story-consent>
34+
</amp-consent>
35+
{{/includesGeo}}
36+
{{/includesConsent}}

‎templates/consent.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{{^includesConsent}}
2+
{{^includesGeo}}
3+
<amp-geo layout="nodisplay">
4+
<script type="application/json">
5+
{
6+
"ISOCountryGroups": {
7+
"eu": ["at", "be", "bg", "ch", "cy", "cz", "dk", "de", "ee", "el", "es", "fi", "fr", "hr", "ie", "is", "it", "li", "lv", "lt", "lu", "hu", "mt", "nl", "no", "pl", "pt", "ro", "si", "sk", "se", "uk", "us"]
8+
}
9+
}
10+
</script>
11+
</amp-geo>
12+
13+
<amp-consent id="consent" layout="nodisplay">
14+
<script type="application/json">
15+
{
16+
"consents": {
17+
"eu": {
18+
"promptIfUnknownForGeoGroup": "eu",
19+
"promptUI": "consent-popup"
20+
}
21+
}
22+
}
23+
</script>
24+
25+
<div id="consent-popup" class="consent-popup">
26+
<div>
27+
<a href="#" on="tap:consent.dismiss" class="close-button" role="button" tabindex="0">✕</a>
28+
<p>
29+
We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://policies.google.com/privacy">privacy policy</a>.
30+
</p>
31+
<a class="ampstart-btn ampstart-btn-secondary caps text-decoration-none inline-block" on="tap:consent.accept" role="button" tabindex="1">OK</a>
32+
</div>
33+
</div>
34+
</amp-consent>
35+
{{/includesGeo}}
36+
{{/includesConsent}}

‎templates/css/consent.css

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
@keyframes slideUp {
2+
0% {
3+
transform: translateY(100%);
4+
opacity: 0.5;
5+
}
6+
100% {
7+
transform: translateY(0);
8+
opacity: 1;
9+
}
10+
}
11+
12+
amp-consent {
13+
background: white;
14+
box-shadow: rgba(0, 0, 0, 0.26) 0 0 19px 0;
15+
animation: .5s ease-out 0s 1 slideUp;
16+
}
17+
18+
.consent-popup a {
19+
text-transform: none;
20+
font-size: inherit;
21+
text-decoration: none;
22+
}
23+
24+
.consent-popup a.close-button {
25+
position: absolute;
26+
color: #333;
27+
}
28+
29+
.consent-popup .ampstart-btn {
30+
width: 150px;
31+
text-align: center;
32+
}
33+
34+
.consent-popup p {
35+
line-height: 20px;
36+
font-size: 14px;
37+
}
38+
39+
.consent-popup p a {
40+
color: #b60845;
41+
}
42+
43+
.consent-popup div {
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
}
48+
49+
.consent-popup button {
50+
padding: 13px 18px;
51+
width: 142px;
52+
flex: none;
53+
align-self: center;
54+
}
55+
56+
/* phones */
57+
@media (max-width: 640px) {
58+
amp-consent a.close-button {
59+
font-size: 22px;
60+
top: 15px;
61+
right: 13px;
62+
}
63+
64+
.consent-popup div {
65+
flex-flow: column wrap;
66+
align-items: center;
67+
margin: 12px 25px 15px 12px;
68+
}
69+
70+
.consent-popup p {
71+
padding: 5px 20px 5px 10px;
72+
margin: 0 0 10px 0;
73+
}
74+
}
75+
76+
/* tablets and desktop */
77+
@media (min-width: 641px) {
78+
.consent-popup a.close-button {
79+
font-size: 25px;
80+
left: 30px;
81+
}
82+
83+
.consent-popup div {
84+
flex-flow: row;
85+
height: 100px;
86+
margin: 0 40px;
87+
}
88+
89+
.consent-popup p {
90+
max-width: 660px;
91+
padding: 0 25px 0 40px;
92+
margin: 0;
93+
}
94+
}
95+
96+
@media (max-width: 320px) {
97+
.consent-popup p {
98+
line-height: 16px;
99+
font-size: 12px;
100+
}
101+
}

0 commit comments

Comments
 (0)