AMP
  • websites

amp-geo

Introduction

The amp-geo extension makes it possible to vary small sections of content based on an approximation of the users' country-level location, similar to the level of an ISO Country Code. The amp-geo component also provides a simple mechanism to group locations, making it easier to apply attributes to several geos at once.

Setup

Import the amp-geo component.

<script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>

Basic usage

amp-geo components is configured via json and every page can only contain one amp-geo tag. We are showing different samples of amp-geo on this page and we will explain the json configuration for each sample.

<amp-geo layout="nodisplay">
    <script type="application/json">
      {
        "AmpBind": true,
        "ISOCountryGroups": {
          "soccer": [ "au", "ca", "ie", "nz", "us", "za" ],
          "football": [ "unknown" ],
          "eea": [ "preset-eea" ]
        }
      }
    </script>
  </amp-geo>

amp-geo makes available a class amp-iso-country-XX where XX is an ISO Country Code. In the following example, the component determines the ISO Country Code corresponding to the user's approximate location. If this is "ca" (Canada), the page displays a maple leaf flag, otherwise the American flag. For testing, if you want to force the country to be Canada, you can append #amp-geo=ca to the URL like https://amp.dev/documentation/examples/components/amp-geo#amp-geo=ca and enable the beta-channel here. Read more about debugging amp-geo on the official doc

<div class="flag"></div>

Country grouping

Here we are using the amp-geo grouping feature to define two different groups of ISO country codes: one for those who play soccer and one for those who play football. Notice how we have a group containing 'unknown' in the amp-geo tag: if the country cannot be determined, the value is set to 'unknown'. When using the grouping feature with amp-geo at least one group must contain 'unknown'. When using grouping, amp-geo makes available a class amp-geo-group-XX where XX is the name of the group determined by amp-geo.

The game is called

<p>The game is called <span class="football"></span></p>

Integration with amp-bind

If the AMPBind key is present in the amp-geo json configuration, amp-geo inserts an amp-state tag containing the current ISOCountry and group information.

<button on="tap:AMP.setState({ showLocation: true })">Where am I?</button>
<p hidden [hidden]="!showLocation">ISOCountry Code: <span [text]="ampGeo.ISOCountry"></span></p>
<p hidden [hidden]="!showLocation">Matched Country Groups: <span [text]="ampGeo.ISOCountryGroups.join(', ')"></span></p>

Preset country groups

GOOGLE AND THE AMP PROJECT ARE PROVIDING THIS INFORMATION AS A COURTESY BUT DO NOT GUARANTEE THE ACCURACY OR COMPLETENESS OF ANY INFORMATION CONTAINED HEREIN. THIS INFORMATION IS PROVIDED "AS IS" AND WITHOUT ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.

amp-geo supports preset country lists for specific regions. For example, there is a preset for the European Economic Area (EEA) preset-eea which we assign to an ISOCountryGroup named eea:

 "ISOCountryGroups": {
    "eea": [ "preset-eea" ],
    ...
 }

In this sample, we show a different message to users inside and outside the EEA based on the presence of the amp-geo-group-eea class in the body tag using the following css rule:

 body.amp-geo-group-eea .message-non-eea,
 body:not(.amp-geo-group-eea) .message-eea {
   display: none;
 }

Which we then can use to show different messages to users in and outside the EEA:

You're in the EU.

You're outside the EU.

<p class="message-eea">You're in the EU.</p>
<p class="message-non-eea">You're outside the EU.</p>
Bạn cần được giải thích thêm?

Nếu bạn vẫn còn thắc mắc sau khi đọc hướng dẫn trên trang này, hãy liên hệ với những người dùng AMP khác để thảo luận về trường hợp sử dụng cụ thể của bạn.

Truy cập Stack Overflow
Một tính năng chưa được giải thích?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Chỉnh sửa mẫu trên GitHub