티스토리 반응형 스킨에 애드핏 광고 넣기

티스토리 반응형 스킨에 카카오애드핏을 넣는 방법에 대해 적어 보려고 합니다

 

구글 애드센스와 동일하게 카카오애드 핏에서 가서 광고 스크립트를 받아온 후, 플러그인에서 다음애드핏PC버전과 모바일 버전에 각각 스크립트를 넣어주면 됩니다.

 

여기서 생기는 문제가 PC버전으로 볼때는 별 상관없는데 모바일 티스토리 어플이 아닌 실제 웹페이지를 통해서 검색해서 봤을 경우 카카오 애드핏 광고가 화면을 넘어가게 되는 문제가 생기게 되었습니다.

 

구글 애드센스야 알아서 PC버전에서는 상단에 2개를 해주고 모바일에서는 1개만 출력이 되는데, 카카오애드핏 같은 경우 자동으로 되지 않았습니다.

 

여기서 잠깐 제 블로그 환경 설정을 적어보면 아래와 같습니다.

 

- 친효스킨 1.6 ver

- 모바일 꾸미기 설정 -> 티스토리 모바일 웹 자동연결을 사용하지 않습니다.

 

왜 문제가 생기는지 확인을 해보니 카카오애드핏같은경우엔 모바일 웹 자동연결을 사용해야만 PC버전 모바일 버전이 동작하고 있었습니다.

 

그래서 찾아보니 반응형 스킨에는 카카오 애드핏이 쥐약이라는 점을 발견할 수 있었습니다.

구글 애드센스 같은 경우는 구글 애드센스(반응형)이라고 있는데, 카카오애드핏 같은 경우엔 반응형 플러그인이 없습니다.

 

그래서 카카오 애드핏(PC)에 들어가는 소스를 수정을 해야 합니다.

이제 카카오애드핏(모바일)은 사용 안 함으로 설정하고, PC버전만 사용함을 설정합니다.

 

 

 

상단광고, 하단 광고에 각각 아래 소스를 넣어주면 됩니다.

 

<상단 코드>

<div align="center">
<script>
	if ( window.matchMedia( '( min-width: 1024px )' ).matches == true ) {
		document.write( '<ins class="kakao_ad_area" style="display:none;" data-ad-unit = " 본인PC용광고코드 " data-ad-width = "728" data-ad-height = "90"></ins><script type="text/javascript" src="//t1.daumcdn.net/adfit/static/ad.min.js" async><\/script>' );
	}
	if ( window.matchMedia( '( max-width: 768px )' ).matches == true ) {
		document.write( '<ins class="kakao_ad_area" style="display:none;" data-ad-unit = "본인 모바일용광고코드" data-ad-width = "320" data-ad-height = "100"></ins><script type="text/javascript" src="//t1.daumcdn.net/adfit/static/ad.min.js" async><\/script>' );
	}
</script>
</div>
<br>

 

 

<하단 코드>

<br>
<div align="center">
<script>
	if ( window.matchMedia( '( min-width: 1024px )' ).matches == true ) {
		document.write( '<ins class="kakao_ad_area" style="display:none;" data-ad-unit = " 본인PC광고코드 " data-ad-width = "728" data-ad-height = "90"></ins><script type="text/javascript" src="//t1.daumcdn.net/adfit/static/ad.min.js" async><\/script>' );
	}
	if ( window.matchMedia( '( max-width: 768px )' ).matches == true ) {
		document.write( '<ins class="kakao_ad_area" style="display:none;" data-ad-unit = " 본인모바일광고코드 " data-ad-width = "320" data-ad-height = "100"></ins><script type="text/javascript" src="//t1.daumcdn.net/adfit/static/ad.min.js" async><\/script>' );
	}
</script>
</div>

 

아래 파일 첨부합니다.

 

반응형애드핏상단.txt

0.00MB

반응형애드핏하단.txt

0.00MB

 

상단과 하단을 나누어 놓은 이유는 전일 포스팅한 한 줄 띄우기와 중앙 정렬 때문에 나누어놨습니다.

 

https://plantthefuture.tistory.com/89

카카오애드핏 가운데정렬하는 법/줄 바꾸기

 

 

이렇게 반응형 스킨에 카카오애드핏 광고를 넣는 방법에 대해 알아보았습니다.

잠깐이지만 모바일에서 광고가 한 페이지를 넘게 나와 고생했던 거 생각하면 끔찍합니다.

 

블로그를 쓰시는 분이라면 한 번쯤은 자기 블로그를 티스토리 앱이 아닌 웹페이지에서 검색해보는 건 어떨까 싶습니다.