정리와 기록

반응형

다음 애드핏 심사 보류 통보가 왔는데, 모바일에서 광고 우측이 잘려있다는 내용이더군요.

 

실제로 모바일로 확인하였을 당시, 우측이 폰너머까지... 광고가 잘려보였던 것은 확실했습니다.

 

당시에는 단순히 기본 광고이기 때문에 이런 문제가 조금 있을 수 있는것인가? 대수롭지 않게 넘어갔죠.

 

왜 이런 문제가 생기는걸까?

 

지금 다시 생각해보면 언뜻 이유를 알 것 같았습니다.

 

티스토리의 플러그인에 구글 애드센스의 경우에는 애드센스(PC), 애드센스(모바일), 애드센스(반응형) 이렇게

 

세가지 형태의 플러그인을 제공하는 반면!

 

다음 애드핏의 경우에는 애드핏(PC), 애드핏(모바일) 두가지 형태의 플러그인만 제공한다는 것이죠.

 

광고를 넣을 때에는 사이즈에 맞는 광고만을 넣을 수 있게 되어있는데,

 

애드센스에 광고를 넣을 때에는 반응형 플러그인으로 손쉽게

 

PC와 모바일에 문제없이 적용할 수 있었던 것 입니다.

 

실질적인 해결 방법에 대해 알려드리겠습니다.

 

이렇게 PC, 모바일에 맞는 광고를 따로따로 넣어줘야한다는게 이 문제의 핵심 포인트인데요.

<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>

다음 애드핏에서 광고를 하나 만들면 보통은 이런 광고 스크립트가 주어집니다.

 

이 스크립트는 그대로 사용하게 될 시에 모바일에서도 728x90의 광고가 적용되어 버리기 때문에

 

우측이 잘린 형태의 광고가 노출되는 것 입니다.

 

그렇기 때문에 저는 애드핏 광고관리 메뉴에서 광고단위 ID만 복사해서 가져다 쓸 예정입니다.

 

PC 버전

 

PC 버전용 스크립트.txt
0.00MB

 

위 첨부파일 내 스크립트를 보시면 '자신의 광고단위ID 기입란' 이라는 문구를 보실 수 있으실텐데

 

여기에 복사해둔 자신의 광고단위 ID를 넣어주시고,

 

이곳에 그대로 넣어주시면 됩니다.

 

if ( window.matchMedia( '( min-width: 1024px )' ).matches == true )

 

스크립트 상단의 이 부분이 의미하는 것이 만약에 화면의 폭이 최소 1024px 임이 사실이라면...

 

아래 스크립트를 실행하시오. 라는 의미입니다.

 

기본적으로 728x90 사이즈가 적용되어있습니다.

 

data-ad-width = "728" data-ad-height = "90" 스크립트 내 사이즈 기입란

 

자신에게 맞는 수치로 변경하여 적용해주시면 됩니다.

 

모바일 버전

 

모바일 버전용 스크립트.txt
0.00MB

 

모바일 버전 또한 위와 동일한 방식으로 넣어주시면 됩니다.

 

기본적으로 300x250 사이즈로 적용되어있으니, 자신에게 맞는 사이즈로 변경해주세요.

 

스크립트는 동일한 방식으로 구성되어 있습니다.

 

반응형으로 한번에 적용하기

 

반응형 스크립트.txt
0.00MB

 

다음 애드핏(PC)를 선택하여 위 스크립트를 본인이 생성한 광고 사이즈에 맞게 수정하여

 

적용해주시면 되는데, 위 쪽 스크립트가 PC 용이고, 아래쪽이 모바일 용 광고 ID를 넣으면 되는 부분입니다.

 

이 스크립트를 적용하시면 자동으로 PC와 모바일에서 맞는 사이즈의 광고를 보여주기 때문에

 

번거롭게 두번에 걸쳐 나눠하시지 않아도 됩니다.

반응형

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band