[티스토리]반응형 애드핏 달기

모바일과 PC에 적용된 반응형 애드핏

반응형 스킨에 애드핏을 다는 방법에 대해 알아보도록 하겠습니다.

 

1. 카카오 애드핏 광고 단위 ID 받기

카카오 애드핏에 접속합니다. [카카오 애드핏 바로가기]

광고 관리의 전체 매체에서 새 매체를 클릭합니다.

매체 등록 정보를 기입합니다.

 

매체명 : 자유로이 작성

매체 유형 : Web

매체 고유값 : 블로그 주소 

 

다 기입하였으면 광고 단위 등록을 클릭합니다.

매체 TS가 생성되고 매체유형 WEB에 매체 고유값이 블로그 주소로 등록된 것을 확인할 수 있습니다.

매체 명을 클릭해줍니다.

새 광고 단위를 클릭할 수 있습니다. 눌러줍니다.

카카오 애드핏 광고 단위 안내

다양한 애드핏 광고를 만들 수 있습니다. 만들어 주시면 됩니다.

저는 다양한 종류의 광고를 만들어 놓았고 광고단위 생성된 광고단위 ID를 확인할 수 있습니다.

 

 

2. 광고 달기

저는 반응형 스킨 Letter를 사용하고 있습니다.

사용중인 Letter 스킨

반응형 스킨을 사용하게 되면 티스토리의 Daum AdFit(PC)만을 사용하시면 됩니다.

반응형 스킨의 경우 URL이 /m/을 사용하지 않기 때문에 Daum AdFIt(모바일)은 동작을 하지 않습니다.

만약 반응형을 사용하지 않으시면 Daum AdFit(모바일)과 Daum AdFit(PC)에 각각의 스크립트를 달아주면 됩니다.

티스토리 플러그인의 다음 애드핏

카카오 애드핏의 광고 단위의 우측에 보면 스크립트 버튼이 있습니다.

스크립트를 복사해 옵니다.

티스토리 플러그인의 Daum AdFIt(PC)를 클릭해줍니다.

복사해온 스크립트를 광고 영역에 넣으면 한 가지만 제공이 될 것입니다.

 

그렇기 때문에 만약 반응형 애드핏 스크립토 변경하는 게 어려 우시 다시면 가로길이가 320 이하인 광고를 넣어주시면 PC버전과 모바일 버전에서 정상 동작을 하게 될 것입니다. 다만 광고 크기가 작아지겠지요.

320X100 사이즈의 PC 광고 형태

320 X 100의 모바일 광고 형태

반대로 728X90의 광고만을 넣게 되면 모바일에서는 광고가 잘리고 "모바일 웹에서 애드핏 광고의 우측이 잘립니다. 수정후 다시 신청 바랍니다."라는 애드핏 심사 보류를 받게 됩니다.

728X90 사이즈의 광고만을 넣었을 경우 모바일에서 광고의 잘림을 확인 할 수 있습니다.

 

그렇기 때문에 스크립트를 반응형으로 수정해서 넣어주시면 PC에선 729 X 90 모바일에선 320 X 100으로 출력되는 광고를 확인하실 수 있습니다.

만약 PC버전에는 728 X 90의 광고를 모바일 버전에는 320 X 100 버전의 광고를 사용하실 거면 아래 스크립트를 복사해 광고 단위 ID만 바꿔주시면 됩니다.

<script>
    <!-- PC 광고 -->
	if ( window.matchMedia( '( min-width: 728px )' ).matches == true ) {
		document.write( '<ins class="kakao_ad_area" style="display:none;" data-ad-unit = "광고단위 ID" data-ad-width = "728" data-ad-height = "90"></ins><script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async><\/script>' );
	}
    <!-- 모바일 광고 -->
	if ( window.matchMedia( '( max-width: 727px )' ).matches == true ) {
		document.write( '<ins class="kakao_ad_area" style="display:none;" data-ad-unit = "광고단위 ID" data-ad-width = "320" data-ad-height = "100"></ins><script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async><\/script>' );
	}
</script>

설명을 드리자면 min-width와 max-witdth를 확인해 광고를 달리 적용하는 것입니다. 

가로 크기가 최소 728인 환경에서는 728X90의 광고를 달게 될 것이고 가로 크기가 최대 727일 경우 320 X 100의 광고를 달게 될 것입니다.

PC 화면에서 728X90의 광고를 달 것이면 min-width를 728로 주고 모바일은 max-width를 727로 주면 됩니다.

 

모바일에 적용된 반응형 애드핏(320X50)

PC에 적용된 반응형 애드핏(780X90)

<script><\/script>

주의하실 점은 카카오 애드핏에서 스크립트를 복사하면 /script로 스크립트가 끝나는데 \/script로 달아 주어야 하는 것입니다. 주의하셔서 입력하시기 바랍니다.

또, document.wirte에서 개행이 적용은 바로 안되니 애드핏에서 복사한 스크립트를 한 줄로 입력해주시면 됩니다.