amp-user-notification

簡介

使用 amp-user-notification 向使用者顯示可關閉的通知。使用此功能實作對話方塊，以通知使用者關於 Cookie 的資訊。

設定

在標頭中匯入 amp-user-notification。

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

amp-user-notification 也需要匯入 amp-analytics。

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

指定任何額外的 CSS，預設 CSS 類別會將 amp-user-notification 元素放在左下角。

<style amp-custom>
  :root {
    --space-2: 1rem;   /* 16px */
  }
  /* Center the notification content */
  amp-user-notification.sample-notification {
    padding: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  amp-user-notification.sample-notification > button {
    min-width: 80px;
  }
</style>

基本用法與本機儲存空間

預設情況下，當使用者同意 Cookie 政策時，狀態會儲存在本機儲存空間中。

<amp-user-notification id="my-notification" class="sample-notification" layout="nodisplay">
  This is an amp-user-notification. It uses local storage to store the dismissed state.
  <button on="tap:my-notification.dismiss">I accept</button>
</amp-user-notification>

進階用法與伺服器端點

當使用後端解決方案時，可以使用兩個參數：data-show-if-href 和 data-dismiss-if-href。它們可以一起或分開使用。

data-show-if-href 需要指向伺服器端點，傳回 { "showNotification": true|false }。
當通知被關閉時，將會呼叫 data-dismiss-href 定義的 URL。

您可以在這裡找到範例後端實作。

如果通知已經被關閉，並且相關項目已經新增到本機儲存空間，即使您已設定 data-show-if-href 和 data-dismiss-href，通知也不會出現。

<amp-user-notification id="my-notification-with-server-endpoint" class="sample-notification" layout="nodisplay" data-show-if-href="https://amp.dev.org.tw/documentation/examples/components/amp-user-notification/show?timestamp=TIMESTAMP" data-dismiss-href="https://amp.dev.org.tw/documentation/examples/components/amp-user-notification/echo/post">
    This is an amp-user-notification. It uses a backend service to verify if the notification has to be shown.
    <button on="tap:my-notification.dismiss">I accept</button>
</amp-user-notification>

需要更多說明嗎？

如果此頁面上的說明未能涵蓋您的所有問題，請隨時聯繫其他 AMP 使用者，討論您的確切使用案例。

前往 Stack Overflow

有未說明的特色功能嗎？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題提供一次性的貢獻。

在 GitHub 上編輯範例

由 @sebastianbenz 撰寫