AMP 사이트에 애드센스 광고를 설정하는 방법을 알아보겠습니다.
몇 가지 차이점만 있을 뿐 AMP를 위한 애드센스 설정은 상당히 쉽습니다.
워드프레스 사이트나 블로그에 AMP 플러그인을 설정한 마무리 한 이후 애드센스 웹사이트에 방문을 해보면 AMP 관련 기능이 자동으로 켜지게 됩니다.
위 이미지는 애드센스 메뉴의 광고 > 개요로 들어갔을 때 보여주는 화면입니다.
오른쪽 하단에 보면 AMP가 사용 설정됨 이라고 표기되는 것을 볼 수 있을 것입니다.
이 문구가 표기가 되면 AMP 관련 설정을 할 수 있습니다.
AMP 사이트 기준 애드센스 자동 광고 설정
위의 AMP가 사용 설정됨 문구를 클릭하면 바로 위와 같은 화면으로 들어가게 됩니다.
이 곳에서는 애드센스의 자동 광고를 이용할 것인지 아닌지를 설정할 수 있습니다.
만약 자동 광고를 사용하지 않겠다라고 스위치를 끄면 코드를 삽입할 필요가 없어지게 됩니다.
자동 광고를 게재하고자 하는 경우에는 아래의 코드를 삽입해 주면 됩니다.
헤더에 삽입하는 AMP 애드센스 스크립트 코드
<script async custom-element="amp-auto-ads"
src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>
위의 스크립트 코드를 헤더에 넣어줘야 합니다.
이 스크립트 코드 자체가 자동 광고 기능이 있는 것은 아니며 AMP용 애드센스 스크립트 코드에서 중복적으로 사용되는 스크립트입니다.
(위의 코드를 슬쩍 보면 일반 애드센스 코드와 달리 “ca-pub-xxxx”가 없습니다.)
자동 광고를 이용하지 않아도 위 스크립트 코드는 헤더에 삽입하는 것을 추천합니다.
바디에 삽입하는 AMP 애드센스 자동 광고 스크립트 코드
<amp-auto-ads type="adsense"
data-ad-client="ca-pub-123456789">
</amp-auto-ads>위 스크립트 코드가 바로 애드센스 자동 광고에 관여를 하는 코드입니다.
이 스크립트 코드는 본문, 즉 <body>와 </body> 사이에 붙여넣어줘야 합니다.
푸터에 넣어도 작동은 하는 것 같은데 구글이 이야기하는 것 처럼 <body>에 삽입하기를 바랍니다.
AMP 자동 광고는 디스플레이 광고만 게재가 됩니다.
인페이지 광고, 앵커 광고 그리고 전면 광고는 AMP에서 아직 지원을 하지 않습니다.
AMP 광고 단위 기준 애드센스 광고 설정
애드센스에서 AMP 설정을 인지하면 위와 같이 광고 단위 기준에서 디스플레이 광고와 일치하는 콘첸츠 위에 번개 표시가 나오게 됩니다.
즉 AMP 애드센스 광고는 디스플레이 광고와 일치하는 콘텐츠만 이용할 수 있습니다.
광고의 코드를 보면 위와 같이 HTML과 AMP가 구분이 되어 나오게 됩니다.
1단계에 설명된 스크립트 코드는 위 자동 광고 설정에서도 나왔던 코드입니다.
헤더에 한번만 추가를 해 놓으면 됩니다.
2단계에 설명된 광고 코드가 바로 AMP 애드센스 광고 코드입니다.
<amp-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-123456789"
data-ad-slot="xxxxxxxxx"
data-auto-format="rspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>이 코드는 반응형 코드로 높이는 320 px로 고정이 되며 폭은 100%로 설정이 되어 있습니다.
실질적으로 모바일 기기에서 보이는 크기는 일반 HTML에 설정한 반응형 코드의 크기와 같습니다.
<amp-ad
layout="fixed"
width="728"
height="90"
type="adsense"
data-ad-client="ca-pub-123456789"
data-ad-slot="xxxxxxx">
</amp-ad>이 코드는 728 x 90 사이즈로 고정형 광고의 AMP 애드센스 광고 코드입니다.
AMP 애드센스 스크립트와 광고 코드는 어떻게 삽입을?
워드프레스에 AMP 공식 플러그인을 설치한 경우
AMP 공식 플러그인을 설치한 경우에는 직접 AMP 플러그인을 편집하는 방법도 있습니다만 플러그인을 활용하는 것을 추천합니다.
Advanced Ads 플러그인이나 Ad Inserter 플러그인과 같은 광고 플러인을 활용할 수 있으며, Head, Footer and Post Injections 플러그인을 활용하여 코드를 삽입할 수 있습니다.
워드프레스에 AMP for WP 플러그인을 설치한 경우
AMP for WP 플러그인을 설치한 경우에는 AMP for WP 플러그인의 설정에서 쉽게 스크립트와 광고 코드를 넣을 수 있습니다.
AMP 사이트의 애드센스 광고 게재는
위와 같이 일반 HTML 사이트와 비슷한 난이도 입니다.
쉽게 설정이 가능하며, 단지 이용할 수 있는 애드센스 광고의 종류가 적은 것만 다르다고 보면 될 듯 합니다.
뭔소린지 하나도 모르겠지만 감사합니다.