구현 가이드

AMP 페이지의 광고

AMP ads (amp-ad, amp-auto-ads, amp-sticky-ad)

AdSense와 Ad Manager에서 amp-ad, 자동 광고, 고정 배너로 AMP 페이지에 광고를 표시하는 방법입니다.

AdSense
Ad Manager
모바일과 데스크톱(AMP 페이지)

형식 알아보기 내 사이트에서 확인하기

데스크톱

휴대폰

1분 만에 이해하기

AMP 페이지의 광고란?

AMP는 오픈 프로젝트로 만든, 아주 가볍고 빠른 페이지를 만드는 방식입니다. 칸막이가 있는 도시락통을 떠올려 보세요. 칸마다 담을 것이 정해져 있어서 아무거나 넣을 수 없습니다. AMP 페이지도 같습니다. 아무 광고 코드나 붙여 넣을 수 없습니다. 대신 페이지를 무겁게 만들지 않고 광고를 요청하고 표시할 수 있는, 컴포넌트라는 준비된 부품을 사용합니다.

주요 부품은 세 가지입니다. amp-ad는 배너 같은 일반 광고 공간입니다. 네트워크 유형을 지정하는데, AdSense는 adsense, Ad Manager는 doubleclick이며, 너비와 높이를 입력합니다. amp-auto-ads는 자동 모드입니다. 네트워크의 설정을 받아 최대 개수와 광고 사이의 최소 거리를 지키면서 광고를 넣을 위치를 알아서 정합니다. amp-sticky-ad는 앵커처럼 화면 하단에 고정되는 띠이며 닫기 버튼이 있습니다.

광고 네트워크의 코드는 페이지에서 직접 실행되지 않습니다. AMP가 직접 관리하는 iframe이라는 별도의 상자에서 실행됩니다. 광고가 도착하지 않으면 AMP가 빈 공간을 숨기려고 하지만, 화면에 보이는 공간은 페이지가 튀지 않도록 숨기지 않습니다. AMP 광고는 위치가 고정된 상자 안에 있을 수도 없으며, AMP 자체의 고정 광고와 amp-lightbox는 예외입니다.

Google은 AMP가 모든 기기에서 빠르고 성능이 좋은 페이지를 목표로 하는 오픈 프로젝트라고 설명합니다. AdSense에서는 광고 단위를 만들고 AMP 코드를 선택하거나 AMP용 자동 광고를 켭니다. Ad Manager에서는 대시보드에서 바로 AMP 태그를 생성하며, Google은 AMP에 HTML 광고를 쓰라고 권장합니다. 사이트에 이미 페이지의 AMP 버전이 있고 거기에도 광고를 표시하고 싶다면 사용할 만합니다.

단계별 설명

구현 방법

head에서 컴포넌트 로드AMP 페이지의 head에 amp-ad 스크립트를 넣으세요. 자동 광고나 고정 띠를 사용한다면 amp-auto-ads와 amp-sticky-ad 스크립트도 넣으세요.
AdSense: AMP 광고 단위 만들기AdSense에서 광고, 광고 단위별, 디스플레이 광고를 클릭하세요. 이름을 지정하고 반응형으로 두고 저장 후 코드 받기를 클릭한 다음 AMP를 클릭합니다. 스크립트는 head에, 광고 코드는 body에 넣습니다.
AdSense: AMP용 자동 광고 켜기광고에서 AMP 사이트가 있으신가요?를 클릭하고 AMP용 자동 광고를 켠 다음 AMP 코드 받기를 클릭하세요. 스크립트는 head에, 코드는 각 페이지의 body 여는 태그 바로 뒤에 붙여 넣습니다. 그런 다음 완료와 적용을 클릭하세요.
Ad Manager: AMP 태그 생성인벤토리, 광고 단위를 클릭하고 광고 단위를 연 다음 태그 탭으로 이동하세요. AMP 태그를 선택하고 계속을 클릭합니다. AMP 마커를 체크하면 자리표시자와 대체 광고가 포함되며, 광고 단위 크기를 선택하세요.
AMP 페이지와 일반 페이지 연결일반 페이지에서는 amphtml 마크업으로 AMP 버전을 가리키세요. AMP 페이지에서는 canonical 마크업으로 일반 페이지를 다시 가리키세요.
기다리며 확인광고가 표시되기까지 몇 분, 때로는 최대 한 시간이 걸릴 수 있습니다.

구현 예시

코드와 화면에 보이는 모습

컴포넌트 스크립트는 head에 넣습니다. amp-auto-ads는 body가 열린 바로 뒤에, 나머지 광고는 나타나야 할 위치의 body에 넣습니다.

<!-- No <head> da página AMP -->
<script async custom-element="amp-ad"
  src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-auto-ads"
  src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
<script async custom-element="amp-sticky-ad"
  src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>

<body>
  <!-- AdSense: anúncios automáticos, logo depois de abrir o body -->
  <amp-auto-ads type="adsense"
    data-ad-client="ca-pub-0000000000000000">
  </amp-auto-ads>

  <!-- AdSense: bloco responsivo, onde o anúncio deve aparecer -->
  <amp-ad width="100vw" height="320"
    type="adsense"
    data-ad-client="ca-pub-0000000000000000"
    data-ad-slot="1234567890"
    data-auto-format="rspv"
    data-full-width>
    <div overflow></div>
  </amp-ad>

  <!-- Ad Manager: faixa fixa embaixo (só uma por página) -->
  <amp-sticky-ad layout="nodisplay">
    <amp-ad width="320" height="50"
      type="doubleclick"
      data-slot="/1234567/exemplo">
    </amp-ad>
  </amp-sticky-ad>
</body>

데스크톱amp-ad는 정해진 너비와 높이로 일반 배너처럼 공간을 차지합니다. amp-sticky-ad의 고정 띠는 전체 너비에 높이는 최대 100픽셀로 하단에 고정됩니다.

모바일AdSense 반응형 광고 단위는 화면 너비를 차지합니다. 고정 띠는 하단에 있고 닫을 수 있으며, 페이지 끝에 이르면 AMP가 콘텐츠를 가리지 않도록 추가 공간을 줍니다.

Google의 안내

허용 및 금지 사항

허용

adsense 또는 doubleclick 유형으로 amp-ad를 사용하고 너비와 높이 입력하기.
Google이 선택해 둘 것을 권장하는 AdSense 반응형 광고 단위 사용하기.
AdSense와 함께 amp-auto-ads를 사용하고, 대시보드에서 AMP 페이지에 원하지 않는 형식은 끄기.
페이지당 amp-sticky-ad 고정 띠를 하나만 두고, 그 안에 amp-ad를 하나만 넣기.
광고가 로드되는 동안 자리표시자를, 광고가 오지 않을 때는 대체 콘텐츠를 표시하기.
Ad Manager에서 Fast Fetch를 사용하는 AMP 광고를 최소 30초 간격으로 새로고침하기.

허용 안 됨

고정 광고와 amp-lightbox를 제외하고, 위치가 고정된 상자 안에 amp-ad를 넣기.
같은 페이지에 amp-sticky-ad를 둘 이상 두기.
고정 띠에 투명하거나 반투명한 배경 사용하기. AMP가 단색으로 바꿉니다.
HTTPS 없이 광고나 임베드 게재하기.
Ad Manager에서 새로고침을 단일 요청(SRA)과 함께 켜기. 새로고침이 꺼지고 오류가 표시됩니다.
웹 스토리에서 amp-ad를 직접 사용하기. 웹 스토리는 amp-story-auto-ads를 사용합니다.

팁

올바르게 하는 방법

amp-auto-ads를 body 안의 첫 번째 항목으로 두세요.
고정 띠의 최대 높이는 100픽셀이고 너비는 항상 100퍼센트입니다.
새로고침되는 여러 크기 광고 단위에서 Ad Manager는 현재 크기와 같거나 더 작은 크기만 요청하므로 광고가 시간이 지나면서 작아질 수 있습니다.
AdSense에서 성과를 보려면 보고서의 콘텐츠 플랫폼 세부 분석을 사용하세요.

주의

흔한 오류

head 밖의 스크립트

각 컴포넌트의 스크립트는 head에, 광고는 body에 넣습니다. 알맞은 스크립트가 없으면 컴포넌트가 작동하지 않습니다.

예시 코드 복사하기

AMP 옵션을 선택하면 AdSense가 AMP 코드를 완성해서 제공합니다. 내 게시자 ID가 들어 있는 코드를 계정에서 복사하세요.

잘못 구성한 고정 띠

amp-sticky-ad에는 nodisplay 레이아웃과 그 안에 단 하나의 amp-ad가 필요합니다.

연결되지 않은 AMP 페이지

AdSense는 일반 페이지와 AMP 페이지가 amphtml 및 canonical 마크업으로 서로를 가리키도록 안내합니다.

자주 묻는 질문

AMP 페이지에서 일반 AdSense 코드를 사용할 수 있나요?

AMP 코드를 사용하세요. AMP 페이지에서는 광고 네트워크의 JavaScript가 페이지에서 직접 실행되지 않고 AMP가 관리하는 iframe에서 실행됩니다.

광고가 오지 않으면 어떻게 되나요?

AMP가 공간을 숨기려고 합니다. 숨기지 못하면 대체 콘텐츠를 표시합니다. 광고가 없는 고정 띠는 표시되지 않습니다.

Ad Manager는 AMP에서 광고를 새로고침하나요?

네, Fast Fetch 광고에서 가능합니다. 페이지나 슬롯별로 최소 30초 이상의 간격을 지정하는 마크업을 head에 넣습니다. SRA와 함께는 작동하지 않습니다.

광고가 표시되기까지 얼마나 걸리나요?

보통 몇 분이며, 때로는 최대 한 시간이 걸립니다.

자료실

Google 공식 출처

이 페이지의 모든 내용은 Google 공식 문서를 따릅니다. 원문에서 바로 읽어 보세요.

내 사이트가 이 형식을 올바르게 쓰고 있나요?

감사는 사이트를 방문자처럼 읽고, 아무것도 클릭하지 않으며, 무엇을 고쳐야 하는지 알려 줍니다.

감사 실행하기