AMP에는 팝업 및 해제 가능한 알림을 표시하기 위한 기본 구성 요소인 amp-user-notification를 제공합니다. 이 구성 요소의 일반적인 용도는 쿠키 경고 (유럽 연합 EU에서 쿠키를 사용하는 사이트에 대한 사용자 동의 알림)를 표시하는 것입니다.
사용자 알림 표시
기본적으로 알림은 화면 하단에 표시됩니다. 물론 알림은 쿠키 경고를 표시하는 데만 국한되지 않습니다. 새로운 콘텐츠 구독, 뉴스레터 가입, 또는 읽지 않은 내용에 대한 알림을 표시할 수 있습니다. 어떻게 작동하는지 봅시다.
가장 먼저 주목할 점은 amp-user-notification을 사용하려면 두 개의 스크립트가 필요하다는 것입니다.
amp-user-notification:
<script async custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>
amp-analytics:
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
다음과 같은 간단한 쿠키 알림을 표시할 수 있습니다.
<amp-user-notification layout="nodisplay" id="cookie-notification"> 이 사이트는 서비스를 제공하고 트래픽을 분석하기 위해 쿠키를 사용합니다. <button on="tap:cookie-notification.dismiss">동의</amp-user-notification>
알림의 모양과 위치는 CSS로 지정할 수 있습니다.
amp-user-notification {
color: #fff;
padding: 0. 5rem;
background-color: #7faac4;
}
팝업 해제 후에도 모든 페이지에 알림이 표시되면 사용자가 불쾌해 할 것입니다. 그렇다면 AMP에서 알림 메시지를 표시할 적절한 시기를 어떻게 지정할까요? 두 가지 방법이 있습니다. 로컬 저장소와 서버 엔드 포인트를 사용하는 것입니다.
기본적으로 AMP는 로컬 저장소를 사용하여 사용자에 대한 알림의 해제 상태를 저장합니다. 사용자가 알림을 닫은 경우 AMP는 로컬 저장소를 확인하고 다시 표시하지 않습니다. 그러나 서버 엔드 포인트를 사용하면 상황이 달라집니다.
서버 엔드 포인트를 사용하여 사용자 알림의 해제 상태 저장
AMP를 사용하면 amp-user-notification과 함께 사용할 수 있는 URL 엔드 포인트는 두 개가 있습니다. 첫 번째는 data-show-if-href 속성에 지정되고 두 번째는 data-dismiss-href 속성에 지정됩니다.
- data-show-if-href: 알림 표시 여부를 결정하는 데 사용할 수 있습니다. 알림이 처음 로드될 때 URL에 대한 요청입니다. 서버가 {"showNotification": true}의 JSON 응답을 보내면 알림이 표시됩니다.
- data-dismiss-href: 알림이 취소되면 두 번째 URL에 요청이 이루어집니다. 사용자가 알림을 닫았음을 저장하는 데 사용할 수 있습니다.
알림이 여러개인 경우 대기열에 추가되고 순서대로 표시됩니다. 이전 항목이 닫힌 후 다음 항목이 표시됩니다.