블로그시작15강. 티스토리 본문 상단 애드센스 광고 반응형 최적화

티스토리 블로그는 플러그인을 통해 반응형에 맞추어 본문의 상단광고를 설정할 수 있도록 지원한다. 일반적으로 본문의 상단광고를 반응형으로 1개를 설정하게 된다.

그러나 티스토리 블로거들의 경험을 기반으로할 때에 데스크탑에서 상단 2개의 광고를 표현하는 것이 효과적으로 광고를 노출할 수 있다는 의견을 많이 접하게 된다. 실제로 많은 블로거들이 상단 2개의 광고를 사용한다. 

지난 애드센스 광고의 실적이 높은 광고크기에 대한 정보를 참조하면 336x280과 같은 사이즈의 광고가 효과적이라는 것을 알 수 있다. 오늘은 본문 상단광고를 반응형에 맞게 최적화하는 방법을 공유해 보겠습니다. 

2019/09/20 - [블로그시작] - 블로그시작10강. 티스토리 홈화면 애드센스 디스플레이광고 최적화

블로그시작10강. 티스토리 홈화면 애드센스 디스플레이광고 최적화

지난 애드센스 광고의 크기와 관련된 정보를 참고 하시려면 위의 링크를 확인하시기 바랍니다.

상단 336x280 고정형 광고 생성

상단 2개의 광고를 반응형에 맞게 노출하기 위해서는 스크립트 작업과 추가광고슬롯이 필요합니다. 애드센스 광고를 추가하는 것은 아래의 글을 참고하시기 바랍니다.

2019/09/11 - [블로그시작] - 블로그시작 8강. 티스토리 구글 애드센스(Google AdSense) 신청

블로그시작 8강. 티스토리 구글 애드센스(Google AdSense) 신청

광고단위에서 고정형을 선택하고 크기를 336x280에 해당하는 크기로 만듭니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 데스크탑 본문 좌상단 고정형 336x280 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="{1}"
     data-ad-slot="{2}"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

위와 같은 스타일의 광고스크립트를 얻을 수 있습니다. 그러면 이 광고를 이용하여 어떻게 반응형으로 표현될 수 있는지 검토해 보겠습니다.

본문 상단 2광고 스크립트 추가

상단의 좌측은 항상 336x280 에 해당하는 크기의 광고를 노출하고자 합니다. 또한 Book Club 스킨의 경우 1080 해상도를 기준으로 상단광고를 2개 나타나게 할지 아니면 반응형으로 1개를 나타나게 할지 구분하는 것이 필요합니다. 

스크립트를 살펴보면 다음과 같이 구성할 수 있습니다.

<div style="text-align:center;width:100%;">

<script>

var adTop = '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="image-side" data-ad-client="{1}" data-ad-slot="{2}" data-ad-format="auto" data-full-width-responsive="true"></ins>';
var adTopRight = '<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="{1}" data-ad-slot="{2}"></ins>';
var adTopLeft = '<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="{3}" data-ad-slot="{4}"></ins>';

if(screen.width>=1080){
	document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script>');
    document.write(adTopLeft);
    (adsbygoogle = window.adsbygoogle || []).push({});
    
	document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script>');
	document.write(adTopRight);
	(adsbygoogle = window.adsbygoogle || []).push({});
} else {
	document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script>');
	document.write(adTop);
	(adsbygoogle = window.adsbygoogle || []).push({});

}


</script>

</div>

위의 스크립트에서 {1},{2} 는 기존 본문 상단광고에 사용하던 광고정보를 {3},{4} 의 영역에는 새로 생성한 고정형 상단 광고에 대한 정보를 추가합니다. 스크립트 활용을 위해 첨부합니다.

본문상단광고 반응형.txt

0.00MB

위의 스크립트를 그러면 어디에 추가할까요? HTML 에 바로 추가할 수 있지만 티스토리 반응형 구글 애드센스 플러그인의 상단광고 영역을 교체하여 사용할 수 있습니다. 

티스토리 본문 상단 2광고 반응형 최적화 - 데스크탑

상단광고가 336x280 으로 2개가 적절하게 적용된 것을 확인할 수 있습니다. 그러면 1080 이하의 해상도는 어떻게 반응할까요?

티스토리 본문 상단 2광고 반응형 최적화 - 모바일

상단광고를 336x280 으로 고정할 수 있지만 반응형 광고가 상황에 맞게 더 적절한 광고를 표출할 것을 기대하면서 고정으로 사용하지 않고 자유롭게 표현되도록 하였습니다. 의도한 바와 같이 적절한 광고가 표출되는 것을 확인할 수 있습니다. 

최적화된 사이트관리를 통해 유익한 블로그 활동이 되시길 바랍니다. 문의사항이 있으시면 답변 드리겠습니다. 

참고로, 티스토리 구글 상단광고는 플러그인 사용을 통해 쉽게 적용할 수 있습니다.

티스토리 관리페이지의 플러그인 목록에서 구글 에드센스(반응형)을 사용하시면 됩니다.

해당 플러그인을 위와 같이 상단, 하단, 상/하단 광고를 적용할 수 있는 옵션이 있습니다. 저는 상/하단 모두 적용할 수 있도록 하였습니다. 위의 스크립트를 상단 부분에 해당하는 첫번째 텍스트 박스에 붙여넣기 하시면 적용되니 참고하시기 바랍니다.