forked from ampproject/amphtml
-
Notifications
You must be signed in to change notification settings - Fork 0
/
analytics-notification.amp.html
95 lines (87 loc) · 3.31 KB
/
analytics-notification.amp.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Lorem Ipsum | PublisherName</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>
amp-user-notification {
min-height: 30px;
font-family: 'Roboto';
font-weight: 500;
line-height: 30px;
padding: 8px;
background: #46b6ac;
}
amp-user-notification .btn {
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;
}
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
amp-user-notification.amp-active {
opacity: 0;
-webkit-animation: fadeIn ease-in 1s 1 forwards;
-moz-animation: fadeIn ease-in 1s 1 forwards;
animation: fadeIn ease-in 1s 1 forwards;
}
</style>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-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>
<amp-user-notification
layout=nodisplay
id="amp-user-notification1"
data-show-if-href="https://example.com/api/show?timestamp=TIMESTAMP"
data-dismiss-href="https://example.com/api/echo/post">
This site uses cookies to personalize content.
<a class="btn" on="tap:amp-user-notification1.dismiss">I accept</a>
</amp-user-notification>
<amp-analytics data-consent-notification-id="amp-user-notification1">
<script type="application/json">
{
"requests": {
"test-ping": "https://my-analytics.com/ping?title=${title}&acct=${account}"
},
"vars": {
"title": "A page that sends a ping",
"account": "12345"
},
"triggers": {
"page-view": {
"on": "visible",
"request": "test-ping"
}
}
}
</script>
</amp-analytics>
</body>
</html>