애드센스 수익배분 방식이 노출 방식으로 바뀌면서 광고 두 개를 배치하는 것이 유리할까, 생각하는 시간과 광고 두 개를 좌우 배치하는 코드를 알아보겠습니다.
이전에 본문 상단에 광고 두 개를 넣고 테스트를 했습니다. 결과는 왼쪽 광고가 80% 이상 수입을 차지하면서 하나만 넣었죠. 많은 분이 이런저런 실험을 합니다만, 지금처럼 광고 두 개를 좌우 배치했을 때 왼쪽 광고 수입이 높은 이유는 딱 하나일 겁니다. 광고 수입은 모바일 본문 상단 광고가 제일 많고 나머지는 왔다 갔다 합니다. 본문 상단 광고를 넘볼 수 있는 광고 위치는 없었습니다.
여기에는 방문자가 글을 빨리 읽기 위해 화면을 쓸어내리면서 클릭이 되는 손님 실수도 한몫했을테고, 더 중요한 것은 PC에서 광고 두 개가 노출되지만, 모바일에서는 하나만 나옵니다. 여기에 나오는 광고는 PC 화면에서 보았던 왼쪽 광고였을 겁니다. 여기까지는 테스트해 보지는 않았지만, 로직이 PC 광고 두 개에서 랜덤으로 모바일에 노출되었다면 광고 수입은 그렇게 차이가 나지 않았을 겁니다. 그리고 광고가 로딩되는 것은 왼쪽보다는 오른쪽이 느립니다.
애드센스 수입 배분 방식이 노출 형식으로 바뀌면서 떠오르는 것은 맞춤 광고가 필요할 수도 있습니다. 방문자가 평소 관심이 있던 광고라면 천천히 살펴보고 클릭하겠죠. 이러면서 광고 체류시간이 충족하면서 이 역시 블로거의 광고 수입에 계산이 됩니다. 하지만 방문자가 관심 없는 광고라도 머무를 수 있게 광고가 있는 주변에 관심 있는 내용이 있다면 역시 그 위치에서 정지해서 꼼꼼하게 글을 읽게 되겠죠. 이제는 방문자의 관심이 있는 광고도 좋지만, 개인의 의향과는 상관없는 광고라도 그 광고를 볼 수 있는 위치에서 2초 이상 붙잡을 수 있는 방법을 찾으면 됩니다.
이것은 블로거가 고민해야 하는 부분이데요, 개인 맞춤의 클릭형이라면 내용은 조금 엉성하더라도 관심 있는 광고라면 클릭을 받을 수도 있을 겁니다. 하지만, 노출형이라면 더 많은 방문자가 머물러야 한다는 계산이 나오는데요, 어쩌면 클릭형보다 노출형이 방문자를 잡기 위한 알찬 내용이 필요하지 않을까 하는 생각이 듭니다.
애드센스 광고 좌우 두 개 배치에 대해서는 애드센스에서 정해져 있지 않습니다. 이 이야기는 이전에도 광고 두 개를 좌우 배치는 하는 것이 규정에 어긋나는지 모른다는 단서를 달면서 소스를 제공하는 포스팅도 있었는데요, 제한 규정이 없다는 것은 걱정 없이 사용할 수 있다고 판단하면 됩니다. 그럼에도 좌우 배치를 하지 않은 것은 수입 면에서 도움이 되지 못했기에 자진 퇴출시킨거죠. 그런데 노출 배분 방식으로 바뀌면 이제는 다시 배치하는 것을 고려해야 하지 않을까요.
좌우 광고에서 하나를 빼버린 것은 수입이 없는 광고이면서 방문자에게 광고에 대한 부담을 줄이기 위한 것이었지만, 이제는 광고 수입이 된다면 방문자의 부담과 광고 수입에 대한 저울질이 필요합니다. 어차피 포스팅 하나에 광고는 최소 3~5개, 그 이상도 들어가는 사이트도 있습니다.
광고 좌우 두 개를 배치하는 코드입니다. 물론 여러 개도 가능합니다.
먼저, 티스토리에서 사용했던 코드인데요,
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="50%">
애드센스 코드 삽입
</td>
<td width="50%">
애드센스 코드 삽입
</td>
</tr>
</table>
이 코드도 훌륭하게 사용했습니다. 하지만 구글 블로그에서는 논외로 하겠습니다. 광고 두 개를 배치하는데 이렇게 간단하게 할 수 있으니 코드 걱정하지 않아도 된다는 것으로 소개했습니다. 구글 블로그에서는 테스트하지 않았습니다.
이번에 구글 블로그에서 적용한 광고 좌우 배치 코드입니다.
<style>
.adbox2 ins{
width:336px;
height: 280px;
}
@media(min-width: 1024px) and (max-width: 1200px) {
.adbox2 ins {
width: 300px;
height: 250px;
}
}
@media(min-width: 1200px) {
.adbox2 ins {
width: 336px;
height: 280px;
}
}
</style>
<div class="adbox2">
<div style="display: flex; justify-content: center;">
<table style="padding-right:5px; padding-left:5px;">
<tr>
<td style="text-align: left; padding-left:0px; padding-right:5px; padding-bottom:5px;">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1573940696506574"
crossorigin="anonymous"></script>
<!-- 본문 상단1 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-158963"
data-ad-slot="85632"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</td>
<td style="text-align: right; padding-left:10px; padding-right:0px; padding-bottom:5px;">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1573940696506574"
crossorigin="anonymous"></script>
<!-- 본문 상단2 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-256387"
data-ad-slot="12563"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</td>
</tr>
</table>
</div>
</div>
이 코드에서는 설명하는 곳은 두 곳입니다.
첫 번째 스타일
<style>
.adbox2 ins{
width:336px;
height: 280px;
}
@media(min-width: 1024px) and (max-width: 1200px) {
.adbox2 ins {
width: 300px;
height: 250px;
}
}
@media(min-width: 1200px) {
.adbox2 ins {
width: 336px;
height: 280px;
}
}
</style>
스타일에서는 해상도 크기가 1024~1199까지는 광고 크기가 300 * 250으로 노출됩니다. 그리고 1200 이상이라면 336 *280으로 광고도 커집니다. 해상도가 1024 미만이라면 화면 크기에 맞춰서 노출됩니다. 다만 1200 이상이라면 광고는 더 커지지 않고 336 *280으로 고정되어 노출됩니다.
광고는 고정형으로 만들려고 하다 반응형 그대로 적용했습니다. 고정형으로 만들더라도 반응형 광고처럼 위 코드에 맞춰서 광고 크기는 정해지니 전혀 걱정하지 않아도 됩니다.
두 번째 설명은 애드센스 코드입니다.
지금 애드센스 단위 광고 소스을 보면
data-ad-format='auto'
data-full-width-responsive='true'
이 부분이 삭제되어 있습니다. 만약 이 코드를 그대로 사용했을 때 광고는 한 줄에 두 개가 배치되어 폭은 늘어나지 않지만 길이는 광고 크기 그대로 노출되는 현상이 나오는데, 그것을 제한하기 위해 두 줄을 뺐습니다. 궁금하시면 두 줄을 넣고 광고를 확인해 보면 되겠습니다. 결과를 볼까요.
정리된 코드로 확인한 두 개 배치된 광고가 중앙정렬이 되면서 이쁘게 나왔네요.