Blog

[HTML&CSS] 모바일웹 하단 광고 고정

July 28, 2015

[HTML&CSS] 모바일웹 하단 광고 고정

앱처럼 모바일웹에도 배너를 하단에 고정시킬 수 있다면 수익이 좀 생길까 싶어서 알아봤는데, 일단 구글 애드센스는 불가능했다. 그런 사례가 걸린다면 계정을 없애버린다고. 잠깐 다른 이야기지만, 예전에 사이트 운영할 때 3~4년 걸려서 $100이 모였는데 불법 클릭을 유도했다며 어느 날 갑자기 계정을 없애버렸던 것을 생각하면 지금도 열받는다. 아무 것도 한 것이 없읐는데. 여하튼, 구글은 그 쪽에서 결정한 것이 곧 법이기 때문에 거슬리는 일을 해서는 안 된다. 그래서 다른 곳을 알아봤다.

다음의 애드핏(구 아담)과 카울리는 앱이 아닌 모바일웹에도 광고를 게재할 수 있도록 해주며, 둘 다 하단 광고 고정에 대해서는 별다른 규제가 없다. 아래 샘플은 카울리 광고다.

<head>에 css와 js 정의하고,

@media only screen and (min-width: 310px) and (max-width:500px) {
   #adBottom {
      left:0;
      position: fixed;
      text-align:center;
      bottom: 0px;
      width:100%;
      z-index:999;
   }
}

<script src='http://image.cauly.co.kr:15151/websdk/caulyad.min.js?2013062016' type='text/javascript'></script>

var caulyad = {
   /*발급 ID */ 
   appcode :  ‘OOOOOOOO’   , 
   /* 광고가 삽입될 div를 지정해주세요. */ 
   displayid : 'adBottom', 
   /* callback function */ 
   nofill_callback : nofill_callback, 
   success_callback : success_callback 
}

<body>에 <div> 영역만 잡아놓으면 된다.

<div id="adBottom"></div>

적용된 사례는 코믹시스트 모바일 페이지에서 볼 수 있다. 일단, 광고로 넣어놨지만 그다지 수익에 도움이 되지 않는다면 유틸리티 메뉴로 써볼까도 고민 중이다. 하단 위치는 활용도가 매우 높으니.