AMP에서 광고 코드를 작성하는 방법

AMP 페이지에 올바른 애드 센스 코드 작성.
1 min read

다음은 AMP에 광고를 추가하기 전에 있어야 하는 필수 JS 라이브러리입니다.

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

위의 스크립트는 Google Adsense 뿐만 아니라 다른 여러 광고 서비스 업체(예: Taboola, AWS, Dable 등)도 지원합니다. JS 라이브러리가 블로그에 포함되어 있는지 확인하고 없다면 <head> 태그 아래에 스크립트를 추가하세요.

Google Adsense는 이미 AMP를 지원합니다

이제 Google Adsense가 AMP를 완벽하게 지원하므로 새 광고 단위를 만들 때 바로 <amp-ad> 코드를 얻을 수 있습니다. 다음은 전체 광고 코드의 예입니다.

<amp-ad width='100vw' height='320'
  type='adsense'
  data-ad-client='ca-pub-000000000000000'
  data-ad-slot='0000000000'
  data-auto-format='rspv'
  data-full-width=''>
  <div overflow=''></div>
</amp-ad>

amp-ad에 대한 더 많은 정보는 여기에서 얻을 수 있습니다.

AMP에서 자동 광고 설정

  1. 애드센스 계정에 로그인합니다.
  2. 광고 > 개요를 클릭합니다.
  3. AMP 사이트가 있으신가요?를 클릭합니다.
  4. 'AMP 사이트에 광고를 자동으로 게재하세요.' 옆의 AMP용 자동 광고 토글 버튼을 활성화합니다.
  5. 블로그의 <head> 태그에 amp-auto-ads-0.1.js 스크립트를 복사하여 붙여넣습니다.
    <script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'/>
  6. 블로그에서 <body> 태그 바로 뒤에 <amp-auto-ads> 코드를 복사하여 붙여넣습니다.
    <amp-auto-ads type='adsense' data-ad-client='ca-pub-000000000000000'></amp-auto-ads>

    위 코드에 표시된 부분을 자신의 애드센스 ID로 교체하고, 주석 태그 <!-- -->를 제거하십시오.

  7. 완료를 클릭합니다. 블로그 페이지에 광고가 게재되는 데 최소 1 시간이 걸립니다.

You may like these posts

  • 다음은 AMP에 광고를 추가하기 전에 있어야 하는 필수 JS 라이브러리입니다. <script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/> 위의 스크립트는 Google…
  • AMP(Accelerated Mobile Pages)는 모바일 페이지 최적화를 위해 사용자 경험 및 로딩 속도를 개선하기 위해 2015년 10월에 출시된 모바일 장치에서 더 빠르게 로드되는 웹 페이지를 제공하는 데 사용되는 오픈 소스 프로젝트입니다. AMP HTML은 기존 웹 구조로 구성되…
  • 사전 준비 AMP 페이지에 Youtube 비디오을 표시하려면 블로그에 amp-youtube 용 JS 라이브러리를 추가해야 합니다. 먼저 아래 스크립트를 <head> 섹션에 붙여 넣습니다. <script async custom-element='amp-youtube' sr…
  • 잘못된 AMP 문제 해결 애드센스 코드를 블로그에 설치하면 유효성 검사 오류가 나타날 수 있습니다. 가장 자주 발생하는 오류은 블로그 상단에 --> 코드가 나타나 AMP 유효성 검사에서 오류가 발생하는 것입니다. 블로그에 이 오류가 있는 경우 아래 코드를 찾아 표시된 부분을 삭제하세요…
  • AMP와 비 AMP와의 가장 분명한 차이점은 amp-img 태그를 사용하여 이미지 코드를 작성하는 것입니다. 페이지가 유효성 검사를 통과하려면 모든 img 이미지 태그가 amp-img로 바뀌었는지 확인합니다. 다음은 AMP에서 올바른 이미지 코드 작성 예시입니다. <div&g…

Post a Comment