-
Notifications
You must be signed in to change notification settings - Fork 3.9k
/
Copy pathamp-geo.amp.html
101 lines (93 loc) · 4.18 KB
/
amp-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
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<title>amp-geo example</title>
<link rel="canonical" href="amps.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
body {
font-family: sans-serif;
max-width: 600px;
font-size: 16px;
line-height: 20px;
padding: 0 20px;
}
body.amp-geo-group-anz {
transform: rotate(180deg);
transition: transform .5s .2s;
}
</style>
<script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<amp-geo layout="nodisplay">
<script type="application/json">
{
"AmpBind": true,
"ISOCountryGroups": {
"nafta": [ "ca", "mx", "us", "unknown" ],
"waldo": [ "unknown" ],
"anz": [ "au", "nz" ],
"usSubdivisions": [ "us-ca", "us-ny" ]
}
}
</script>
</amp-geo>
<h1>My article title</h1>
The amp-geo config on this page is:
<pre>
<code>
<amp-geo layout="nodisplay">
<script type="application/json">
{
"ISOCountryGroups": {
"nafta": [ "ca", "mx", "us", "unknown" ],
"waldo": [ "unknown" ],
"anz": [ "au", "nz" ],
"usSubdivisions": [ "us-ca", "us-ny" ]
}
}
</script>
</amp-geo>
</code>
</pre>
<p>
This means that if your country is "unknown" you will appear in the
"nafta" and "unknown" groups. To change the country for testing
append #amp-geo=<code> to the url and reload the page
(eg #amp-geo=nz, #amp-geo=us us-ny)
</p>
<button on="tap:AMP.setState({myCountry: ampGeo.ISOCountry, mySubdivision: ampGeo.ISOSubdivision})">Where am I?</button>
<p [text]="'The country code is: ' + myCountry "></p>
<p [text]="'The subdivision code is: ' + mySubdivision "></p>
<p [text]="'Matched country groups: ' + ampGeo.ISOCountryGroups.join(', ') "></p>
<p>There is an amp-pixel variable substitution example here</p>
<amp-pixel src="https://raw.githubusercontent.com/ampproject/amphtml/main/examples/img/ampicon.png?via=pixel&groups=AMP_GEO&country=AMP_GEO(ISOCountry)" layout="nodisplay"></amp-pixel>
<p>There is an amp-analytics variable substitution example here</p>
<amp-analytics>
<script type="application/json">
{
"transport": {"beacon": false, "xhrpost": false},
"requests": {
"event": "https://raw.githubusercontent.com/ampproject/amphtml/main/examples/img/ampicon.png?via=analytics&groups=${geoGroups}&country=${geoCountry}"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "event",
"vars": {
"geoGroups": "${ampGeo}",
"geoCountry": "${ampGeo(ISOCountry)}"
}
}
}
}
</script>
</amp-analytics>
</body>
</html>