• 網站

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 會插入 amp-state 標記，其中包含目前的 ISOCountry 和群組資訊。

<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" ],
    ...
 }

在這個範例中，我們會根據 body 標記中是否存在 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