• 網站

amp-geo

簡介

amp-geo 擴充功能可根據使用者國家/地區層級位置的近似值（類似於 ISO 國家/地區代碼的層級）來變更小段內容。amp-geo 元件也提供簡單的機制來將位置分組，讓一次將屬性套用至多個地理位置變得更容易。

設定

匯入 amp-geo 元件。

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

基本用法

amp-geo 元件透過 JSON 設定，且每個頁面只能包含一個 amp-geo 標記。我們在此頁面上展示不同的 amp-geo 範例，並將說明每個範例的 JSON 設定。

<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 提供類別 amp-iso-country-XX，其中 XX 是 ISO 國家/地區代碼。在以下範例中，元件會判斷使用者概略位置對應的 ISO 國家/地區代碼。如果代碼是「ca」（加拿大），頁面會顯示楓葉旗，否則會顯示美國國旗。為了進行測試，如果您想強制將國家/地區設為加拿大，可以將 #amp-geo=ca 附加到網址，例如 https://amp.dev.org.tw/documentation/examples/components/amp-geo#amp-geo=ca，並在此處啟用 beta-channel here。如要進一步瞭解 amp-geo 的偵錯，請參閱官方 文件

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

國家/地區分組

在這裡，我們使用 amp-geo 分組功能來定義兩組不同的 ISO 國家/地區代碼：一組適用於玩足球的人，另一組適用於玩美式足球的人。請注意，我們在 amp-geo 標記中加入了一個包含「unknown」的群組：如果無法判斷國家/地區，值會設為「unknown」。當搭配 amp-geo 使用分組功能時，至少必須有一個群組包含「unknown」。使用分組時，amp-geo 會提供類別 amp-geo-group-XX，其中 XX 是由 amp-geo 判斷的群組名稱。

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

與 amp-bind 整合

如果 amp-geo JSON 設定中存在 AMPBind 金鑰，amp-geo 會插入包含目前 ISOCountry 和群組資訊的 amp-state 標記。

<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>

預設國家/地區群組

amp-geo 支援特定區域的預設國家/地區清單。例如，針對歐洲經濟區 (EEA) 有一個預設值 preset-eea，我們將其指派給名為 eea 的 ISOCountryGroup

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

在這個範例中，我們會根據主體標記中是否存在 amp-geo-group-eea 類別，對歐洲經濟區內外的使用者顯示不同的訊息，使用以下 CSS 規則

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

然後我們可以利用這個規則，對歐洲經濟區內外的使用者顯示不同的訊息

<p class="message-eea">You're in the EU.</p>
<p class="message-non-eea">You're outside the EU.</p>

• 作者 @kul3r4