현재 사용중인 프라치노 공책 스킨은 사이드바가 버튼을 눌러서 로드하는 방식이다. PC 버전에서는 이 사이드바가 항상 열려있는 상태로 고정되도록 설정할 수 있는데 이렇게 해서 사이드바에 애드센스 광고가 항시 보여지도록 설치해보려고 했다.
그러다가 사이드바 요소들과 같이 광고를 끼워넣으니 영 보기도 불편하고 애초에 사이드바에 카테고리 목록과 글검색 버튼 쓰라고 있는건데 목적도 해하는 것 같아서 아예 별도의 플로팅 고정광고를 달아보기로 했다.
그 전에 일단 애드센스 광고를 플로팅 고정 형태로 다는게 예전에는 정책 위반사항이라고 알고 있었는데 이제 괜찮은 것인지부터 찾아보았다.
플로팅 고정광고 정책위반일까?
☑️ 애드센스 고정광고는 정책위반 맞습니다 – 친절한 효자손
위 블로그 글을 보면 <애드센스 고정광고는 정책위반이 맞다> 라는 내용인데 구글 측에서 온 답변 내용이 좀 애매모호했다. 정확히 고정광고 하면 안된다는 말이 아니라 부적절하게 배치하는 경우들에 대해 안된다는 식으로…?
사실 예전에는 페이지를 스크롤 할 때 고정되거나 플로팅되는 위치에 광고를 게재하는 행위를 제한하고 있습니다 라는 명확한 문구가 있었다. 생각할 것도 없이 하지 말라고 되어있으니 당연히 할 생각도 안했던 무시무시한 조항이었다.
그러다 2019년 언젠가 이 문구가 사라져서 사람들이 이제 고정광고를 허용한다고 생각하고 달기 시작한 것이다. 대기업 사이트들에서도 스크롤 하다보면 사이드바의 광고가 상단에 붙어서 고정되는 형태로 많이 쓰고있고.
▲위 : 고정광고 정책위반 이라고 기재되어 있던 예전 정책
▼아래 : 언젠가 사라진 고정광고 금지에 대한 내용
블로거들 마다 갑론을박이 있는거 같은데, 무엇보다 이 구글애드 문서를 찾은것이 논란에 쐐기를 박는 셈이 되었다.
결론적으로 이렇게 고정광고 구현을 위한 가이드라인까지 제시하고 있는 마당에, ‘고정광고는 정책위반’이라는 판단은 틀린 것으로 보인다. 고정 광고 자체는 허용이 되었으며 별도의 가이드라인/제한사항에 맞게 달면 되는 것이다. 자 그럼 달아보자.
사이드바 스크롤시 광고고정
구글링 중에 찾은 소스인데 스크립트를 이용해서 사이드바의 아이템을 스크롤되다가 상단에 걸리는 순간 올라가지 않고 고정되도록 하는 형태이다.
<!-- 오른쪽 플로팅 요소 고정하기 시작 -->
<script type="text/javascript">
$(window).scroll(function(event){
if(jQuery(window).scrollTop() > jQuery(".asideRight").offset().top) {
jQuery("#chaseRight").css("position", "fixed");
}
else if((jQuery(window).scrollTop() < jQuery(".asideRight").offset().top)) {
jQuery("#chaseRight").css("position", "static");
}
});
</script>
<!-- 오른쪽 플로팅 요소 고정하기 끝 -->위 스크립트를 </head> 안쪽에 넣어준다. css니 웹디자인이니 그런거 잘 모르지만 대충 보면 asideRight 하고 chaseRight 라는 아이템을 포지션을 뭐 어떻게 고정 한다는구나 하는 뜻인거 같다.
그리고 아래에 실제로 애드센스 광고가 들어가는 부분을 티스토리 관리자메뉴의 스킨편집에서 skin.html에 추가해준다.
<!-- 오른쪽 플로팅 고정광고 시작-->
<aside id="asideRight" class="asideRight">
<div id="chaseRight" style="top:0px;">
<div class="sidebar-1">
<!-- 구글 애드센스 광고블럭 1 -->
</div>
<div class="sidebar-2">
<!-- 구글 애드센스 광고블럭 2 -->
</div>
</div>
</aside>
<!-- 오른쪽 플로팅 고정광고 끝 -->
<div id="wrapper">마지막에 wrapper 부분은 내가 적용한 프라치노 공책 스킨에서 전체 컨텐츠 영역을 지정하는 영역명이다. 스킨마다 contents 라던지 각기 다른 이름을 사용하고 있을테니 알아서 잘 찾아서 넣어주어야 한다.
이 애드센스 광고 삽입 소스를 어디에 넣느냐에 따라서 광고가 보이는 형태가 달라지는데, 위와 같이 컨텐츠 영역 시작하기 전에 넣으면 메인화면부터 모든 글 페이지에 사이드바 광고가 생기고 스크롤시 상단에 걸쳐서 고정되는 형태가 된다.
메인화면, 글목록에는 나타나지 않고 글내용 보여질 때만 보이도록 하려면 wrapper 말고 글 본문 영역을 지정해주는 article 같은 명칭을 찾아서 그 안쪽에 넣으면 된다.
/** 오른쪽 플로팅 고정광고 CSS **/
@media (max-width: 1400px){
#asideRight { display : none;}
}
#asideRight {
float: right;
margin-top: -10000px;
margin-left: -40px;
padding: 0px 0px;
height:100%;
width: 300px;
}마지막으로 삽입한 광고 영역에 대한 css 스타일을 지정해준다. width가 광고 보이는 가로폭이 되고, 여기서 margin 부분은 본인 스킨에 맞게 수정해서 써야 한다.
위 소스들은 이 블로그를 참고하였다.
잘 나오다가 문제가 하나 있었는데 바로 애드센스 광고단위를 두개 넣을 경우 본문 사이가 벌어져 있다가 스크롤을 해서 광고가 상단 고정이 되는 순간 본문에 벌어진 부분이 붙으면서 올라가는 현상이었다. 내 실력을오는 아무리 머리를 싸매고 이리저리 수정해봐도 이게 해결이 안되서 특단의 조치를 취한것이 바로 margin-top:-10000px 을 주는 것이다.
즉 시작할때 상단마진이 -10000px 니까 완전 저 위에 화면 밖으로 올라가 있어서 보이지 않는 상태가 된다. 그러다 스크롤을 한틱이라도 살짝 톡 하고 내리는 순간 스크립트가 동작해서 화면 상단에 걸쳐지는 플로팅 고정 상태가 된다.
여기까지 해서 마음에 들었는데, 찜찜한 것이 애드센스 광고를 화면밖에 숨겨놓다가 스크롤하는 순간 화면에 등장하면서 플로팅 고정상태가 되는 형태가 약관 위배가 될 수도 있겠다는 걱정이었다.
고정 광고 가이드라인 중, 모든 광고는 항상 표시되어야 하고 특정 위치에서 나타나거나 사라질 수 없다고 되어 있다. 여기에 걸릴지 반신반의 하지만, 어쨌든 스크롤을 움직이는 순간 뿅 하고 나타나는 플로팅 고정광고 형태라면 해석하기에 따라 ‘나타났다’라고 볼 수도 있겠다 싶었다.
고민끝에 이런 스크립트로 할 필요가 있나 아예 그냥 화면 한쪽에 박아버리고 반응형으로 사라지게만 할 수 있으면 되는거 아닌가? 라는 생각에 도달했다.
화면구석 고정 + 반응형으로 사라지게
하고 나니까 아 첨부터 이렇게 간단하게 할걸 싶을 정도로 대수롭지 않은 것이었다.
위에 1번에 소개한 소스들 중에 script 부분은 필요없으니 지워버리고, skin.html 에 넣어놓은 실제 애드센스 광고코드 들어가는 부분은 그대로 둔다. 그리고 이 부분에 대한 css 스타일을 아래와 같이 다시 지정해준다.
/** 오른쪽 플로팅 고정광고 CSS **/
@media (max-width: 1770px){
#asideRight { display : none;}
}
#asideRight {
position:fixed;
right:0;
top:0;
z-index:999;
}
#asideRight {
margin-top: 0px;
height:100%;
width: 300px;
}이렇게 했다. 반응형으로 가로폭 줄어들면 사라지는걸 어떻게 하나 했더니 그냥 @media 하고 width 얼마 이렇게만 써주면 되는 것이었네? 난 또 무슨 자바스크립트 어쩌고 복잡한 구현을 해서 하는건줄 알았는데 생각보다 간단한 거였잖아?
프라치노 공책 스킨에서 TOC (자동목차생성) 기능을 지원하는데 본문 우측에 목차가 있을 경우 광고랑 겹쳐보였다. 그래서 가로폭 줄어들 경우 목차랑 닿는 시점에 광고가 먼저 사라지도록 가로폭 1770 이상에서만 보이도록 반응형으로 설정해주었다.
그리고 위와 같이 광고영역 명칭인 asideRight 부분에 position:fixed로 화면 우상단 구석에 박아버리고 가로폭 300과 z-index (우선순위) 999 지정해서 제일 앞으로 보이도록 해놓았다. 안그러면 블로그 상단 헤더 영역 뒤로 들어간다던지 할 수 있기 때문에
그결과 보이는 것이 현재 이 블로그 PC버전에서 우측에 고정된 광고형태이다. 애드센스 두개로 하나는 반응형 하나는 300×300 사이즈 고정된 놈 두개를 달아주었다. 가로폭 300에서 반응형일 경우 보통 300×600 세로막대형 광고가 출력되길래 밑에 300짜리를 붙여서 세로 900이 되도록 한 것이다.
아무튼 이렇게 우여곡절 끝에 고정도니 플로팅 광고를 설치했는데, 방문자 얼마없는 이런 블로그에 광고 더단다고 수익을 기대하는건 아니고 그냥 재미로 한번 해보았다. 공부하면 재밌지만 시간이 너무 많이 들어가는 티스토리 스킨 수정….. 그래도 시간이 허락한다면 원래 했던 스크립트 형태로 스크롤 되다가 고정되는 광고로 다시 시도해보고 싶다;;;
