본문오른쪽에 애드센스광고 1개 배치하기(데스크탑+모바일)

Posted by 만웅이 만웅이
블로그 노하우/구글애드센스 TIP

애드센스광고배치 어렵지 않아요~


오늘은 본문포스팅에서 상단오른쪽에 애드센스광고 1개를배치하는 방법에 대해서

포스팅해보도록 하겠습니다.


이 방법은 반응형스킨을 사용하는 블로그에만 사용가능한 방법이며,

데스크탑과 모바일에서 동일하게 오른쪽상단에 배치가 되어 보여집니다.


저도 반응형스킨을 사용하고있지만, 구글 애드센스의 반응형광고를 데스크탑상에서

보여질때 오른쪽상단에 위치시키는것은 그리 어렵지 않았으나,


모바일에서도 똑같이 적용시키기가 어려워 상당히 고전했던 적이 있었습니다.


하지만 오늘 제가 알려드릴 이 스크립트를 사용하면 모바일이든 데스크탑이든'

동일하게 적용이되어 보여집니다.


데스크탑상에서 336*280 광고를 보여지게 할건데 모바일에서는 이 크기로 적용되면

모바일화면에서는 본문글이 보이지않게되어, 구글애드센스정책위반사항이 됨으로, 모바일화면에서는 자동으로 광고의크기가 줄어들게 할 것입니다.



블로그 오른쪽광고배치 스크립트태그



아래 스크립트가 오늘 적용할 스크립트입니다.







제 블로그에서 복사가 금지되어있어 복사할 수가 없으니 하단에 해당소스를 파일첨부해놨으니 다운받으시면 됩니다.


<style>

.abc { width: 336px; height: 280px;}

@media(max-width: 499px) { .abc { width: 200px; height: 200px; } }

@media(min-width: 500px) { .abc { width: 250px; height: 250px; } }

@media(min-width: 800px) { .abc { width: 336px; height: 280px; } }

</style>

<div style="float: right; margin: 0px 0px 10px 20px;">

<!-- abc -->

<ins class="adsbygoogle abc"

     style="display:inline-block"

     data-ad-client="본인구글광고 client 코드를 붙여넣으세요"

     data-ad-slot="본인구글광고 slot 코드를 붙여넣으세요"></ins>

</div>



파일첨부-클릭 후 다운.txt



다운받은 소스에서, 본인구글광고 client 코드를 붙여넣고 본인구글광고 slot 코드를 붙여넣으세요. 위 설명이 입력된곳만 본인의 구글광고 코드로

수정해주시면 됩니다.


그리고 .abc로 표시된 부분은 광고의 이름칸이라 임시로 abc로 입력했으니, 본인이 원하시는 이름으로 바꾸셔도 됩니다. 안바꾸셔도 상관없습니다.

수정한 뒤 HTML편집에서 [##_article_rep_desc_##] 바로위에 붙여넣기 하세요.




그리고 이걸로 끝이지만, 한가지 더 하셔야 할 작업이 있습니다. 마찬가지로 HTML편집에서 맨끝에



-본인구글광고스크립트삽입-

</s_t3></body>





에서 </s_t3></body>바로 위에 본인의 애드센스광고스크립트(반응형광고)를 붙여넣으시는데, 위에서 입력한 본인의 구글광고 slot 코드와 동일한

애드센스 광고를 붙여넣으시면 됩니다.




이 작업을 하는 이유는 본인의 애드센스광고스크립트를 아래로 빼놓지않으면, 인터넷익스플로러 8에서 에러가 나기 때문입니다.


자! 이제 확인을 해보도록 할까요?




PC화면으로 봤을때 오른쪽상단에 광고가 배치되었습니다.




모바일화면에서도 오른쪽에 광고가 생성된게 보이시죠? 혹시나 모바일 화면에서의 광고크기를 조절하시려면 아래빨간부분을 변경해주시면 됩니다.



<style>

.abc { width: 336px; height: 280px;}

@media(max-width: 499px) { .abc { width: 200px; height: 200px; } }

@media(min-width: 500px) { .abc { width: 250px; height: 250px; } }

@media(min-width: 800px) { .abc { width: 336px; height: 280px; } }

</style>

<div style="float: right; margin: 0px 0px 10px 20px;">

<!-- abc -->

<ins class="adsbygoogle abc"

     style="display:inline-block"

     data-ad-client="본인구글광고 client 코드를 붙여넣으세요"

     data-ad-slot="본인구글광고 slot 코드를 붙여넣으세요"></ins>

</div>





크기를 200*200 으로 변경했을때의 모바일화면입니다.




크기를 250*250 으로 변경했을때의 모바일화면입니다.




제가 사용하고있는 핸드폰은 갤럭시4 입니다. 수익면으로봤을때는 애드센스정책을 위반하지않고 250*250 으로 변경했을때가 클릭율이 제일 높을것으로

예상이됩니다만, 저는 미관상 200*200이 제일 보기가 좋아 그렇게 설정을 했습니다. 여러분도 200*200 으로 하시는게 좋을겁니다.


왜냐하면, 250*250 으로 변경했을때 화면이 작은 아이폰에서는 본문글이 보이지않고 화면을 다 가릴 수 있기때문에,

애드센스정책위반으로 구글계정이 정지가 될 수 있습니다. 흐아..이렇게 쉽게 공개해도 되나 모르겠네요. ㅎㅎ







이 댓글을 비밀 댓글로
  1. 감사합니다! 덕분에 애드센스 광고 잘 설치했네요 :)
    그런데 이렇게 달아놓으니 애드센스 배너 하나가 첫 화면을 가리네요.. 어떻게 수정할수 있는건가요?
    이걸 중간으로 가리지않게 보내고싶은데..
    • 모바일 말하시는거죠? 광고달려있는 포스팅링크 하나 댓글로 작성해주세요. 정확히 어떤건지 봐야 알듯합니다. 귀찮다면 좀 더 구체적인 설명을...
      만약 모바일에서 첫화면을 가린다면 위 포스팅자세히 보시면 광고크기 줄일 수 있는 방법이 나와있구요, 중간으로 가리지 않게 보내고 싶은데? 음..이게 무슨 말인지 모르겠습니다. 본문중간?
    • http://cluebox.tistory.com/10
      여기 포스팅을 참조해보시면 될것 같습니다.
      상단엔 오른쪽 광고가 잘 나오지만
      바로 그 밑에 가로로 긴 광고가 본문 내용을 가리는것 같아요.
      모바일도 마찬가지구요
    • 이런..댓글 폭탄은 뭐죠 ㅠ... 포스팅 중간에 따로 광고를 넣으신건 아니죠? 당연아니실테고...그럼 저의 포스팅 본문내용중에 익스플로러8 오류를 위해 삽입하라던 광고코드는 삭제해 주세요. 그럼 정상적으로 보이실겁니다.
    • 도배가 되었네요 죄송합니다
      밑의 코드들을 지웠는데도 그대로인거같네요..
      스킨문제일까요?
    • 스킨과는 상관없을 것 같은데...스킨과는 상관없이 무관한 태그라...
      광고가 하나 더 추가된것밖에로는 설명할 길이 없는것 같습니다.

      본인의 애드센스 광고코드를 복사해서 html수정에서 콘트롤+f 로 찾기해서 혹여 중복된 광고가있나 한번 찾아보세요.
    • 아 머리야..
    • 2016.04.24 21:38
    좋은 정보 감사드립니다.
    그런데 문의사항이..ㅠ
    리디즈님의 페스트부트 설치하고 반응형 광고(플러그인)를 하단, 그리고 우측사이드바(사이드바옵션사용)에 먼저 배치했습니다.,
    그리고 위의 방법으로 광고를 글에 적용했더니.. 갑자기 사이드 바와 하단 광고송출이 중지되네요..
    꼭 광고승인 대기중인것처럼 공간은 표기되는데 광고는 백지..
    뭔가 싶어 광고 코드부분을 빼니 다시 사이드바 및 하단광고 송출 재시작..
    혹시 알고계시는 부분 있으실까요?
    이것때문에 오늘 하루종일 모니터에 코밖고 지냈네요.ㅠ
    • 애드센스광고달때 플러그인+본문삽입이면 오류 날 수도 있습니다. 플러그인을 사용하지 마시고 사이드와 본문하단에 직적 HTML수정으로 광고코드넣으셔야되요
    • 아 머리야..
    • 2016.04.24 21:55
    아..빠른답변 감사드려요!!!저녁먹고 와서 새로운 마음으로 다시 수정해봐야곘네요.ㅠ
  2. 와우!! 최상단은 아예 빼셨군요.. 저도 해봐야겠습니다 팁 감사합니다!^^
    • 2017.04.11 02:04
    비밀댓글입니다
    • 위에 있는 광고삽입위치는 블로그내 모든글에 광고가 적용되는 위치입니다.

      저는 저곳에 광고코드를 삽입하지 않고
      포스팅 작성 건 마다 본문내에 광고를 삽입합니다. 귀찮더라도말이죠.

    • 2017.04.11 02:10
    비밀댓글입니다
    • 모든 포스팅에 우측광고가 뜬다는 것은 해당 광고코드가 티스토리플러그인이나 위치고정광고삽입 자리에 삽입되있어서 그런것이니 확인해보시고 삭제해주세요.

      모바일에서 우측광고가 뜨지 않는다는 것은 위 플러그인광고가 삽입되어 있어 오류가 나는 것으로 보입니다.

      저 소스대로 하시면 모바일에서 100% 우측광고가 보여집니다.

      다만, 저처럼 카테고리별로 광고코드를 여러개 생성 후 사용하신다고 하면

      광고코드별로 소스에서 .abc 뒤에 숫자 예)1,2......등등을 삽입하여 구분해주셔야합니다. 허나 광고코드가 한개라면 그냥 사용하셔도 무방합니다.

      글 한개당 반응형광고 갯수제한은 없습니다. 사실상 구글에서 광고갯수 제한을 없앴습니다.


    • 2017.07.24 19:39
    비밀댓글입니다