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

基於地理位置的同意聲明流程
- 簡介設定設定 amp-geo 定義同意聲明流程測試

網站

簡介

有時，只需要向特定國家或地區的使用者要求同意聲明。此範例示範如何搭配 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，如果找不到本機儲存空間決策，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"
}

如果本機儲存空間決策存在，系統會加以使用；否則，由於 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>