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.
ISOCountry Code:
Matched Country Groups:
<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
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:
<p class="message-eea">You're in the EU.</p>
<p class="message-non-eea">You're outside the EU.</p>
이 페이지의 설명만으로 궁금한 점이 모두 해결되지 않는다면 다른 AMP 사용자에게 문의하여 구체적인 활용 사례를 논의해 보세요.
Stack Overflow로 이동 설명이 부족한 기능을 발견하셨나요?AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.
GitHub에서 샘플 수정하기-
Written by @kul3r4