examples/amp-geo.amp.html - main - githubmirror/amphtml

examples/amp-geo.amp.html
101 строка4 KB
Eldar
✨ Add subdivisions support to amp geo (#37755)
24 фев 2022, 21:01
24 фев 2022, 21:018b1516c
<!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>
    &lt;amp-geo layout=&quot;nodisplay&quot;&gt;
      &lt;script type=&quot;application/json&quot;&gt;
        {
          &quot;ISOCountryGroups&quot;: {
            &quot;nafta&quot;: [ &quot;ca&quot;, &quot;mx&quot;, &quot;us&quot;, &quot;unknown&quot; ],
            &quot;waldo&quot;: [ &quot;unknown&quot; ],
            &quot;anz&quot;: [ &quot;au&quot;, &quot;nz&quot; ],
            &quot;usSubdivisions&quot;: [ &quot;us-ca&quot;, &quot;us-ny&quot; ]
          }
        }
      &lt;/script&gt;
    &lt;/amp-geo&gt;
    </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=&lt;code&gt; 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>