기술 | 페이지 하단에 광고를 고정시키는 방법을 제공합니다.끈끈한 광고는 광고를 자식으로하는 컨테이너 역할을합니다. |
필수 스크립트 | <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-ad
CSS 클래스를 통해 설정할 수 있습니다 . - 닫기 버튼 스타일은
amp-sticky-ad-close-button
CSS 클래스를 통해 설정할 수 있습니다 . - 광고와 닫기 버튼 스타일 사이의 패딩 바는
amp-sticky-ad-top-padding
CSS 클래스를 통해 설정할 수 있습니다 .
확인
AMP 검사기 사양에서 amp-sticky-ad 규칙 을 참조하십시오 .
'AMP JS' 카테고리의 다른 글
동적 컨텐츠 - amp-access (0) | 2018.09.16 |
---|---|
광고 애널리틱스 - amp-experiment 실험 (0) | 2018.09.16 |
광고 애널리틱스 - amp-call-tracking 암호 추적 (0) | 2018.09.16 |
광고 애널리틱스 - amp-auto-ads 자동광고 (0) | 2018.09.16 |
광고 애널리틱스-amp-analytics (0) | 2018.09.16 |
댓글