반응형 스킨 본문 우측 상단(PC) / 본문 상단(모바일) 애드센스 넣는 법

Posted by Readiz
2014.04.21 21:10 반응형 티스토리/Tistory

반응형 애드센스 안쓰고 애드센스 넣어보자! - 2


  사실 애드센스 관련 강좌는 다른 블로그에서도 많이 다뤄지고 있는 것이라서 피하려고 했지만, 여쭤보시는 분들이 많아서 한 2~3편 정도로 계속 쓰게 될 것 같습니다. 우선 오늘은 제 블로그에서 사용중인 본문 상단 우측 광고의 삽입에 대해 알아보도록 합시다. 물론 반응형이라는 전제 하에서 쓰는 것이고, 구글에서는 모바일 상단에 큰 직사각형의 광고를 허용하지 않고 있으므로 반응형 디자인에서 모바일의 경우 이 큰 광고를 배제시킬 방법도 강구해야 합니다. 아래 스크린샷을 보고 시작합시다.



PC(336 * 280px)



Mobile(200 * 200px)



  시작하기 전에 저번 강좌를 한번 보고 오시는 것도 도움이 될 것입니다. 저번 강좌에서 추가적인 내용만을 다룰 것이기 때문입니다..



PC용 광고 출력시키기


  PC용 출력은 768px부터 출력되게 하면 됩니다. Bootstrap에서의 모바일 pixel이 기점이 768px이기 때문이고, 사실 아이패드를 Portrait모드로 들었을 때가 가로가 768px이므로 이렇게 된 것으로 보입니다. 아무튼 이 경우에는 큰 직사각형(336px * 280px)이 출력되게 할 것입니다.


<div style="float:right; margin:10px;"> <!-- 데탑용 --> <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:336px;height:280px" data-ad-client="" data-ad-slot=""></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script> </div>



  저번 시간에 본 것과 비슷하죠? 768px이상에서 실행되게 하였고, 상위 태그로 float:right 속성을 주어서 우측으로 붙도록 하였습니다. 저기에 보시면 margin:10px;라고 조절한 부분이 있는데, 이것은 애드센스 정책에서 다른 링크와 광고가 붙으면 정책 위반이기 때문에 보험을 위해 떨어뜨려놓은 것입니다. 만약 붙어도 되는 부분이 있다면 margin-left:0px 등으로 조절하시면 붙일 수 있습니다. (margin-top, margin-left, margin-bottom, margin-right)



모바일용 광고 출력시키기


  비슷한 방법입니다. 모바일용 광고는 768px미만부터 나오도록 하면 됩니다. 앞서 말씀 드렸지만 300px*250px부터도 모바일 상단에 나오게 되면 정책 위반으로 요즘은 구글이 태클을 거는 듯 합니다. 저는 그래서 200px*200px의 광고를 상단 중앙에 배치시키고 있습니다. 이 경우 코드는 아래와 같이 될 것입니다.



	
<div style="text-align:center;width:100%;">
	<!-- 모바일 상단 -->
	<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;margin:auto;margin-bottom:10px;" data-ad-client="" data-ad-slot=""></ins>');
		(adsbygoogle = window.adsbygoogle || []).push({});
	}
	</script>
</div> 
	


  여기서 주의깊게 보셔야 할 것은 바로 상위 div태그의 text-align:center; 속성과 script안쪽에 들어가있는 ins태그의 margin:auto; margin-bottom:10px; 부분입니다. text-align:center와 margin:auto는 쌍으로 붙어다닙니다. 이 둘은 광고를 중앙 배치할 수 있도록 해 주는 코드이죠. margin-bottom:10px는 마찬가지로 정책위반 방지용입니다. 광고 하단을 10px 띄워서 본문에 링크가 있는 경우 붙지 않도록 하는 역할을 합니다. 모바일에서는 아무래도 PC버전처럼 float:right가 불가능하기 때문에 해당 코드처럼 center로 상단에 아예 출력되게 하였습니다.



그래서 이 코드를 어디에 넣어야 하나?


  [$$_article_rep_desc_$$] 바로 위쪽에다가 넣으시면 됩니다. $$는 ##로 바꿔서 검색하시구요. 본문 상단이니까 당연한 것이기는 하지만 혹시나 여쭤보는 분들이 계실까봐 첨언해둡니다.

  그리고 위의 두 코드는 함께 병렬적으로 들어가 있으면 되고, 순서는 관계 없습니다. 어차피 if문에서 화면크기 판별해서 넣는 것이니까요. 최종모습은 아래처럼 되겠죠.


<div style="float:right; margin:10px;"> <!-- 데탑용 --> <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:336px;height:280px" data-ad-client="" data-ad-slot=""></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script> </div> <div style="text-align:center;width:100%;"> <!-- 모바일 상단 --> <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;margin:auto;margin-bottom:10px;" data-ad-client="" data-ad-slot=""></ins>'); (adsbygoogle = window.adsbygoogle || []).push({}); } </script> </div> [$$_article_rep_desc_$$]



  누에고치님은 이 방법을 半반응형이라고 부르시더라구요. 페이지 로딩시의 창 크기로 광고를 넣는 것을 판단하기 때문이죠. 진정한 반응형이라면 페이지 로딩이 끝난 후에도 화면 사이즈를 바꾸면 광고 사이즈도 변해야 합니다만, 구글 애드센스는 반응형 광고단위라도 그것을 지원하지 않고 있죠. 그래서 저도 마음 편하게 페이지 로딩 시의 창 크기로 판단하여 광고를 넣는 코드를 요즘 연재하고 있는 것입니다.


  다음 시간에는 많은 분들이 궁금해하시는 다른 글 보기 좌측에 애드센스 넣는 법에 대해 알아보도록 하겠습니다. ^^

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 감사합니다 ㅎㅎ
    • 저는 안져서 구경합니다 ㅎㅎ
      리드이지님 여러가지 방법 가르져주시네요 ㅎㅎ
    • ^^;
    • resp
    • 2014.04.21 22:45 신고
    앗~ 죄송합니다. PC가 어수선해 누워서 아이패드로 꼼지락거리다가 살짝 화면에 닿았는지 글이 저장되었네요. 종종 겪는 일이긴 한데 실수로 글이 저장되기는 처음입니다.

    급하게 편집 버튼을 찾았으나 안 보여 나갔다 다시 들어와도 마찬가지라 상태가 안 좋은 PC로 어찌어찌 겨우 접속했습니다.

    아이패드에서는 댓글 아래의 버튼이 보이지 않는 것 같습니다.
    그리고 대댓글 기능은 지원되지 않는 것 같아 원래의 글을 수정합니다.

    본래 달려던 댓글은 별 내용없는 감사 비슷한 내용이었습니다. 아직 티스토리 계정이 없어서요.

    피곤해 누웠다가 급하게 PC 손보느라 저도 좀 황망스럽습니다만, 곧바로 달린 답글을 보고 제 댓글이 소중한 시간을 방해했다는 생각에 뒤늦게 해명글 올립니다. 세심하지 못한 언행으로 타인의 소중한 시간을 축내는 것을 몹시 꺼려합니다.

    주위에 PC가 없는 외부, 외국 등에서 아이패드로 글을 작성하다가 수정 등을 하려면 곤란한 상황이 연출될 수도 있겠다는 생각도 듭니다.

    이 글은 포스팅 주제와 관련없는 뻘글이니 보시고 삭제 무방합니다.
    한 줄 간단한 댓글을 달려다 살갖이 패드 화면에 접촉하는 바람에 댓글치고는 긴 글을 달게 되었네요. 교훈으로 삼아야지요. 팜리젝션 브라우져에서는 안되므로 주의!!

    방해드린 것 사과드리며, 피곤해 다시 누으려 갑니다.
    • ㅋㅋ 이렇게 안써주셔도 되는데..
      저도 누워서 답변남깁니다. ㅎㅎ
    • 아 그리고 메일주소 남겨주시면 특별히(?) 초대장 보내드리도록 하겠습니다.
      필요하시면 코멘트 달아주세요.. 비로그인이시라서 동일인체크를 아이피로 체크해야하니 아까 남겨주신 컴퓨터에서 남겨주시면 감사하겠습니다.
  2. 저한테는 관계 없는 내용이지만, 많은 분들에게 도움이 되는 팁이 될 것 같아요 ^^; 정말이지... 수익이 안생겨도 좋으니 애드센스좀 다시 이용할 수 있었으면 좋겠네요 ㅜㅜ;; 계정 정지 이유가 부정클릭이라는데,,,, 부정클릭땜에 그런건 아닌거 같고,,, 유튜브에 음원 저작권있는 영상 올린거랑, 애드센스의 광고주인 AutoDesk 오토캐드 크랙 설치 관련 포스트 때문에 정지 된거 같은데....구글에서는 걍 단순 부정클릭으로 정지라고 해서 ㅋㅋ 그리고 그때는 방문자수가 적었는데 지금처럼 1000명 이상대의 방문자 보유한 상태에서 정책과 어긋나는 컨텐츠가 있으면 경고 메세지 주는데.... 그때는 허접블로그라고 생각해서인지 그런거 메세지 없이 바로 영구정지 당했던거 같네요 ㅜㅜ 애드센스 이용하시는 분들도 정책 잘 지켜서 저와같은 일 당하는 분 없기를 바래 봅니다 .
    • 애드센스 한번 짤리면 힘들겠더라구요 정말..
      혹시 세컨드 도메인 연결하신다음에 애드센스 신청하면 안되는걸까요? 다른 사이트로 인식할텐데..
    • 한번 정지 당하면, 구글 아이디, 자주 접속하는 IP주소(공유기변경), 블로그 url 도메인 주소,,, 등 많은 요소가 변경이 되야해서... 서브 블로그를 새로 운영하는거 외에는 방법이 없어 보여요 ㅜㅜ;
    • 애드센스..를 대체할 국내 광고가 있었으면 좋겠는데 솔직히 수익면에서 많이 차이가 난다고 들어서.. =_= Onasaju님의 문제는 해결할 방법이 없으려나요..
    • 수익형 블로그(광고주와 관련된 포스팅을 하는...)가 아닌 이상은,,, 애드센스는 그 어떤 광고업체들도 넘볼 수 없는 넘사벽이네요....

      제 문제는 블로그를 새로 하나 더 운영하는 수박에는 별다른 방법은 없어 보입니다. ㅎㅎ

  3. 이런것이 바로 꿀팁!!! ^^
  4. 흠.. 그런데 동기식은 어떻게 하죠?
    • 동기식은 글쎄요~
      동기식 쓰면 페이지 로딩이 길어져서 제가 안써가지구요. ^^
  5. 항상 질문만 드리고 가네요. 데스크탑에서는 오른쪽 상단에 구글 광고가 나오고
    모바일에서는 중앙에 광고가 나오는데 제공 해주신 소스가 본래 구글 광고소스와는 달리 많이 수정 된 걸로 나오는데
    이럴 경우 정책위반이 되지 않나요? 그리고 모바일 상단에 컨텐츠 보다 구글광고가 먼저 나와도 괜찮은지
    알고 싶습니다. 현재 반응형웹 적용 때문에 고민중이라서요 ㅠㅠ
    • 애드센스 많은 분들이 정책을 잘 보지 않고 떠도는 소문을 재생산하고 있어서, 수정하면 안되지 않느냐고 생각하시더군요.
      애드센스 관련해서는 워낙 괴소문이 많아서 믿으시기보다는 구글 공식 입장을 참고하시는게 좋습니다.
      https://support.google.com/adsense/answer/1354736?hl=ko
      공식 페이지의 내용 발췌합니다.
      "
      애드센스 프로그램 정책에서는 인위적으로 광고 실적을 부풀리거나 광고주의 전환수에 악영향을 주는 방식으로 애드센스 코드를 변경하는 것을 허용하지 않습니다. 광고 코드를 생성할 때 게시자 계정에 많은 옵션이 제공됩니다. 이러한 옵션을 통해 사이트에 맞는 광고 레이아웃을 만들어 보시기 바랍니다. 일반적으로 광고 코드는 복사하여 붙여넣는 것이 좋습니다. 하지만 상황에 따라 사용자의 만족도를 높이기 위해 수정이 불가피한 경우도 있습니다.
      "
      마지막 문장이 핵심이구요.. 아무튼 이 수정은 악이용을 위한 수정이 아니므로 해당되지 않습니다. 저도 이 코드로 잘 사용하고 있구요.. 정책위반 통지를 아직까지 받은적이 없습니다.
      또한 컨텐츠보다 광고가 먼저 나오는 것도 컨텐츠가 첫화면에 나오지 않으면 문제가 되는 것입니다.

      물론 이는 제가 구글 애드센스 FAQ에서 확인한 사항이며 저는 이에 관해서 직접적인 책임을 져드릴수는 없습니다. 스스로 공식홈의 정책을 확인하셔서 판단하실 사항입니다.
  6. 좋은 팁 감사합니다 ^^,
    전에 광고를 어떻게달아야하나.. 무작구식으로 달았었는대,
    덕분에 쉽게쉽게 정리할 수 있게 되었습니다 ㅎㅎ.
  7. 음따라서 해봤는데 적용이 안되네요;

    데스크탑용 하나는 일단 적용이 되는데요. 두개다 넣어버리니까.. 그냥 광고 없이 표출이 되네요 . 제가 두번째 소스 잘못 넣은건가요?..
    • 가보니까 되는걸로 보이는데.. 어디가 안된다고 하시는건지 모르겠네요 ㅎㅎ
    • 오시기전에 수정했어요 ㅠ ㅋ;;

      그 애드센스 코드에 따옴표안에 그게 제 고유 번호인가봐요..

      <VSCRIPT 이부분에서.. 틀렸었어요;;
  8. 안녕하세요! 스킨도 잘쓰고 좋은것도 배워갑니다^^

    궁금점이 있었는데
    이것저것 만지다보니 해결됬네요

    감사합니다^^
    • ㅎㅎㅎ 스스로 해결하시게 해드려버렸네요 ㅠㅠ
      아무튼 방문 감사합니다.
  9. 안녕하세요^^
    반응형스킨 중 최고라는 분들이 많으셔서 저도 오늘부로 적용을 해 보았습니다.
    그런데 광고에서 몇가지 궁금한 점이 있습니다.

    일단 저는 광고가 나오지 않는 흰색화면 상태입니다^^
    1.제 광고코드와 data-ad-client="" data-ad-slot=""></ins> 이 부분이 다르네요 저는 막 숫자가 적혀있는
    data-ad-slot="숫자" 이런식인데 말이죠.. 이것 때문일까요?

    2.카테고리 다른글 좌측에 광고역시 나오지 않고 있습니다만 만약 나오게 된다면 이 광고는 pc와 모바일 둘다 표시 되는 건가요? Readiz 블로그를 모바일로 보니 제가 딱 원하는 위치에 하단광고가 나오더라구요^^ 저도 이렇게 나오는가 싶어서 여쭤봅니다.

    3.반응형 스킨 쓰시는 분들 중에서는 pc버전 우측상단에 광고가 들어가고 글자가 왼쪽에 있는 것 처럼 모바일 또한 그런식으로 쓰는 분들이 계시더라구요. 물론 광고크기는 상대적으로 작습니다만.. 그러면 센터정렬 말고도 우측이 되는거 아닐까요?
    • 1. 숫자야 본인 블로그에 맞는 것으로 넣으시라고 비워둔 것입니다.
      2. 본문에서 설명하는 방법은 특정 화면 크기에서만 나오도록 하는 것입니다. 위에 설명한 것은 PC에서만 나오도록 설정되어 있는 것이고 모바일용으로 따로 하나 더 만드셔서 삽입하시면 됩니다.
      3. 됩니다만 저는 AddThis를 우측에 또 쓰고 있어서 그렇게는 하고 있지 않습니다. 또한 갤3같이 좌우폭이 360px면 200px광고를 우측상단에 배치해도 그럭저럭 읽힙니다만, 보급형같이 320px면 읽기가 굉장히 힘들어지는 점 또한 고려한 것입니다.
    • 감사합니다^^ 광고는 좀 더 자세히 읽어보고 해결을 했습니다.

      이번에는 궁금증 3가지와 건의사항 2가지가 있는데

      1.모바일 하단 넣는것은 어떻게 만드는지 궁금합니다..^^
      2.유투브 동영상을 모바일로 보면 화면이 짤려서 나오던데 반응형 스킨만의 특징인가요?
      3.혹시 사이드바 사이즈라던가 제가 수정하는 방법을 알게되면 조금씩 수정을 해서 사용해도 되는건가요?

      몇가지 건의사항이 있다면..
      3.좌측상단 블로그 이름 클릭시 홈 화면 이동
      4.홈화면 본문내용 글자크기 상향 및 클릭시 본문이동
      (사진과 제목만 이동하더라구요..^^)

      스킨 잘 쓰겠습니다!!
    • 1. 같은 코드로 가능해서 따로 설명을 넣지는 않았습니다. 모바일 사이즈에 맞는 것 넣으시면 됩니다. 글 중에 애드센스 삽입하는 것 모바일으로도 똑같이 적용하시면 됩니다.
      2. 안짤리게 설정해두었습니다만 embed태그로 넣으셨을 경우 그럴 수도 있습니다. iframe이면 안짤려야 합니다. 문제가 생긴 페이지 링크해주시면 알아보기가 더 쉽겠습니다.
      3. 당연히 수정하셔도 상관없습니다. 모든 커스터마이즈는 자유입니다. (밑에 스킨 저작 관련 부분만 - 이 마저도 수정하셔도 되긴 합니다만 - 어쨌든 스킨 제작자 표현만 해주시면 어떤 수정을 하셔도 상관없습니다.)

      건의사항 관련
      1. 홈 이름은 <h3>태그로 분리되어 있습니다. 이 부분을 <a href="~"></a> 태그로 감싸주시면 됩니다. 차후버전에 한번 링크 고려해보겠습니다.
      2. 홈화면 의견 감사합니다. ^^ 역시 고려해보겠습니다. 감사합니다.
    • 감사합니다^^

      모바일상단 코드를 그대로 하단에 넣었더니 모바일화면에서 카테고리 다른글 밑에 광고가 들어가 버리네요.. 저는 위에다가 넣고 싶었는데..

      youtube영상이 잘리는 링크는 http://dianote.tistory.com/70 여기입니다. 유튜브 동영상 버전을 2로 해서 그럴지도 모르겠네요..
    • 아.. 유투브랑은 상관이 없는 문제구요,
      아직 다른글 더보기 위쪽에 나오게 하는 강좌는 안쓰긴 했네요.
      애드센스 관련해서 추가 글을 조만간 쓰도록 하겠습니다..
  10. 으....
    왜이렇게 헷갈리는지...
    제가 찾는 그림은 데탑에 상단광고 2개(336*280), 모바일에 Readiz님처럼 200*200 중앙에 나오게 하려는데.
    이번 포스팅 한것을 보고 참고하려고 해도 넘 어렵네요. ㅠ.ㅠ
    ㅎㅎ 저같이 모르는 사람들을 위해 상단에 2개, 모바일에 200짜리 가운데 나오게끔 포스팅 할 생각은 없으신가요? ㅠ.ㅠ
    • 애드센스 관련해서 추가포스팅 해보겠습니다~
  11. 감사해요ㅠ 블로그 이제 시작하는데 스킨이 참 이뻐요ㅠ

    상단광고 옆에 addthis 놓는거 어떻게하는지 가르쳐주실수 있나요ㅠ?
  12. 저는 왜 안되는걸까요 ㅠㅠ
  13. 리디즈님 블로그 항상 잘 참고하고 있습니다. 한가지 건의가 있습니다.

    우측상단 광고를 넣으면, 광고의 왼쪽에 텍스트가 들어가게 되잖아요?
    그런데 그 텍스트의 끝이 들쭉날쭉해서 보기에 않좋습니다..제 블로그가 가독성이 너무 않좋아서 개선중인데..
    우측상단광고의 왼쪽에 들어가는 텍스트의 들쭉날쭉을 나란하게 하는 방법이 없을까요?
    ex)
    동해물과 백두산이 마르고 닳도'록'
    하느님이 부아사우리나라만세 '무'
    궁화삼천리 화려강산 대한사람 '대'
    한으로길이 보전하세 남산위에'저'
    소나무 철갑을 두른듯 바람서리 '불'
    변함은...(생략)

    여기서 각 줄끝에 록무대저불에 해당하는 부분이 삐둘빼뚤한데 반든하게 하는 방법없을까요..?

    티스토리에서 기본툴로 제공하는 표를 삽입해봤는데 반응형스킨은 화면크기별로 변하는데 표는 프레임이 고정되서 휴대폰으로 보면 표만짤립니다. 아무튼 표 넣는 것은 실패 했는데...혹시나 다른 방법이 있을까하고 웹개발자인 리디즈님의 조언을 구해봅니다.
  14. 감사합니다. 프로그래밍 기초 수준도 못되는 사람들에게 꿀과 희망을 주셔서요.ㅎㅎ
    정말 신기방기 하네요.
    • 2017.03.08 17:21
    비밀댓글입니다
  15. 감사합니다~ 고유번호만 변경하면 적용이 쉽게 되네요. 잘쓰겠습니다.

티스토리 툴바