오늘은 모바일 애드센스에서 효율을 조금 더 높이기 위해 효과가 높은 일반 광고로 구글 앵커광고 대체 방법을 살펴보도록 하겠습니다.

구글 애드센스 적용 방법중에 구글에서 위치나 적용 시기를 자동으로 결정해주는 자동광고가 가장 편합니다. 자동광고 효과는 좋다고 평가하는 경우도 있고, 별로라고 평가하는 경우도 있습니다.

이 중 앵커광고는 구글 자동광고중에서 가장 일반적으로 적용하는 광고인데요. 자동으로 노출시켜주기 때문에 편리하지만, 아직은 개선포인트들이 많이 있습니다.

가장 많이 언급되는 것이 애드센스 앵커광고 위치가 상단과 하단 중에 적절하게 노출되고 있는데, 많은 경우 상단 앵커광고에 대해서 거부감이 큰 것 같습니다. 아무래도맨 위에 광고가 나오니 사용경험이 나빠지기 때문일텐데요.

그래서 인터넷을 검색해보면 앵커광고를 한단에만 위치시키도록 강제하는 방법들이 많이 소개되고 있습니다.

여기에서는 구글에서 제공하는 앵커광고를 한단에서만 노출되도록 만드는 것이 아니라. 일반 에드 센스 광고로 앵커광고를 대체하는 방법에 대해서 알아보겠습니다.

앵커광고를 대체하는 방밥은 대단한 무엇이 있는 것은 아니고, 일반적인 애드센스 반응형광고를 하단에 위치 시키는 방법입니다.

이 방법은 구글 애드센스에서 제공하는 코드 변경 방법을 응용한 것인데요.

• 먼저 애드센스 반응형 광고를 만듭니다.
• 저는 신규 광고 단위 만들기로 들어가, 디스플레이 광고 중 수평형을 선택해 새로운 광고 코드를 만들었습니다.

그 다음 다음과 같은 형식으로 광고코드를 변경합니다. 간히 추가 설명을 보태면

• 하단 위치를 위해 class를 footer로 지정
  만약 별도 애드센스 플러그인을 사용한다면 footer 지정은 불필요
• 스마트폰마다 해상도가 상당히 다르기 때문에 다양한 해상도에 맞추어 폭과 높이를 맞추어 주도록 가능하면 다양한 스마트폰 해상도별 폭과 높이를 지정
• 가끔 높이가 제대로 먹히지 않는 경우가 있어 높이에 대해서는 !importnt 명령을 적용
• 적용 광고를 제어하기 위한 class로 ” mobile_responsive”를 지정하고, 이 클래스에 따라 폭과 높이가 달라지도록

<div class="footer" style="height:200px !important">

<style>
. mobile_responsive { width: 820px; height: 250px !important; }
@media(min-width: 320px) { . mobile_responsive { width: 320px; height: 150px !important; } }
@media(min-width: 340px) { . mobile_responsive { width: 340px; height: 150px !important; } }
@media(min-width: 360px) { . mobile_responsive { width: 360px; height: 150px !important; } }
@media(min-width: 375px) { . mobile_responsive { width: 375px; height: 150px !important; } }
@media(min-width: 390px) { . mobile_responsive { width: 390px; height: 150px !important; } }
@media(min-width: 415px) { . mobile_responsive { width: 415px; height: 200px !important; } }
@media(min-width: 500px) { . mobile_responsive { width: 500px; height: 200px !important; } }
@media(min-width: 600px) { . mobile_responsive { width: 600px; height: 200px !important; } }
@media(min-width: 720px) { .a mobile_responsive { width: 720px; height: 200px !important; } } 
@media(min-width: 768px) { . mobile_responsive { width: 768px; height: 200px !important; } } 
@media(min-width: 820px) { . mobile_responsive { width: 820px; height: 250px !important; } } 
</style>          
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-본인 애드센스 코드"
     crossorigin="anonymous"></script>

<!-- Anchor Ad(광고코드를 설명하는 문구, 옵션으로 꼭 필요하지는 않으나 코드를 구분하기 위해 사용) -->

<ins class="adsbygoogle mobile_responsive"
     style="display:block"
     data-ad-client="ca-pub-본인 애드센스 코드"
     data-ad-slot="반응형 공고 코드"

</ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div> Code language: PHP (php)

저는 AD INSERT pro라는 플러그인에서 제공하는 sticky 기능을 활용하고, 위 코드 중 <div></div> 코드를 제외한 나머지를 <script></script> 부분까지만 적용하고 있습니다.

거의 똑같지만 다시 한번 적시해 봤습니다.

<style>
. mobile_responsive { width: 820px; height: 250px !important; }
@media(min-width: 320px) { . mobile_responsive { width: 320px; height: 150px !important; } }
@media(min-width: 340px) { . mobile_responsive { width: 340px; height: 150px !important; } }
@media(min-width: 360px) { . mobile_responsive { width: 360px; height: 150px !important; } }
@media(min-width: 375px) { . mobile_responsive { width: 375px; height: 150px !important; } }
@media(min-width: 390px) { . mobile_responsive { width: 390px; height: 150px !important; } }
@media(min-width: 415px) { . mobile_responsive { width: 415px; height: 200px !important; } }
@media(min-width: 500px) { . mobile_responsive { width: 500px; height: 200px !important; } }
@media(min-width: 600px) { . mobile_responsive { width: 600px; height: 200px !important; } }
@media(min-width: 720px) { .a mobile_responsive { width: 720px; height: 200px !important; } } 
@media(min-width: 768px) { . mobile_responsive { width: 768px; height: 200px !important; } } 
@media(min-width: 820px) { . mobile_responsive { width: 820px; height: 250px !important; } } 
</style>          
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-본인 애드센스 코드"
     crossorigin="anonymous"></script>

<!-- Anchor Ad(광고코드를 설명하는 문구, 옵션으로 꼭 필요하지는 않으나 코드를 구분하기 위해 사용) -->

<ins class="adsbygoogle mobile_responsive"
     style="display:block"
     data-ad-client="ca-pub-본인 애드센스 코드"
     data-ad-slot="반응형 공고 코드"

</ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
Code language: PHP (php)

참고

구글 어낼리틱스로 콘텐츠별 애드센스 수익 분석 방법

애드센스 광고 효과를 높이는 5가지 팁

[워드프레스 Tips] 구글 AMP(Accelerated Mobile Pages)에 애드센스 적용하기