광고 코드 구현

AMP 호환 광고 단위 만드는 방법

이 가이드는 AMP 호환 광고 단위를 만들어 AMP 페이지에 애드센스 광고를 게재하는 방법을 보여줍니다.

애드센스 AMP 광고 단위의 크기는 반응형 또는 고정형일 수 있습니다. 반응형 AMP 광고 단위를 사용하는 것이 좋습니다. 그 이유는 다음과 같습니다.

  • 반응형 AMP 광고 단위는 사용하는 기기에 맞게 자동으로 크기를 조절하고 화면의 전체 너비를 사용합니다.
  • Google은 광고의 크기를 최적화하여 웹페이지에서 실적이 향상되게 합니다.
모든 애드센스 기능(예: 광고 허용 및 차단, 광고 게재율, 실적 보고서 등)이 AMP 광고를 지원합니다.

시작하기 전에

AMP 광고를 표시할 페이지에 필수 AMP 스크립트를 추가했는지 확인하세요.

  • 스크립트를 추가하려면 다음 코드를 복사하여 AMP HTML의 <head></head> 태그 사이에 붙여 넣으세요.

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

이 스크립트는 필요한 amp-ad 라이브러리를 로드하지만, AMP 페이지에 자체적으로 광고를 표시하지는 않습니다. 광고를 게재하려면 AMP 호환 광고 코드도 추가해야 합니다. amp-ad 구성요소에 대한 자세한 내용은 https://www.ampproject.org/docs/reference/components/amp-ad에서 확인할 수 있습니다.

반응형 AMP 호환 광고 단위 만들기

반응형 AMP 광고 단위를 만드는 것은 현재 수동 절차이며 다음 단계가 필요합니다.

  1. 애드센스 계정에 새로운 반응형 광고 단위를 만듭니다.
  2. 1단계에서 만든 반응형 광고 단위의 광고 코드에서 다음 정보를 찾아 적어둡니다.
    • 내 게시자 ID(data-ad-client), 예: ca-pub-1234567891234567
    • 내 광고 단위의 ID(data-ad-slot), 예: 1234567890

    예 보기

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:inline-block;width:120px;height:600px"
         data-ad-client="ca-pub-1234567891234567"
         data-ad-slot="1234567890"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  3. AMP 광고 코드 작성
    다음 광고 코드를 복사한 후 data-ad-clientdata-ad-slot 값을 2단계의 고유한 값으로 대체합니다.
    <amp-ad width="100vw" height=320
      type="adsense"
      data-ad-client="ca-pub-1234567891234567"
      data-ad-slot="1234567890"
      data-auto-format="rspv"
      data-full-width>
        <div overflow></div>
    </amp-ad>
    위의 광고 코드의 다른 부분은 수정하면 안 됩니다. 그러면 광고 코드가 작동하지 않을 수 있습니다.
  4. 광고를 게재하려는 모바일 페이지의 HTML 소스 코드에 AMP 광고 코드를 붙여넣습니다. 스크롤 없이 볼 수 있는 부분스크롤 해야 볼 수 있는 부분 모두 광고 게재위치로 사용할 수 있습니다. AMP 광고 단위가 포함된 페이지에도 애드센스 프로그램 정책이 적용됩니다. 
    고정 또는 제한된 높이의 상위 컨테이너(<div> , <iframe> 등)에 광고 코드를 삽입하면 안 됩니다. 광고 크기가 변경되어 페이지 레이아웃이 깨질 수 있습니다.
  5. (선택 사항) AMP 광고 코드를 삽입한 후에는 다양한 모바일 장치에서 광고를 테스트하여 반응형 동작이 올바르게 작동하는지 확인하는 것이 좋습니다.
    자신의 AMP 페이지에서 광고를 볼 때 AMP가 콘텐츠의 우선 순위를 지정하므로, 광고가 게재되기까지 시간이 약간 지연될 수 있습니다. AMP 페이지가 캐싱되는 방법 자세히 알아보기.

고급 사용 사례: 고정형 AMP 광고, 스타일 지정 AMP 광고 등

AMP 광고 단위에 고정된 너비 또는 높이를 지정하려면 다음 안내에 따라 반응형 AMP 광고 코드를 수정합니다 .

고급 사용 사례의 경우에는 다른 AMP 요소와 마찬가지로 AMP 광고 요소의 스타일 지정을 할 수 있습니다. 레이아웃 조절의 다양한 방법 자세히 알아보기.

AMP 광고 단위의 실적 추적

AMP 광고 단위의 실적을 추적하려면 콘텐츠 플랫폼 보고서를 검토합니다.

이 도움말이 도움이 되었나요?
어떻게 하면 개선할 수 있을까요?