본문 바로가기
블로그.스마트 정보

미디어와 자바로 실험한 상단과 본문 광고의 허와 실

안녕하세요:) 뚱이 블로그에서 알려드리는 미디어(media)로 광고와 자바 스크립트로 숏코드를 만드는 방법과 함께 상단 우측광고 허와 실 그리고 본문 왼쪽,오른쪽 광고를 넣는 방법에 대해서 알려드리고자 합니다.

블로그로 돈벌기 위해서는 인터넷이 되는 컴퓨터만 있다면 충분히 가능합니다.

저는 티스토리로 돈벌기 위해서 즉 애드센스로 수익을 내기 위해서 지난 3년 넘게 제가 터득한 노하우들을 공개하려고 합니다.

하지만 애드센스 승인을 받았다고해서 당장에 수익이 발생하는 구조는 아니라는 것입니다.

매일 꾸준하게 1포씩 해나가다 보면 시간이 지나게 되면 유입=광고클릭=수익으로 이어지는 구조가 발생하게 되는 것입니다.

제가 포스팅한 글들을 제대로 읽으신다면 월 300만원의 수익은 아니더라도 꾸준하게 부업으로 수익이 발생하게 될 것입니다.

미디어(media)로 광고와 자바 스크립트로 숏코드를 만드는 방법


<style>
.AAA { width:100%; height: 200px; }
@media(min-width: 718px) { .AAA { width: 100%; height:200px; } 
</style>
<script async src="//pagead2.googlesyndication.com
/pagead/js/adsbygoogle.js"></script>
 <ins class="adsbygoogle AAA"
 data-language="ko"
 style="display:inline-block;margin:10px auto"
 data-ad-client="ca-pub-숫자"
 data-ad-slot="숫자 xxxxx"
 data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

여기까지가 하단 광고를 설정하는 부분입니다. 반응형 광고의 좋은점은 자신이 원하는 크기로 광고를 설정할 수 있다는 것입니다. 고정형 광고는 크기가 정해져 있어서 크기를 수정한다면 정책위반이 될 것이지만, 반응형 광고의 크기를 조정하는것은 정책위반이 되지를 않으니 좋은 장점중 하나라고 할 수 있습니다. 위에서 width=이부분을 px로 크기로 지정을해도 되고, % 퍼센트로 크기 지정을 해도 됩니다. 물론 height 높이도 마찬가지입니다.

<style>
.gad1{display:block;width:300px;height:250px;
margin:10px auto}
@media(max-width:1024px){
.gad1{width:300px;height:250px}  
}                                최대 화면의 넓기가 1024px일때 광고의 크기를 얼마로 설정을 할것이냐는 부분입니다. 보통은 300x250광고를 많이 사용하고 실적도 좋아서 이렇게 했습니다.
@media(max-width:366px){
.gad1{width:350px;height:250px}
}                                화면이 336px 이하일때는 광고의 크기를 얼마로 설정하겠냐는 것입니다. 여기는 보통 모바일 화면의 크기나 테블릿 화면의 크기를 고려해서 광고 사이즈를 수정하시면 될 듯합니다. 모를때에는 width와 height 수치를 임의로 넣어보고서 넘어간다거나 광고가 잘리게 될 경우는 수치를 줄이시면 되겠습니다. 물론 너무 작을때에는 반응형 광고의 크기를 크게하시면 되겠습니다.
@media(max-width:330px){
.gad1{width:300px;height:250px
}                                간혹 가다가 화면이 작은 모바일 스마트폰에서의 화면 크기를 몇으로 지정을 할 것이냐에 대해서 묻는것이니 크기를 맞춰서 하시면 될 듯 합니다.
</style>

여기서 media 크기를 설정을 통해서 광고의 크기를 다 다르게 하시고 싶은 분이 혹 있으실줄 압니다. 그럴때에는 gad2,gad3 이런식으로 만들어서 <style>미디어</style>로 묶어 주시면 되겠습니다. 이때에 각각을 스타일로 묶어도 되지만 gad1,gad2,gad3을 통으로 스타일로 묵어 주시면 되겠습니다.

여기까지는 본문에 들어가게될 광고를 미디어(media)로 크기를 지정하는 것입니다. 자바 스크립트로 설정을 해도 되지만, 미디어로 설정을하게 되면 훨씬 더 깔끔해지는 느낌을 받으실 수 있습니다.

<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js"></script>
<script>
function 아무 영어로 이름지정(n){return document.getElementById(n)}

if(아무 영어로 이름지정('아무 영어로 이름지정1')!=null){ 아무 영어로 이름지정('아무 영어로 이름지정1').innerHTML='<ins class="adsbygoogle" style="display:block; margin: 10px auto"data-language="ko" data-ad-client="ca-pub-숫자 xxxxx" data-ad-slot="숫자 xxxxx" data-ad-format="link"></ins>'; (adsbygoogle=window.adsbygoogle||[]).push({}); } if(아무 영어로 이름지정('아무 영어로 이름지정2')!=null){ 아무 영어로 이름지정('아무 영어로 이름지정2').innerHTML='<ins class="adsbygoogle" style="display:block; margin: 10px auto"data-language="ko" data-ad-client="ca-pub-숫자 xxxxx" data-ad-slot="숫자 xxxxx" data-ad-format="link"></ins>'; (adsbygoogle=window.adsbygoogle||[]).push({}); } if(아무 영어로 이름지정('아무 영어로 이름지정3')!=null){ 아무 영어로 이름지정('아무 영어로 이름지정3').innerHTML='<ins class="adsbygoogle gad1" data-language="ko" data-ad-client="ca-pub-숫자 xxxxx" data-ad-slot="숫자 xxxxx"></ins>'; (adsbygoogle=window.adsbygoogle||[]).push({}); }> </script>

function으로 1번 코드와 2번 코드는 자체적으로 크기를 지정해도 되게 만들었고, 3번은 위에 미디어에서 설정을한 absbygoogle gad1로 설정을 한 것입니다.  예를 들어서 dis1,dis2 이런식으로 이름을 설정해주시면 될 것이고, 크기는 따로 코드에서 지정을 해도 되겟지만 미디어로 gad1,gad2,gad3이런식으로 만들어서 각각의 광고크기가 피시(PC)에서 다 다르게 설정을하면 되겠습니다. 물론 모바일에서도 설정을 하실수 잇습니다. 가령 만약에 광고를 줄일려면 300px이 꽉찬 화면이라면 광고크기를 200px로 줄이시면 됩니다. 또한 margin:10px를 준것은 상하좌우 모두 10px의 여백을 주겠다는 의미입니다. 여기까지가 하단 광고와 함께 본문에 들어갈 숏코드를 티스토리에 적용시킬때입니다. 

여기에서 응용 스킬이 들어갈 것입니다. 이제부터는... 만약에 본문에 광고가 왼쪽에서, 오른쪽에서 출력되게 하고 싶으실때는 media(미디어)를 여러개 만드셔서, .gad1{display 앞에 float:right;나 float:left;를 넣어주시면 되겟습니다. 

이때 간혹 ;를 빠트리는 경우가 있는데 이렇게 된다면 코드가 작동을하지 않을 수 있습니다. 이대에 만약 본문의 광고를 왼쪽, 오른쪽 배치를 원할때에는 가장 좋은것은 widht:1024의 크기로 가정을 햇을때에 512px정도로 설정을 하시면 됩니다. 반을 광고로 출력하겠다는 것이죠? 여기까지가 미디어와 숏코드 자바 스크립트를 이용해서 본문에 왼쪽 광고,오른쪽 광고를 넣는 방법입니다.

상단광고 오른쪽 배치

<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js"></script>
<style>
   .rightad{float:right;display:block;width:
200px;height:200px;margin:0px 0px 15px 20px}
   @media(min-width:767px){.rightad{width:336px;height:280px}}
</style>
<ins class="adsbygoogle rightad" data-ad-client="ca-pub-숫자 XXXXXXXX" data-ad-slot="숫자 XXXXXXX"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

ctrl+F로 article_rep_desc를 찾으셔서 그 위에는 상단 광고, 아래쪽에는 하단광고와 본문 광고에 들어갈 숏코드를 넣으시면 되겠습니다. 위에 코드는 오른쪽 상단 배치인데, 모바일과 피시에서 모두 오른쪽에 광고를 송출하겠다는 소스입니다. 

자신의 스킨에 맞게 수치를 설정하시면 되겟습니다. 여기서 중요한것이 만약에 자신이 사용중인 스킨의 사이드바가 오른쪽에 있을때인데요. 이럴때는 사이드바를 왼쪽으로 바꾸어야겟죠? 

그럴때는 ctrl+f로 찾기를 "col-sm-8"이나 "col-sm-9"를 검색하셔서 옆에 한칸 띄우시고 col-sm-push-3이나 4로 사이드바를 넣어주시고, 다시 이번에는 col-sm-3이나 4를 검색하셔서 한칸 띄우고 col-sm-pull-8이나 9로 넣으시면 되겠습니다. 여기까지가 Html에서 상단에 우측광고를 설정하는 부분입니다. 이제는 CSS로 넘어가서 

.right_ad {float:right;margin-left:20px;margin-bottom:15px}를 css 맨 아래에 넣어주시면 되겠습니다. 이것은 .rightad라는 이름으로 상단 오른쪽 광고(PC와 모바일 모두)를 넣겠다고 선언하는 선언부입니다.

상단 우측광고와 좌측광고를 넣는것과 본문에 우측광고,좌측광고를 넣는 것에는 장.단점이 존재를 합니다. 제가 3일간 이 것을 적용시켜 본 결과 어떤 블로그에 분이 상단 우측광고로 광고 수익을 2배로 올릴 수 있다는 글을 읽게 되엇습니다.

그러나,기대와는 다르게 평소 페이지 CTR이 4%-5%대이던 것이 상단 우측광고or본문 오른쪽 광고,왼쪽 광고를 번갈아서 3일간 지켜본 결과 페이지 CTR이 1%대로 떨어지는 불상사가 발생을 하였답니다.

이유는 광고 사이즈가 그만큼 작아지게 되고, 상단 우측광고나 좌측광고를 배치하게 된다면, 혹 본문 상단에 광고를 넣으실 경우에 본문 상단광고를 빼야 한다는 거소가 우측광고와 좌측광고들이 크기가 작아서 클릭이 일어나지 않는다는 것이 결론이었습니다.

물론 장점도 있습니다! 깔끔한것을 좋아하시는 분들중에 페이지 ctr은 신경쓰지 않는다는 분들은 이 광고 배치를 추천해 드립니다.

미디어와 자바로 실험한 상단과 본문 광고의 허와 실.txt

대다수의 블로그를 하시는분들이 상단과 하단을 포함한 본문에 우측광고나 좌측광고를 넣지 않는 이유는 간단했습니다. 바로 페이지 CTR이 떨어짐과 동시에 수익 또한 떨어진다는 것이었습니다.

P.S:물론 이것은 제 스킨에서의 실험결과이며, 혹 상단 우측광고나 상단 좌측광고를 통해서, 본문 우측광고나 본문 좌측광고를 통해서 수익이 오르신분들도 분명이 있을 수 있습니다.


Please Enable JavaScript!
Mohon Aktifkan Javascript![ Enable JavaScript ]