본문 바로가기
AMP JS

광고 애널리틱스 - amp-sticky-ad

by 로마리우 2018. 9. 16.
기술페이지 하단에 광고를 고정시키는 방법을 제공합니다.끈끈한 광고는 광고를 자식으로하는 컨테이너 역할을합니다.
필수 스크립트<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>
지원되는 레이아웃표시
예제들amp-sticky-ad에 대한 주석이 달린 코드 예제


행동

  • <amp-sticky-ad>AMP 문서에는 하나만있을 수 있습니다 은 <amp-sticky-ad>하나의 직접 아이를해야합니다 <amp-ad>참고 : <amp-ad>구성 요소에 필요한 스크립트를 포함해야합니다 .
  • 끈적 거리는 광고는 페이지 하단에 나타납니다.
  • 고정 광고는 전체 너비의 빈 컨테이너를 가져온 다음 고정 너비의 너비 및 높이를 기준으로 고정 광고를 채 웁니다 <amp-ad>.
  • 끈적 거리는 광고의 높이는 자녀가 최대 높이까지 무엇이든 필요합니다.
  • 끈적 거리는 광고의 최대 높이는 100 픽셀이며, 높이가 100 픽셀을 초과하면 높이가 100 픽셀이며 오버플로 콘텐츠가 숨겨집니다.
  • 스티커 광고의 너비는 CSS를 사용하여 100 %로 설정되며 재정의 할 수 없습니다.
  • 스티커 광고의 불투명도는 CSS를 사용하여 1로 설정되므로 재정의 할 수 없습니다.
  • 끈적 거리는 광고의 배경색은 페이지 스타일과 일치하도록 사용자 정의 할 수 있습니다. 그러나 반투명 또는 투명 배경은 허용되지 않으며 투명하지 않은 색상으로 변경됩니다.
  • 페이지 하단으로 스크롤하면 고정 된 광고의 추가 높이가 뷰포트에 자동으로 채워져 내용이 숨겨지지 않습니다.
  • 가로 모드 인 경우 끈적 거리는 광고는 중앙 정렬됩니다.
  • 끈적 거리는 광고는 닫기 버튼으로 닫고 제거 할 수 있습니다.
  • 광고가 채워지지 않으면 끈적 거리는 광고 컨테이너가 접히고 더 이상 보이지 않게됩니다.

예:

<amp-sticky-ad layout="nodisplay">
  <amp-ad width="320"
      height="50"
      type="doubleclick"
      data-slot="/35096353/amptesting/formats/sticky">
  </amp-ad>
</amp-sticky-ad>

속성

레이아웃 (필수)

반드시로 설정해야합니다 nodisplay.

스타일링

amp-sticky-ad구성 요소는 표준 CSS로 스타일을 지정할 수 있습니다.

  • 스티커 광고 컨테이너 스타일은 amp-sticky-adCSS 클래스를 통해 설정할 수 있습니다 .
  • 닫기 버튼 스타일은 amp-sticky-ad-close-buttonCSS 클래스를 통해 설정할 수 있습니다 .
  • 광고와 닫기 버튼 스타일 사이의 패딩 바는 amp-sticky-ad-top-paddingCSS 클래스를 통해 설정할 수 있습니다 .

확인

AMP 검사기 사양에서 amp-sticky-ad 규칙 을 참조하십시오 .

댓글