본문 상단 광고를 컴퓨터와 모바일에 각각 다른 광고를 보내는 방법입니다.
애드센스 본문 상단 광고를 컴퓨터 상단에는 PC 본문 상단 광고를, 모바일에는 모바일 본문 상단 광고를 생성해서 노출하는 방법입니다. 먼저 이것은 선택사항입니다. 하지 않아도 된다는 거죠. 이것은 광고 단위 이름만 다르다는 것이지 방문자로서는 다르지 않은 애드센스 광고입니다. 수입도 달라지지 않습니다. 다만 모바일 광고 수입과 컴퓨터 광고 수입으로 구분되어 어느 쪽이 어느 정도 많은 수입을 올리는지 알 수 있습니다.
사실은 전혀 알지 못하더라도 상관없을 수도 있습니다. 내 계정으로 얻은 수입에는 변함이 없고 컴퓨터 본문 상단, 모바일 본문 상단 어느 쪽이 수입이 많더라도, 블로거가 더 많은 수입을 얻기 위해 할 수 있는 조치는 그다지 보이지 않기 때문입니다.
그럼에도 이렇게 분리하면서 적용한 것은 처음 애드센스 승인을 받았던 티스토리부터 곧바로 적용했습니다. 그냥 재미라고 할 수 있습니다. 그리고 이렇게 코드를 추가해서 넣더라도 색인, 노출에는 영향을 받은 느낌은 없었습니다.
이렇게 크기를 조절 또는 원하는 광고 형태를 송출할 수 있는 코드가 궁금하거나 구글 블로그에서는 어떻게 태그를 사용해야 하는지 알고 싶다면 살짝 살펴보는 것도 도움이 될 겁니다. 구글 블로그에서는 티스토리에서 적용했던 그 코드가 적용되지 않을 때는 다른 방법을 찾아야 합니다.
티스토리에서 사용하던 코드부터 보겠습니다. 티스토리와 구글 블로그에서는 HTML 사용 환경이 다른 것 같아요. 일단 구글 블로그는 HTML5를 적용하고 있습니다. 처음에 티스토리에서 사용하던 코드를 그래도 넣으니 안 되더군요.
<!-- 광고 시작 PC와 모바일 다르게 -->
<!-- 모바일 상단 노출 -->
<div align=center>
<style>
.phone ins { width: 336px; height: 280px; }
@media(min-width: 468px) { .phone ins { width: 336px; height: 280px; } }
@media(min-width: 800px) { .phone ins { width: 0px; height: 0px; } }
</style>
<div class="phone">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-모바일 광고 코드"
crossorigin="anonymous"></script>
<!-- 4h 모바일 상단 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-모바일 광고코드"
data-ad-slot="모바일 광고 코드"
></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<!-- 컴퓨터 상단 노출 -->
<div align=center>
<style>
.pc ins { width: 0px; height: 0px; }
@media(min-width: 468px) { .pc ins { width: 0px; 0px; } }
@media(min-width: 728px) { .pc ins { width: 100%; height: 100%; } }
</style>
<div class="pc">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-PC 광고 코드"
crossorigin="anonymous"></script>
<!-- 4h 본문 상단 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-PC 광고 코드"
data-ad-slot="PC 광고 코드"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div> </div>
<!-- 광고 끝 PC와 모바일 다르게 -->
천천히 뜯어보면 그렇게 어려운 코드는 아닙니다. 해상도 크기에 따라 광고를 뿌려주거나 제한한다는 것인데요, 준비는 모바일 본문 상단 광고와 컴퓨터 본문 상단 광고를 따로 만들어 위 소스의 해당 위치에 넣으면 됩니다.
모바일 상단 광고는 크기를 336 * 280으로 뿌립니다. 그러니까 고정형 광고로 만들어도 됩니다. 반응형이라면 모바일 상단에 뿌려주는 애드센스 코드를 잘 봐야 합니다. 모바일 광고 코드에는 data-ad-format="auto",
data-full-width-responsive="true" 이 코드가 없습니다.
그런데 이 코드를 구글 블로그에 그래도 넣으면 오류가 나는데 정상적으로 설치하기까지 긴 시간이 걸렸습니다.
/*------Layout (end)----------*/
CSS를 별도로분리해서 이 코드를 찾아 위쪽에 넣습니다.
/* CSS 본문 상단 광고 PC와 모바일 구분 */
.phone {
width: 336px;
height: 280px;
}
@media (min-width: 468px) {
.phone {
width: 0px;
height: 0px;
}
}
.pc {
width: 100%;
height: 100%;
}
@media (min-width: 728px) {
.pc {
width: 100%;
height: 100%;
}
}
/* 본문 상단 광고 PC와 모바일 구분 끝 */
/*------Layout (end)----------*/
]]></b:template-skin>
</b:if>
그리고 본문 상단 광고 위치는 이 코드는 찾습니다.
<data:post.body/>
이 코드를 기준으로 위에는 본문 상단, 아래는 본문 하단에 위치합니다.
<!-- html 상단 광고 -->
<!-- 광고 시작 PC와 모바일 다르게 -->
<!-- 모바일 상단 -->
<div class='phone ins' align='center'>
<script async='async' crossorigin='anonymous' src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-본인코드'/>
<!-- 모바일 상단 -->
<ins class='adsbygoogle'
data-ad-client='ca-pub-본인코드'
data-ad-slot='광고코드'
style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<br/>
<!-- PC 본문 상단 -->
<div class='pc ins' align='center'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-본인코드"
crossorigin="anonymous"></script>
<!-- PC본문 상단 사각 -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-본인 코드"
data-ad-slot="광고 코드"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<br/>
</div>
<!-- 광고 끝 PC와 모바일 다르게 -->
<data:post.body/>
<!-- 본문 하단 광고 코드 -->
지금 본문 상단 광고도 크기를 고정형으로 만들었습니다. 이것은 반응형보다 광고가 로딩되는 속도가 빨라 고정형으로 넣었습니다. 이렇게 광고 로딩속도가 빠른 광고를 넣은 것은 내년도에 변경되는 노출 배분 방식에 대응하기 위한 것입니다.
다만, 애드센스 광고는 방문자 숫자가 어느 정도 있어야 제대로 노출이 됩니다. 처음 승인을 받았다면 광고가 제대로 노출되기 위해서는 어느 정도 기간이 필요합니다. 방문자가 많으면 많을수록 광고는 빠르고 정상적으로 노출됩니다.