티스토리 애드센스(3-2) 반응형 디스플레이 상단 2개 넣기(단위기준설정)

지난 포스팅에서 말씀드렸듯이 구글 애드센스 반응형 디스플레이 광고를 상단에 2개 넣는 방법에 대해 포스팅하겠습니다. 우선 PC에서는 상단에 2개를 넣어도 괜찮으나 모바일에서 2개를 넣는 것은 정책 위반이라고 합니다. 
그렇게 때문에 PC에서는 2개 모바일에서는 1개를 보여주도록 설정하는 방법을 알려드리겠습니다.

 

 

상단2개(PC 2개, 모바일 1개) 하단1개 넣는 방법

지난번 포스팅에서 미리 만들었던 반응형 디스플레이 광고 상단 1, 상단 2, 하단을 활용하여 설정하도록 하겠습니다. 
광고 추가하는 방법은 아래 이전 포스팅을 참고해주세요.

 

2019/12/02 - [기타/블로그 팁] - 티스토리 애드센스(3-1) 반응형 디스플레이 광고 설정 방법(단위기준설정)

 

 

 

광고가 모두 생성이 되었으면 "<>" 버튼을 클릭하여 상단1, 상단2 코드 중 아래 data-ad-client와 data-ad-slot부분을 복사를 합니다.

 

 

ㅁㅁㅁㅁㅁㅁㅁㅁㅁ : @@@ 클라이언트 ID @@@

ㅁㅁㅁㅁㅁㅁㅁㅁㅁ : @@@ 상단 1 광고 ID @@@

ㅁㅁㅁㅁㅁㅁㅁㅁㅁ : @@@ 상단 2 광고 ID @@@

 

그다음 아래 소스 부분에서 색상 표시 별로 검색하여 각각의 ID 값을 코드에 붙여 넣어 줍니다.

 

<!-- 광고 삽입: 글 - 상단1, 상단2 START-->
<div align="center">
	<style>
		.myads1 { width:320px; height: 250px; }
		.myads2 { display:none; }
		@media(min-width: 450px) { .myads1 { width: 336px; height: 280px; } }
		@media(min-width: 1100px) { .myads2 { width: 336px; height: 280px; } }
	</style>
	<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<span>
		<!-- 광고 삽입: 글 - 상단1(반응형 디스플레이) -->
		<ins class="adsbygoogle myads1" 
			style="display:inline-block" 
			data-ad-client="@@@ 클라이언트 ID @@@" 
			data-ad-slot="@@@ 상단1 광고 ID @@@"></ins>
		<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
	</span>
	<span style="margin-left: 20px;">
		<!-- 광고 삽입: 글 - 상단2(반응형 디스플레이) -->
		<ins class="adsbygoogle myads2" 
			style="display:inline-block" 
			data-ad-client="@@@ 클라이언트 ID @@@" 
			data-ad-slot="@@@ 상단2 광고 ID @@@"></ins>
		<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
	</span>
</div>		
<!-- 광고 삽입: 글 - 상단1, 상단2 END-->

 

 

그럼 완성된 코드를 복사하고 티스토리 블로그 관리 > 플러그인 클릭 후 "구글 애드센스 (반응형)" 플러그인을 찾아 클릭합니다.

 

 

 

기존에 광고를 적용하신 분들은 코드가 이미 있는 상태이고 처음이신 분은 공백인 상태입니다. 
그럼 광고 형태 맨 우측(3번째)을 클릭 후 상단 부분에 위에서 만든 소스코드를 붙여 넣습니다. 
그리고 하단 부분 광고 소스는 애드센스에서 제공하는 샘플 그대로 붙여 넣으시면 됩니다. 
(기존에 적용되어 있다면 수정하지 않으시면 됩니다.)

 

 

 

그러면 글 상단에 PC에서는 2개의 광고, 모바일에서는 1개의 광고와 글 하단에 광고1개가 적용됨을 확인하실 수 있습니다.