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

티스토리 블로그의 홈화면은 상세화면과 구분됩니다. 상세화면에는 본문에 광고를 삽입하여 광고를 효과적으로 표현하지만 홈화면에는 어떻게 적용을 해야할지 궁금해지기 마련입니다. 저도 이런 궁금증을 가지고 있었는데 테스트를 통해서 이런 부분들을 하나씩 해소해 보았습니다.

홈화면에 적용하려는 광고는 상단 리더보드 광고와 사이드바 광고의 적용이 될 것 같습니다. 저는 이 두가지 광고를 적용하기 위해서 이미 앞의 강의에서 홈화면을 최적화하는 스킨작업을 선행하였습니다. 스킨처리 작업에 관심이 있으시다면 아래 링크로 나타나는 이전 강의를 참고하시기 바랍니다.

2019/09/18 - [블로그시작] - 블로그시작 9강. 티스토리 블로그 스킨 최적화

블로그시작 9강. 티스토리 블로그 스킨 최적화

그러면 차근차근 어떻게 적용할지 살펴보겠습니다.

상단 리더보드 광고 삽입

광고삽입 방식은 모두 수동으로 작업합니다. 수동작업에 앞서 어떻게 구글애드센스광고의 크기가 관리되고 있고 어떤 크기가 인기가 있는지 살펴보는 것이 필요합니다. 아래 구글의 정보를 참고 바랍니다.

https://support.google.com/adsense/answer/6002621?hl=ko

광고 크기 안내 - AdSense 고객센터

구글에서 소개하고 있는 바와 같이 728x90 크기의 리더보드 광고가 적합한 것을 확인할 수 있습니다. 970x90도 존재합니다. 리더보드의 성격상 가로로 긴 광고를 노출하고 본문의 광고효과를 노출하는 것이 효과적으로 보임으로 높이를 90px로 고정하겠습니다. 

먼저, 리더보드로 사용하기 위한 구글 광고를 생성합니다. 구글 광고 생성에 대한 내용은 아래 링크의 이전 강의를 참고 바랍니다.

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

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

광고 스크립트를 살펴보겠습니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 사이트리더보드광고 -->
<ins class="adsbygoogle"
	style="display:block"
	data-ad-client="ca-pub-OOOO"
	data-ad-slot="xxxxx"
	data-ad-format="horizontal" // <= 변경필요
	data-full-width-responsive="true"></ins>
<script>
	(adsbygoogle = window.adsbygoogle || []).push({});
</script>

위에서 주의할 부분은 data-ad-format 을 horizontal 로 해주어야 광고가 90px에 맞는 형태로 표출됩니다. 

저는 광고를 상단 메뉴영역에 바로 붙여서 표출할 예정입니다. 이를 위해서 CSS 수정을 약간 진행하겠습니다.

#header .site-ads-leaderboard {
	position: relative;
	max-width: 1080px;
	height: 90px;
	margin: 0 auto;
	
	background-color: rgba(0,0,0,0.25);
	
}

위의 CSS 를 추가하였습니다. 이 CSS 는 Book Club 스킨을 기준으로 하고 있습니다. background-color 는 위치를 확인하기 위한 속성이기 때문에 위치 확인이 되면 주석처리하거나 삭제합니다.

			<nav id="gnb">
				

  
홈
  
블로그시작
  
라이브커머스
  
 AI블로그
  
방송리뷰
  
외신보세
  
컴궁

			</nav>
		</div>
		<div class="site-ads-leaderboard">
			<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 사이트리더보드광고 -->
			<ins class="adsbygoogle"
     		style="display:block"
     		data-ad-client="ca-pub-OOOO"
     		data-ad-slot="xxxxx"
     		data-ad-format="horizontal"
     		data-full-width-responsive="true"></ins>
			<script>
     		(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
	</header>

HTML 은 위와 같이 수정합니다. 위치는 header 태그 내에서 수정되어야 하며 <nav> 태그와 <inner> 태그가 끝나는 바로 밑에서 추가하면 되겠습니다. <div> 를 추가하고 classs 를 site-ads-leaderboard 로 지정한 후에 애드센스 스크립트를 삽입합니다. 

적용이 잘 되었는지 살펴볼까요?

원하던 바와 같이 광고가 메뉴와 본문사이에 적절한 배치를 이루고 있습니다. 실용적이고 보기에도 나쁘지 않아 보이네요.

사이드바광고 삽입

다음으로 사이드바 영역에 광고를 삽입하겠습니다. 티스토리는 이 작업을 쉽게 할 수 있도록 플러그인을 제공합니다. 

플러그인에서 베너 출력 플러그인을 검색하고 활성화 시킵니다. 

사이드바에 배너를 출력해준다고 설명해 줍니다. 

활성화한 기능이 사용가능한지 관리자 메뉴로 들어가 봅니다. 꾸미기의 사이드바 메뉴로 들어갑니다. 

사이드바에 관련된 각종 옵션을 확인할 수 있습니다.

몇가지 플러그인기능이 활성화된 것을 볼 수 있습니다. 우리가 사용할 것은 HTML 배너출력입니다. 해당 플러그인을 사이드바2에 추가합니다.

플러그인을 추가할 때에 이름과 애드센스에서 복사한 광고 스크립트를 HTML소스 영역에 붙여넣습니다. 저장을 하기 전에 "사용자 모듈에 저장" 을 체크하면 해당 소스를 재사용 할 수 있습니다. 사이드바에 여러개의 광고를 삽입하기 위한 기능입니다. 사용자모듈에서 사이드바의 원하는 위치에 광고를 추가합니다.

이미지와 같이 사용자 모듈을 통해 여러개의 사이드바애드센스를 추가한 것을 확인할 수 있습니다.

정상적으로 사이드바광고가 표시되고 있습니다. 

 

홈화면에 적용된 광고를 모니터링 해보고 본문에서도 튜닝 가능한 포인트들을 찾아보아야 겠네요. 본문 상단 타이틀이 너무 크게 나오는 부분하고 사이드바 영역도 실적이 좋은 300x250 광고가 나올 수 있는 튜닝등도 고민이 필요해 보입니다. 글을 참고하셔서 블로그에 맞는 튜닝을 해보시면 좋겠네요. 글이 너무 길어지는 감이 있어서 다음 글에서 이어 가겠습니다.