forked from ampproject/amphtml
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathanalytics-notification-with-geo.amp.html
134 lines (123 loc) · 4.92 KB
/
analytics-notification-with-geo.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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html ⚡ lang="en">
<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-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
<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-geo layout=nodisplay>
<script type="application/json">
{
"ISOCountryGroups": {
"nafta": [ "ca", "mx", "us", "unknown" ],
"waldo": [ "unknown" ],
"anz": [ "au", "nz" ],
"britainAndIreland": [ "gb", "ie" ]
}
}
</script>
</amp-geo>
<!-- single country group case -->
<amp-user-notification
layout=nodisplay
id="amp-user-notification1"
data-show-if-geo="nafta"
data-dismiss-href="https://example.com/api/echo/post">
This notice is only shown in Canada, Mexico and USA.
<a class="btn" on="tap:amp-user-notification1.dismiss">I accept</a>
</amp-user-notification>
<!-- multi country group case -->
<amp-user-notification
layout=nodisplay
id="amp-user-notification2"
data-show-if-geo="anz, britainAndIreland"
data-dismiss-href="https://example.com/api/echo/post">
Australia, New Zealand. Britain and Ireland notice.
<a class="btn" on="tap:amp-user-notification1.dismiss">I accept</a>
</amp-user-notification>
<!-- negative match case -->
<amp-user-notification
layout=nodisplay
id="amp-user-notification3"
data-show-if-not-geo="nafta, britainAndIreland, anz"
data-dismiss-href="https://example.com/api/echo/post">
Everywhere else including unknown countries.
<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>
<h2>Notification with amp-geo demo</h2>
<p>This page has three "amp-user-notification" elements. They
are configured to trigger in different countries. One for NAFTA (CA, MX, US). One for multiple country groups and one for the negative matched country groups.</p>
<p>If you are using localhost or in the experimental channel you can set your country using #amp-geo= with the two letter ISO country code. For example #amp-geo=us.</p>
</body>
</html>