반응형 스킨 마크쿼리, 애드센스 반응형 광고 크기 설정 방법

반응형 스킨 마크쿼리, 애드센스 반응형 광고 크기 설정 방법

티스토리 스킨 중에 마크쿼리라는 스킨이 있습니다. 이 마크쿼리 스킨에 애드센스 반응형 광고 단위를 적용하였는데, 어떤 방법으로 적용하였는지 알려드리겠습니다. 환경은 마크쿼리 스킨 4.0.0이고요. 결과는 반응형 광고 단위가 4단로 변신하는 마크쿼리 스킨의 본문 영역 및 사이드바 크기에 온전히 모두 대응하게 됩니다.




이 글은 요청에 의해 작성하는 글인데... 요청까진 아니고요. 작업해준 블로그의 주인장이 스킨 하단에 링크를 넣어 주었는데, 그 링크를 타고 왔는지 메일로 요청하는 사람들이 있더군요. 일일이 답장 보내기도 귀찮고 글도 하나 쓰고 할겸 이렇게 겸사 겸사 글로 써봅니다. 솔직히 이걸 '방법'이나 '팁'이라 보기엔 터무니없이 부족합니다. 제가 반응형에 대해 거의 일자무식이라 말이죠. 그러니 이 글은 '적용기' 정도로 생각하시고 참고 정도만 하시면 되겠습니다.


이전에 스킨 수정 작업을 해주었는데, 적용 후 스킨 소스를 직접 수정하였는지 에러가 나더군요. 일이 바쁜 관계로 예전 스킨으로 되돌리고 기다리라 했었는데, 몇 달 지난 후 에러 문제를 해결해 주었습니다. 댓글 에러 수정하다 알게 되었는데, 애드센스 반응형 광고는 소스 그대로 사용하면 반쪽짜리 반응형으로 나오더군요. 두툼한 직사각형 크기가 나와도 될만한 곳에 기다란 막대기 같은 것만 나오고 말이죠. 그래서 댓글 수정하다 덤으로 반응형 스킨에 온전히 대응할 수 있는 형태로 광고단위를 수정하여 넣었습니다.



반응형 광고 코드 수정 방법


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- la_sidebar_top -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


반응형 소스 형태는 이렇습니다. 요걸 아래와 같이 살짝 수정하여 스킨에 넣어주면 됩니다.


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- la_sidebar_top -->
<ins class="adsbygoogle domainsidtop"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


간단히 설명하자면, 3번째줄 <ins class="adsbygoogle 뒤에 한 칸 띄우고 클래스 네임을 붙여줍니다. <ins class="adsbygoogle domainsidtop" 이런식으로 말이죠. 여기서 클래스 네임은 스킨의 다른 클래스 네임들과 중복되지 않게 넣어줘야 합니다. 예시 domainsidtop과 같이 위치 파악 및 특정이 가능하게 만들어 주면 좋겠죠. 4번째줄 display:block은 display:inline-block으로 수정합니다. 7번째줄 부분의 소스는 data-ad-format="auto" 까지 삭제해주고 뒤에 남아 있는 ></ins>는 위의 줄로 붙여 줍니다.


광고단위를 직접 수정하는 것이 두려우신 분들은 애드센스 도움말 '반응형 광고 코드 수정 방법 https://support.google.com/adsense/answer/6307124?hl=ko'를 직접 두 눈으로 확인 하시고 작업을 진행 하시면 되겠습니다. 도움말을 보면 알겠지만 저렇게 고쳐 쓰는 것은 괜찮습니다.



반응형 광고 크기 설정 방법


반응형 광고단위 수정 및 삽입 작업이 마무리 되면, 스킨 편집의 css에 아래의 소스를 추가해 줍니다. css 마지막 부분 아래 소스를 추가해 주면 됩니다. 주의사항, 소스의 클래스명은 위 반응형 광고 코드 수정에서 입력한 '클래스 네임'으로 입력해야 합니다. 아이디명 또한 본인의 스킨 환경에 맞는 아이디명으로 수정해야 합니다.


수정 예시

@media screen and (max-width:768px) {
.domainsidtop {width: 300px; height: 250px;}

.domainsidbot {width: 336px; height: 300px;}

}



css에 추가해야 하는 반응형 광고 크기 설정 소스(클래스명 아이디명 필히 수정 후 추가할 것)는 view-source:http://s1.daumcdn.net/cfs.tistory/custom/blog/11/111453/skin/style.css?_T_=1487745195?ver=4.0.0 이곳 페이지의 하단 부분에 있습니다. 해당 부분 찾아 복사 하시면 되겠습니다. 아마도 저 페이지를 열어 보려면 파이어폭스나 크롬 브라우저를 이용해야 할 겁니다. 익스플로러에서 저 페이지가 열릴 것 같진 않네요.


css 반응형 광고 크기 설정 소스 간단 설명

@media screen and (max-width:768px) : 768 미만의 화면에선 {} 안의 설정 크기로 보여줘라.

@media screen and (min-width:769px) and (max-width: 991px) : 769 이상 991 미만 화면에선

@media screen and (min-width:992px) and (max-width: 1199px) : 992 이상 1199 미만 화면에선

@media screen and (min-width:1200px) : 1200 이상 화면에선

.lalawincontop {width: 640px; height: 200px;} : 글래스 네임이 .lalawincontop인 곳에는 640 x 200 크기 광고를 보여줘라.


width: 640px; height: 200px; 크기로 지정했다 하여도 해당 크기 미만의 광고 단위가 노출 될 수 있습니다. 가로 640 크기의 광고 단위만 보더라도 165, 124 높이가 있습니다. 가로 620x165 크기도 있고 말이죠. 여튼 지정한 크기 안에 들어 갈 수 있는 사이즈의 광고 단위는 모두 노출 될 수 있습니다.




css에 추가해야 하는 소스 중 마지막 4줄은 애드센스 소스를 감싸고 있는 div의 클래스명과 아이디명입니다. 위의 소스 부분도 그렇지만 아래 4줄도 그냥 복사 붙여 넣기 하면 안됩니다. 사용 중인 스킨의 환경에 맞게 수정해야 합니다. 반드시 자신의 블로그 스킨에 맞게 클래스명 혹은 아이디명을 수정해야 합니다. 예를 들어 블로그 스킨에서 반응형 광고 단위가 id="idname"으로 되어 있는 div에 싸여져 있다면 '#idname'로 변경해야 하고, class="classname"으로 되어 있다면 '.classname'으로 변경해야 합니다. 저건 작업해준 블로그 스킨에 사용하는 클래스명, 아이디명으로 도메인과 위치를 특정할 수 있게 도메인 콘텐츠 상,중,하와 도메인 사이드바 상,하로 나눠 놓은 것이네요. 아래 4줄의 div 박스들은 필요하다면 margin이나 padding을 이용하여 세밀하게 위치를 조정해 주면 됩니다.



관리가 편한 애드센스 코드 삽입 방법

이 부분은 몇 분이 문의한 내용인데, 위의 반응형 광고 크기 설정과 다른 내용입니다. 전혀 상관없는 내용은 아니지만 옵션 정도의 내용이라고 해야 할까요. 여튼 위의 내용은 위쪽에서 끝~



애드센스 소스가 노출 위치에 없는데 어떻게 나오는 것이냐 하면, 일단 이 방법을 이용하면 애드센스 소스를 노출 위치에 직접 삽입하지 않아도 되네요. 위의 라라윈님 블로그(http://lalawin.com) 스킨 하단에 있는 부분까지 적용하면 애드센스 소스가 들어가야 할 위치로 쏙 들어가거든요. 일단 해당 작업을 해주면 애드센스 소스 관리가 편해집니다. 위 캡쳐 이미지와 같이 스킨 하단 부분에서 애드센스 코드를 몽창 관리할 수 있거든요. 하지만 저 방법을 이용하지 않더라도 큰 불편은 없습니다. 오히려 잘못 이해하고 실수하면 머리에 쥐만 납니다. 라라윈님 블로그에 저 방법을 쓰게 된 연유가 있습니다. 티스토리 모바일 스킨과 PC 애드센스 그리고 반응형 애드센스들이 얽히고 설켰는데.. 여튼 역사가 길어요~ 그것 땜시 블로그 스킨과 본문에 삽입한 소스들이 얽히고 설키게 되었죠. 꼬인 것을 풀어 낼 방법은 마당치 않고, 본문에 삽입된 div는 많고 하여 위와 같은 방법을 이용하게 되었습니다.


캡쳐 이미지 속의 소스 중 아이디명을 보고 저게 스킨의 어느 자리로 들어갈 것인지 알 수 있으신가요? 만약 모른다면 저 방법을 사용하지 않는 것이 좋을 것 같습니다. 딱 보고 파악하신 분들은 더 이상의 설명은 필요 없겠죠? 혹시 모르니 위와 같은 관리가 편한 애드센스 소스 적용 방법은 해당 내용이 잘 정리된 '광고 구현을 위한 애드센스 코드 삽입 방법 http://nubiz.tistory.com/509' 글을 참고하시고 정리하시면 되겠습니다. 참고로 위의 위에 있는 캡쳐 이미지를 보면, 귀찮아서 그냥 뒀을뿐 일치하는 컨텐츠도 위와 같은 방법으로 관리할 수 있습니다. 천천히 정리해도 되기에 일단 방치하고.. 이건 우리끼리 비밀이니 쉿! 절대 그 블로그 주인장에게 알려주기 음슴!



여담으로 먼 옛날 누군가 물어 보더군요. 티스토리 모바일에 애드센스 구현하는 방법을 말이죠. 그걸 설명한다고 사용 중인 소스를 그대로 복사 붙여 넣기 하여 설명했었는데... 아니 그 소스를 그대로 넣고 사용했지 멉니까. 보고서에 엄한 사이트가 찍혀 알게 되었는데... 이미 2년 정도 시간이 흐른 뒤였다는. 하나의 사이트에서 2개의 애드센스 광고 코드를 달면 정책 위반입니다. 정책 위반하면 비활성 당하죠. 애드센스 계정은 한 번 비활성 당하면 절대 다시 되살릴 수 없습니다. 그러니 애드센스 관련된 것은 조심 조심 또 조심하시기 바랍니다. 이 글 보고 수정 작업하시는 분들 애드센스 광고단위 중 data-ad-client 숫자와 data-ad-slot 숫자 절대 남의 것 사용하면 안됩니다. 절대 절대 주의 하십쇼. 다 같이 비활성 당하니까요. 끝~


신고
공유하기

페이스북

트위터

구글
플러스

카카오
스토리

네이버
밴드

네이버
블로그/카페

카카오톡
메신저