範例：基於地理位置的同意聲明流程 - amp.dev

基於地理位置的同意聲明流程
- Introduction Setup Setting up amp-geo Defining the consent flow Testing

網站

簡介

有時僅需向特定國家或地區的使用者徵求同意。本範例示範如何搭配 amp-consent 和 amp-geo 來達成此目的。在本範例中，我們將建立一個同意聲明對話方塊，該對話方塊將向美國加州的使用者顯示，另一個同意聲明對話方塊則將向 EEA（預先定義的國家/地區群組）的使用者顯示。

設定

我們需要匯入 amp-consent 和 ...

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

... amp-geo 擴充功能。

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

設定 amp-geo

首先，我們需要設定 amp-geo 擴充功能。我們將使用代表美國的 ISO 代碼 us、preset-eea 和 unknown

<amp-geo layout="nodisplay">
  <script type="application/json">
    {
      "ISOCountryGroups": {
        "eea": [ "preset-eea", "unknown" ],
        "usca": [ "preset-us-ca" ]
      }
    }
  </script>
</amp-geo>

流程應依賴 amp-geo 來根據使用者的位置判斷要顯示哪個設定，因此我們設定旗標：geoOverride。

如果 amp-geo 發現使用者位於美國加州群組，則對應設定的內容會覆寫頂層同意聲明設定（EEA 亦然）。

EEA（和不明）使用者的最終設定看起來會像這樣

{
  "consentInstanceId": "world-wide-consent",
  "consentRequired": true,
  "promptUI": "eea-consent-ui",
  "postPromptUI": "post-consent-ui"
}

由於 consentRequired 為 true 且已設定 promptUI，因此如果找不到 localstorage 決策，amp-consent 就會顯示提示。

美國加州使用者的最終設定看起來會像這樣

{
  "consentInstanceId": "world-wide-consent",
  "consentRequired": true,
  "promptUI": "usca-consent-ui",
  "postPromptUI": "post-consent-ui"
}

而既不在這些地理群組中的使用者的最終設定會是

{
  "consentInstanceId": "world-wide-consent",
  "consentRequired": false,
  "postPromptUI": "post-consent-ui"
}

如果 localstorage 決策存在，系統就會使用該決策；否則，由於 consentRequired 為 false，amp-consent 將不會執行任何動作。

<amp-consent id="myUserConsent" layout="nodisplay">
    <script type="application/json">{
      "consentInstanceId": "world-wide-consent",
      "consentRequired": false,
      "geoOverride": {
        "eea": {
          "promptUI": "eea-consent-ui",
          "consentRequired": true
        },
        "usca": {
          "consentRequired": true,
          "promptUI": "usca-consent-ui"
        }
      },
      "postPromptUI": "post-consent-ui"
    }</script>
    <div id="eea-consent-ui" class="popupOverlay">
      <div class="consentPopup">
        <div class="dismiss-button" role="button" tabindex="0" on="tap:myUserConsent.dismiss">X</div>
        <h2>Headline</h2>
        <p>This is an important message requiring you to make a choice if you're based in the EEA.</p>
        <button on="tap:myUserConsent.accept">Accept</button>
        <button on="tap:myUserConsent.reject">Reject</button>
      </div>
    </div>
    <div id="usca-consent-ui" class="popupOverlay">
        <div class="consentPopup">
          <div class="dismiss-button" role="button" tabindex="0" on="tap:myUserConsent.dismiss">X</div>
          <h2>Headline</h2>
          <p>This is an important message requiring you to make a choice if you're based in the U.S. California.</p>
          <button on="tap:myUserConsent.accept">Accept</button>
          <button on="tap:myUserConsent.reject">Reject</button>
        </div>
      </div>
    <div id="post-consent-ui">
      <button on="tap:myUserConsent.prompt()">Update Consent</button>
    </div>
  </amp-consent>