본문 바로가기


IT정보/블로그정보

애드센스 광고 pc 2개 모바일1개 반응형으로 삽입하기

by 예화사랑 2020. 7. 12.

 

 

■  목차

1. PC 2개 모바일 1개 반응형 광고 만들기(자바스크립트)

2. PC 1개 모바일 1개  광고 분리하기 (자바스크립트)

 

 

 

 

 

1. PC 2개 모바일 1개 반응형 광고 만들기(자바스크립트)

 

 

<div style="text-align:center;width:100%">
	<!-- 데스크탑용 애드센스 -->
	<script>
	if(window.getWindowCleintWidth()>=768){
		document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" data-language="ko" style="display:inline-block;width:336px;height:280px" data-ad-client="AAA" data-ad-slot="BBB"></ins></span><span style="margin-left: 10px;"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" data-language="ko" style="display:inline-block;width:336px;height:280px" data-ad-client="AAA" data-ad-slot="CCC"></ins>');
		(adsbygoogle = window.adsbygoogle || []).push({});
	}
	</script>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div style="text-align:center;width:100%">
	<!-- 모바일 상단 반응형 크기 애드센스 -->
	<script>
	if(window.getWindowCleintWidth()<768){      
		document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" data-language="ko"   style="display:block" data-ad-client="AAA" data-ad-slot="DDD" data-ad-format="auto" data-full-width-responsive="true"></ins>');
		(adsbygoogle = window.adsbygoogle || []).push({});
	         }
	</script>
</div>

 

사용방법

1. 데스크탑용 광고를 336*280 고정사이즈로 2개 만듭니다.

2. 모바일용 반응형 광고를 1개 만듭니다.

3.위 소스에서 AAA,BBB,CCC,DDD 값을 여러분이 만든 광고코드에서  data-ad-slot 그리고 data-ad-client 값을 찾아서 넣어주시면 됩니다.

AAA = data-ad-client 값 (광고 3개 모두 동일합니다.)

BBB= 데스크탑용 광고1의 data-ad-slot 값

CCC= 데스크탑용 광고2의 data-ad-slot 값

DDD= 모바일용 광고의 data-ad-slot 값

4. 위 소스에 보면 768 이라는 숫자가 두개 보입니다. 이 숫자는 인터넷 창의 가로 넓이가 768 기준으로 바뀝니다. 여러분의 스킨에 맞게 수정하시면 됩니다.

 

 

 

 

 

2. PC 1개 모바일 1개  광고 분리하기 (자바스크립트)

 

 

모바일광고와 PC 광고를 분리하면 좋은점은 분리했을때 모바일 광고의 단가가 상당히 높아집니다. 제 경우는 그렇더라구요~ 그래서 저는 제일 클릭률이 높은 상단광고는 무조건 분리해서 광고를 달고 있답니다.  위에서는 PC에서 광고 2개 다는 방법에 대해 알아봤는데요.. 만약 PC 에서 광고 두개가 부담스럽다면 그냥 PC도 반응형으로 1개 모바일도 반응형으로 1개 사용하셔도 됩니다. 다만 PC용과 모바일용 광고를 분리하시는것을 추천드립니다. PC 1개 모바일 1개 설정하는 방법은 아래를 참고하세요~

 

 

<div style="text-align:center;width:100%">
	<!-- 데스크탑용 애드센스 -->
	<script>
	if(window.getWindowCleintWidth()>=768){      
		document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" data-language="ko"   style="display:block" data-ad-client="AAA" data-ad-slot="BBB" data-ad-format="auto" data-full-width-responsive="true"></ins>');
		(adsbygoogle = window.adsbygoogle || []).push({});
	         }
	</script>
</div>
<div style="text-align:center;width:100%">
	<!-- 모바일 상단 반응형 크기 애드센스 -->
	<script>
	if(window.getWindowCleintWidth()<768){      
		document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" data-language="ko"   style="display:block" data-ad-client="AAA" data-ad-slot="CCC" data-ad-format="auto" data-full-width-responsive="true"></ins>');
		(adsbygoogle = window.adsbygoogle || []).push({});
	         }
	</script>
</div>

 

사용방법

1. 데스크탑용 반응형 광고를 1개 만듭니다.

2. 모바일용 반응형 광고를 1개 만듭니다.

3. 위 소스에서 AAA,BBB,CCC 값을 여러분이 만든 광고코드에서  data-ad-slot 그리고 data-ad-client 값을 찾아서 넣어주시면 됩니다.

AAA = data-ad-client 값 (광고 2개 모두 동일합니다.)

BBB= 데스크탑용 광고의 data-ad-slot 값

CCC= 모바일용 광고의 data-ad-slot 값

4. 위 소스에 보면 768 이라는 숫자가 두개 보입니다. 이 숫자는 인터넷 창의 가로 넓이가 768 기준으로 바뀝니다. 여러분의 스킨에 맞게 수정하시면 됩니다.

 

이렇게 해서 애드센스 광고를 모바일과 pc 광고 반응형으로 삽입하는 방법에 대해 알아보았습니다. 위 소스를 응용하시면 pc 와 모바일광고를 다양하게 삽입하실수가 있을겁니다. 다음에는 애드핏 광고를 반응형으로 다는 방법에대해 포스팅할 예정이니 이것도 기대해주세요~ ^^

 

공감♥ 은 고래도 춤추게 합니다~ ^^

 

 


댓글