티스토리 애드센스(4-2) 반응형 인피드 광고 적용 (단위기준설정)

지난 포스팅에서 인피드 광고 적용방법을 알아보았습니다.

인피드 광고가 PC에서는 제대로 적용되는데 모바일에서 다른 목록들과 다르게 이미지나 리스트 영역이 크게 보이는 현상이 있습니다.

 

이를 해결하기 위해 반응형 인피드 광고 적용 방법에 대해 알아보겠습니다.

 

아직 인피드 광고 생성 및 적용을 하지 않았다면 이전 포스팅을 보고 먼저 적용해주세요.

티스토리 애드센스(4-1) 인피드 광고 넣기(단위기준설정)

 

 

반응형 인피드 광고 적용 방법

인피드 광고 적용 후 애드센스에 접속하여 PC, Mobile 용 소스코드를 메모장에 복사합니다.

(카테고리 리스트 기준으로 설명하겠습니다. 홈-리스트도 동일한 방식으로 적용합니다.)

 

 

복사한 소스코드를 아래와 같이 편집합니다.

편집할 때 <ins> ~ </ins> 부분을 한 줄로 줄 바꿈 하여 편집합니다.

<script>
	document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script>');
	
	if(window.innerWidth>=768){
		//PC용 <ins> ~ </ins>를 넣으세요
		document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="-em+1c-1b-sa+1k8" data-ad-client="ca-pub-1275210501074897" data-ad-slot="9902289416"></ins>');
	}else{
		//모바일 용 <ins> ~ </ins>를 넣으세요
		document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="-g5+1c-66-ht+1jw" data-ad-client="ca-pub-1275210501074897" data-ad-slot="9167275324"></ins>');
	}
	
	(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

 

위에 소스코드처럼 편집을 하고 나면 티스토리 스킨 편집으로 접속합니다.

기존에 적용했던 인피드 광고 부분은 삭제하고 새로 편집한 소스로 변경합니다.

기존 적용 소스

변경 소스

 

 

홈-리스트 부분도 동일하게 PC, Mobile용 소스를 편집하여 기존에 적용했던 부분에 변경하면 됩니다.