반응형 애드센스 안쓰고 원하는 애드센스 노출시키기

Posted by Readiz
2014.04.19 10:08 반응형 티스토리/Tistory

Make Responsive Adsense!



  특히나 반응형 스킨에서 이슈가 되는 문제일 것입니다. 구글 애드센스의 반응형 광고 단위는 문제가 많습니다. 물론 잘 다루는 분들은 관계가 없지만, 일단은 어렵습니다. 원하는 형태로의 변형이 쉽지 않죠.. 또한 반응형 광고 단위는 광고 크기를 수정하는 것일 뿐, 광고가 나오는 위치를 조절할 수 있는 것은 아닙니다. CSS를 조합하여 사용하면 위치도 데스크탑에서 우측, 모바일에서 중앙 이런 정도는 지정이 가능하지만 아예 다른 광고를 노출시킬 수는 없다는 것이 문제죠. 무조건 반응형 애드센스만 사용해야 합니다. 하지만 창크기를 감지하여 애드센스를 삽입하는 코드를 사용한다면 이런 문제에서 벗어날 수 있습니다. 





  제 블로그를 예시로 보여드리면서 코드를 한번 보도록 하겠습니다.



>=1550px



<1550px




<768px



  이 방법을 이용하면 굉장히 동적으로 광고를 조절할 수 있습니다. 코드는 기본적으로 아래와 같은 형식입니다.

 

	
<script>
if(window.getWindowCleintWidth()<768){
	document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" style="display:inline-block;width:200px;height:200px;" data-ad-client="" data-ad-slot=""></ins>');
	(adsbygoogle = window.adsbygoogle || []).push({});
}
</script> 
	


  위 코드를 광고를 출력하기를 원하는 위치에 삽입하면 됩니다. 여기에 주의하실 점이 있는데 살펴봅시다.


1. window.getWindowCleintWidth()<768

  현재 페이지의 가로폭이 768px 미만이면 코드를 실행시킨다는 의미입니다. 모바일에서만 보여주려면 window.getWindowCleintWidth()<768로 해주시면 되고, 데스크탑에서만 보이게 하고 싶다면 window.getWindowCleintWidth()>=768로 해주시면 됩니다. 물론 원하시는 특정 창크기가 있다면 그것으로 지정하시면 됩니다.



2. document.write() 사이에 들어가는 코드

  구글 애드센스 코드를 넣으시면 되는데, 주의하실 점이 있습니다. 새로 광고단위를 만드실 필요 없고, 현재 사용중이신 것을 그냥 넣으셔도 됩니다. 일단 아래처럼 생겼죠 광고 삽입코드가..


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- XXX --> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="" data-ad-slot=""></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>



  여기서 <script async 부터 </ins> 까지를 document.write('')의 '와 ' 사이에 넣으시면 되는데, </ins>까지라고 했으므로 <script>를 포함한 사이에 있는 (adsbygoogle = window.adsbygoogle || []).push({}); 는 넣으시면 안됩니다. 


i) 엔터키를 제거해서 한줄로 만드세요.

ii) 애드센스 광고코드에 있는 </script>를 그대로 넣으시면 안됩니다. <\/script>로 수정해서 넣어주세요.


  아무튼 위에 제가 첨부한 코드 참고하셔서 형태 맞추시면 됩니다. 여기서 실수하시면 광고가 제대로 삽입 안되니 주의깊게 읽고 적용하세요. 그러면 이제 기본적인 세팅은 완료입니다.




세부설정



광고를 중앙배치하기

  <ins>태그의 style부분에 margin:auto; 를 넣으시면 됩니다. (이러고도 안되면 애드센스 전체를 감싸는 <div>를 만드신 후 style에 text-align:center;를 추가해주세요)



우측정렬하기

  마찬가지로 <ins>태그에 float:right; 를 넣으시면 됩니다.



문제점



  코드를 보시면 알겠지만 처음 페이지를 로딩할 때 적용이 되는 코드입니다. 따라서 페이지 로딩후에 창크기를 바꿨다고 해서 애드센스 위치가 변화하지는 않습니다. 하지만 이것은 반응형 애드센스도 마찬가지이더군요.. 한번 로딩된 광고는 바뀌지 않습니다. 만약 페이지 크기가 바뀌었을 때도 대응시키고 싶으시다면 아래 강좌를 참고하시기 바랍니다. 다만 이 방법은 좀 더 복잡합니다.



이 댓글을 비밀 댓글로
  1. 규정에 애드센스 코드는 어떠한 경우에도 수정하면 안되는 걸로 아는데 아닌가요?
    그리고 궁금한 것이 사이드바도 반응형 애드센스인가요?
    • 어디서 보셨는지는 모르겠지만.. ㅎㅎ 애드센스 관련해서는 워낙 괴소문이 많아서 믿으시기보다는 구글 공식 입장을 참고하시는게 좋습니다.
      https://support.google.com/adsense/answer/1354736?hl=ko
      공식 페이지의 내용 발췌합니다.
      "
      애드센스 프로그램 정책에서는 인위적으로 광고 실적을 부풀리거나 광고주의 전환수에 악영향을 주는 방식으로 애드센스 코드를 변경하는 것을 허용하지 않습니다. 광고 코드를 생성할 때 게시자 계정에 많은 옵션이 제공됩니다. 이러한 옵션을 통해 사이트에 맞는 광고 레이아웃을 만들어 보시기 바랍니다. 일반적으로 광고 코드는 복사하여 붙여넣는 것이 좋습니다. 하지만 상황에 따라 사용자의 만족도를 높이기 위해 수정이 불가피한 경우도 있습니다.
      "
      마지막 문장이 핵심이구요.. 아무튼 이 수정은 악이용을 위한 수정이 아니므로 해당되지 않습니다.
      사이드바도 반응형 단위로 구현한 것이 아닙니다.
    • 그래도 겁이 나는게 사실입니다.
      얼마 전에 제 애드센스가 죽었다가 살아나서...^^

      얼마전까지만 해도 애드센스에 대하여 쿨했었는데
      지금은 새가슴입니다.ㅜㅜ
    • 블로그 방문해보니 최근에 겪으신 일도 명백한 규정에 있는 것이네요.. 3개까지 허용..;
      애드센스 팀이 규정대로 처리하기 때문에 규정만 잘 지키신다면 앞으로도 문제 없으실 겁니다. 저도 마찬가지로 규정대로 광고를 삽입하고 있구요. ^^
  2. 좋은 정보 잘 보고 갑니다.
  3. 잘봣어요
    요즘에 은근히 구현방법이 많은듯해요
  4. 그 유명한 반반응형이군요.
    (반은 반 반자)
    저번에 시도하다가 흰색 화면만 나오기에 포기했었는데.. 이렇게도 되네요.
    • 反반응형이라.. ㅋㅋㅋ
      좋은 표현이네요.
  5. 반할 반자가 아니라 절반 할때 반자입니다. 아이패드라 한자임력이 안되네요.
    • 왜 저렇게 입력이 되어있을까요.. 半 말씀하시는 건 알았는데.. ㅎㅎㅎ
      숫자를 잘못 눌렀나봅니다.
  6. 리디즈님 글을 보면서 궁금한게 생겼는데 저 상단의 광고는 글에 직접 하나씩 넣어주시고 계신건가요?
    그렇지 않을 경우 글과 구분하여 자동으로 들어가게 하는 방법은 없겠죠?

    광고라인
    -------------
    포스트라인

    이렇게 하는게 아니라

    포스트 글 일부분 || 광고
    포스트 글 나머지~~부분

    이런식으로 자동 삽입도 가능한가요?
    • 자동으로 들어가는 것이고 본문 상단 광고에 float: right속성을 주어 넣은 것입니다. 이 블로그가 수익형도 아니고 귀찮아서 다 수정 못해요... ㅋㅋ
    • 혹시 그것에 대한 가이드 글좀 써주실 수 있을까요?ㅎㅎ
      제가 알기로는 대부분 사람들이 일일이 넣고 있는 것으로 아는데
      이게 아시다시피 문제가 발생할 경우에 대량수정을 요구하는 것이기
      때문에 고민을 좀하다가 현재상태를 계속 유지하고 있네요.

      우측 정렬과 글과 섞이도록 하는 방법을 쓰면 되는 것 같은데 일반인인 저로써는 컴퓨터와 대화가 아직 안되서 -_-; 엄청 헤매는중입니다...
    • 네 알겠습니다. ㅋㅋ
    • 안녕하세요. 저역시 이분과 같은 고민인데요 바쁘시겠지만, 이것과 관련된 글을 한번 부탁드립니다.
      그리고 Readiz 님 홈피 보면 사이드바 가장 오른쪽에 애드센스 세로형 광고가 밖에 나와있는데 저건 어떻게 하는건가요?
  7. 음...하고싶은데 어떻게 하는지 모르겟네요;;;
    • 우선 기본적인 애드센스 삽입방법부터 시도해보시고, 차차 방법을 확장시켜보세요.
      이해가 어려우시면 구글에서 기본적으로 제공하는 반응형 광고단위도 괜찮습니다.
  8. 사이드바는 어떤식으로 설정을 하신건가요??

    예전 사이드바에 애드 넣는방식을썼더니 전혀 적용이 안돼네요..

    반응형이라그런가 코드를 어떤식으로 수정해야할지 감이 안잡혀요.

    본문에 있는 소스대로 코딩을해봤는데 아직 초짜라잘모르곘에요.

    사이드에 꼮 애드넣고 싶은데 방법좀 알려주세요.ㅜㅜ
    • 사이드바에 넣는 것은 반응형이라고 해서 다를 것 없습니다. 본 블로그에는 없지만 사이드바에 애드센스 넣기 등의 키워드로 검색하시면 쉽게 넣으실 수 있을 겁니다.
  9. 스킨 감사히 잘 쓰고 있습니다^^
    질문이 있어서 왔습니다.
    아래에... 제가 넣고 싶은 문구(애드센스 아님)를 넣고 싶어서 넣어보았더니... 본문 글 끝나자 마자 나오는 것이 아니라
    본문 -> 플러그인 -> 제가 넣고 싶은 문구 이런 순서대로 나오게 되네요....
    혹시 본문 -> 제가 넣고 싶은 문구 -> 플러그인 요런 순서대로 나오게 할 수 있을까요?
    제 블로그는 하단 링크입니다...
    http://jaeyori.tistory.com/entry/%EC%97%AC%EC%9C%A0%EB%A7%8C%EB%A7%8C-%EB%B6%80%EC%9E%90%EB%90%98%EB%8A%94%EB%B2%95-3%EA%B0%80%EC%A7%80
    • 티스토리가 '본문'의 영역을 본문에 추가하는 플러그인까지 포함한 것으로 인식을 합니다. 그래서 순서를 바꾸기 위해서는 자바스크립트를 사용하셔야 합니다.. 이 구조가 개선이 됐으면 좋겠는데 그러질 않고 있네요.
  10. 페이지가 로딩 되고 난 후에 페이지 가로 폭이 바뀌어도 애드센스에서 인식하고 광고 크기를 바꿀 수 있는 방법은 없을까요??
    그 기능을 구현하고 싶습니다.
    • 전에 구현했던 방식이긴 한데, 위험한 것이 자바스크립트로 동적으로 구현하게 되는 광고단위라는 것입니다.
      구글 반응형 광고단위도 로딩 이후에는 크기가 변경되지 않고 있구요.
    • 위험하다면 구글 정책 때문인가요??
  11. 감사히 잘 봤습니다.

    질문이 하나 있는데요
    티스토리 웹화면에선 안보이게 하고, 모바일화면에서만 "덧글감사 "같은 문장이 마지막에 보이게 하려면
    어떻게 해야 할까요?

    조언 부탁드립니다.

  12. document.write('요기') 넣으라는거시잖아요?
    근데 티스토리 skin.html 에서 콘트롤 에프해서 document.write 찾으니 6개가 나오는데
    어디다가 넣으면돼는건가요?
    • 티스토리 skin.html 보면
      리드이지 님이 주석으로 추천광고 위치 1부터3까지 있던데요
      원하는위치에 넣으라는 것이 이곳중에 말하는거신지요? ^^
  13. 왜 안될까요..힝...본문에 광고가 안나오네요
    • 2015.03.03 18:23
    비밀댓글입니다
  14. 좋은글 잘보았습니다 !! 질문이 있어서 글남기게되었습니다. 중앙으로 정렬을 하려고하는데 style 을 어디에 삽입하면 중앙에 정렬이 될까요?

티스토리 툴바