티스토리 애드센스 광고 모바일에서 가운데 정렬 / 상단 오른쪽 광고배치

티스토리에 애드센스 광고를 달면서 그동안 광고 위치를 고민해왔다. 초반에는 글 중간이랑 마지막에만 달았는데, 글 상단에 광고를 단 사람들이 많고 의외로 상단 광고가 더 클릭률이 높다길래 나도 상단에 광고를 하나 달았다.

티스토리 플러그인으로 자동광고 넣기가 있다는 건 알았지만 글마다 원하는 위치가 다르기에 글 200여개가 넘어갈때까지 수작업으로 포스트 하나하나에 소스를 넣어왔는데, 왠지 더 길어지기전에 남들이 하는대로 플러그인을 사용해야겠다는 생각이 들었다.

플러그인으로 자동 광고를 넣으면 나중에 전체적으로 광고 수정하기 쉬워지겠지만, 다른 한편으로는 광고때문에 글을 수정해야되는 일이 있을까? 란 생각으로 미뤄오다가 결국 상단에만 플러그인 광고를 사용하기로 했다.

내가 지금 사용하는 스킨은 반응형 스킨이지만 모바일은 속도가 느려서 따로 반응형으로 선택안하고 일반 티스토리 모바일 화면을 사용중이다.

 

기존에 PC에서 글을 쓸때 화면 오른쪽에 336x280 사각형 광고를 배치했는데, 모바일에서는 이렇게 배치한 광고가 그대로 나온다.

근데!! 모바일 화면에서 이 광고가 '가운데 정렬'로 안나오고 위에 캡쳐화면 두번째 사진처럼 살짝 왼쪽으로 광고가 쏠려서 나타났었다.

광고가 짤리지는 않지만 눈에 거슬리기 시작했고, 이걸 어떻게 수정해야하나 찾아봤는데 마땅한 방법이 없었다.

 

그렇게.. 약간 신경에 거슬리지만 컴알못이라 수정도 못하고 지내고 있는데, 어떤 글에서 모바일 상단에 336x280 광고가 나오는게 구글 애드센스 정책에 위반된다는 글을 봤다. 결국 모바일화면을 위해 티스토리 플러그인으로 모바일/PC 따로 광고를 삽입하기로 했다.

 

구글 애드센스(모바일)화면 상단에만 300x250 넣고, 구글 애드센스(PC)에는 '336x280 광고 우측정렬'소스를 넣었다.

그랬더니, 의외로 그동안 속썩이던 모바일 가운데 정렬이 해결되었다.

글 자체에 광고소스를 넣었을때는 모바일에서 가운데 정렬이 아니라 왼쪽으로 쏠려있었는데, 모바일 플러그인으로 넣으니 딱! 가운데 정렬!! ㅎㅎ 

맨 위에 이미지 두개 중 첫번째 이미지가 모바일 플러그인으로 넣은 광고(가운데 정렬) 두번째 이미지가(기존 피씨에 넣은 우측정렬)광고이다.

 

플러그인으로 광고를 넣어줬기에 기존에 글마다 직접 넣었던 광고는 일일이 수작업으로 지웠다. ㅠㅠ

그랬더니 모바일에서는 이렇게 플러그인으로 넣은 광고만 깔끔하게 상단에 남아있다.

아직 글에 광고 배치를 어떻게 할 것인지 확실하게 정해놓은게 아니라 급하게 상단 부분만 수정한 것이라서 모바일 플러그인도 '상단'에만 광고를 배치했다.

그렇기때문에 글 중간이나 하단에 PC에서 넣었던 광고들이 그대로 나오게 하고 싶으면... 모바일 플러그인 광고를 넣을 때 아래와 같이 하면된다. 

 

저 화면에서 <본문에 직접 삽입한 애드센스 광고를  모바일에서 "사용합니다" >로 선택해야한다.

만약 모바일 광고 PC광고를 따로 만들고 싶다면 '사용하지 않습니다'로 선택해야하지만 나는 모바일 상단에만 플러그인으로 광고를 삽입했기때문에 중간/하단은 PC에 나오던 그대로 하고 싶었다.

그리고 <일치하는 콘텐츠> 광고를 사용 중인데 '사용하지 않습니다'로 선택하면 모바일에서 <일치하는 콘텐츠 광고>가 안나온다.

 이것도 플러그인 반응형으로 광고를 넣었는데, 왜 모바일에서 안나오는지 모르겠지만 이것저것 해보다가 '사용합니다' 눌렀더니 다시 모바일에서 나오기 시작했다.

 

현재 PC화면에서 사용중인 '글 오른쪽에 광고 배치'화면.

소스는

 <div style="float:right;margin:0 0 10px 10px"> 여기에 애드센스 광고 넣기 </div>

오른쪽광고배치.zip

 

 

<div style="float:right;margin:0 0 10px 10px"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 사각형광고 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-**********"
     data-ad-slot="**********"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> </div>

PC 플러그인으로 상단에 이 소스를 넣으면 위 화면처럼 글만써도 자동으로 광고가 나온다.

플러그인으로 넣으면 그동안 써왔던 모든 글들에 이 광고 소스가 적용된다. 그렇기때문에 이전 글은 좀 생뚱맞은 배치가 될 수 도 있다.

 

이렇게...

저 광고 왼쪽이 원래 빈 공간이다. (허전해서 집을 넣어줬다...;;)

글 상단에 글이 아닌 이미지를 바로 넣고 쓴 글은 왼쪽에 아무런 글이 없는 배치가 된다.

글 몇개는 밑에 글을 위로 붙여넣기해서 수정해봤지만 모든 글을 수정할 수 없어서 포기했다.

상단에 사각형 광고 두개를 병렬로 삽입할까도 해봤지만 너무 광고가 많이 차지하는 느낌도 들고, 해봤는데 이 실패해서 그냥 하나만 광고를 배열하기로 했다. 어차피 플러그인으로 넣은거니깐 나중에 한꺼번에 수정할 수 있게 되서 편하다.

대충 광고 배치가 어설프게나마 해결 된 것 같으니 이제 여기에 신경 끄고 글이나 열심히 써야겠다. ^^

 

+

플러그인 광고의 단점: 테스트를 위해 비공개로 쓴 글까지 모두 광고가 나온다.;;;