티스토리 블로그에 수동으로 반응형 애드센스 광고 붙이기
애드센스 자동 광고 기능이 있지만 여전히 자기손으로 뭔가를 붙여놓아야 제대로 된거 같은 느낌을 받는 블로거들이 아직 적지 않은편입니다.
자동 광고만으로는 애드센스 광고가 정상적으로 표시되지 않는 블로그도 있기 때문에 이런 경우에는 수동으로 애드센스 광고를 붙여야 합니다.
미리 말해두지만, 블로그 컨텐츠가 정상적이고 또, 괜찮은 컨텐츠라면 자동광고가 모든면에서 더 나은 선택입니다.
부수적으로 수동 광고를 더 붙여넣을 수는 있겠지만, 애드센스 자동 광고가 수익율이나 광고 노출면에서 월등히 효과가 좋습니다.
1. 애드센스 광고를 붙일 때 주의할 점
애드센스 광고는 구글의 정책에 전적으로 의존합니다.
구글의 검색 결과 노출이 절대적인 영향을 미치기 때문에 구글의 정책을 잘 지키는 것이 중요합니다.
티스토리를 기준으로 할 경우
반응형 스킨을 사용해야 하고, 블로그 컨텐츠에 비해 지나치게 많은 광고를 붙이는 것은 좋지 않습니다.
보통 한 화면에 3개 이하의 광고가 표시되는게 좋으며, 블로그 글이 긴 경우 4-5개까지도 허용되기도 합니다.
애드센스 자동광고의 경우도 비슷한 분량의 광고가 노출됩니다.
그리고, 광고를 부적절하게 배치한 경우, 애드센스는 부정 광고 수익을 유도하는 것으로 간주해 수익창출이 중단되거나, 심한 경우 애드센스 계정이 정지를 당할 수 있습니다.
마찬가지 이유로 테스트를 목적으로 하더라도 자신의 블로그 광고를 자신이 반복적으로 클릭할 경우 부정 클릭으로 간주되어 애드센스 계정이 정지를 먹을 수 있습니다.
애드센스 광고를 수동으로 붙일 경우 이런 점들을 미리 숙지하고 광고를 배치할 때 세심하게 주의를 해야 합니다.
2. 광고 개수와 위치 결정
보통 수동으로 광고를 붙일 경우 상단 헤더영역, 또는 본문 상단에 1개, 사이드바에 1개, 푸터나 컨텐츠 영역 하단에 1개 이렇게 3개를 붙이는 경우가 많습니다.
새로 시작하는 블로그라면 상단에 1개만 붙이거나, 상단에 1개 사이드바에 1개 정도를 추천합니다.
광고 클릭율은 상단 헤더 영역의 클릭이 90% 이상입니다.
사이드바나 푸터 영역의 광고 클릭율은 다 합쳐서 10% 이하로 현저히 낮습니다.
광고를 많이 붙인다고 광고 클릭이 더 많아지는 것은 아닙니다.
수동으로 광고를 붙인 경우 대부분의 클릭은 상단 헤더 영역에서만 발생합니다.
아울러 광고가 한페이지에 2개 이상 붙은 경우, 동일한 광고가 표시될 확율이 높습니다.
3개 이상일 경우 2개 이상의 광고 영역에 같은 광고가 나올 확율은 아주 높습니다.
여러개 붙여봐야 컨텐츠가 길어서 스크롤을 해야 하는 경우가 아니라면 한 화면안에 같은 광고가 반복적으로 노출되게 됩니다.
광고 여러개 붙여봐야 별의미 없다는 뜻입니다.
3. 애드센스 태그 가져오기
수동으로 애드센스 반응형 광고를 코드를 가져오는 방법은 아래의 순서 그림을 참고하면 됩니다.
보통 티스토리 스킨의 경우
헤더 상단/하단, 푸터 상단/하단, 컨텐츠 영역 상단/하단과 같이 레이아웃 좌우를 채우는 반응형 광고는 수평형 광고를 사용합니다.
사이드바에 붙일 수 있는 광고는 사각형 반응형 광고를 주로 붙이게 됩니다.(아래 과정 참조)
사이드바에는 수직형 반응형 광고를 붙이기도 하지만, 글 내용이 짧은 경우 세로형 광고 길이로 인해 내용이 없는 빈공간이 많이 발생하는 문제가 있으므로 사용에 주의해야 합니다.
그리고, 고정형 크기를 사용자가 직접 정해서 정확한 크기값으로 애드센스 코드를 생성해 붙일 수도 있지만, 반응형 티스토리 스킨에서는 권장하지 않습니다.
최근 애드센스가 아닌 과거 애드센스의 고정형 크기 광고를 붙이는 방식으로 광고를 붙이는 것은 추천하지 않습니다.
애드센스 광고 태그 코드를 복사해서 skin.html 에 붙여넣을 경우
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><!– 사이드바사각형 --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2490108415703807" data-ad-slot="5539752393" data-ad-format="auto" data-full-width-responsive="true"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});</script>일반적으로 이런 코드가 됩니다.
여기서 상단의
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>코드는 애드센스 자바스크립트 라이브러리 파일입니다.
여러개의 애드센스 코드를 붙여넣어 배치할 경우 이 라이브러리를 가져오는 행은 skin.html 상단의 <head></head> 영역에 한번만 붙여넣어도 됩니다.
4. 애드센스 광고를 붙이면 안되는 영역
과거에는 전체 레이아웃 영역 바깥쪽에 세로로 배너 광고를 붙이는 경우가 많았지만, 모바일에 대응하는 반응형 스킨의 경우 단일 스킨으로 모바일 환경까지 모두 대응하기 때문에 스킨 전체 레이아웃 바깥쪽에 위치하는 광고를 붙이는 것은 좋지 않습니다.
광고를 붙일 수 없는 것은 아닙니다.
데스크탑 환경에서만 외곽에 광고가 표시되도록 하고, 모바일 환경이나 좁은 레이아웃인 경우 미디어 쿼리로 레이아웃 외곽의 광고가 표시되지 않도록 처리해주는 방식으로 대응해주면 레이아웃 바깥 영역에 애드센스 광고를 붙이는데 문제가 없습니다.
다만 화면에 보이지 않을 뿐 광고 데이터 자체는 뿌려지기 때문에 블로그 페이지 로딩을 느려지게 만드는 원인이 되고, 레이아웃 외곽에 광고를 배치하기 위해 복잡한 CSS나 자바스크립트 코드를 추가해야 하는 등 번거로운 추가 작업을 해야 합니다.
반응형 스킨의 특성상 가로 너비에 따라서 레이아웃 너비가 가변으로 변하게 되는데, 레이아웃 영역과 자연스럽게 연동되도록 애드센스 광고를 배치하는게 쉽지 않기 때문에 가능하면 레이아웃 외곽에 애드센스 광고를 배치하는 것은 피하는 것이 좋습니다.
5. 헤더 상단/하단 영역에 붙이기
블로그 전체 헤더 영역에 붙이는 방법(레이아웃 전체 너비를 차지), 사이드바가 있는 경우 컨텐츠 영역 상단에 붙이는 방법 2가지가 가능합니다.
광고 효과는 비슷하므로, 블로그 스킨 타입이나 취향에 맞춰 붙이면 됩니다.
스킨 디자인에 따라 실제 위치는 달라질 수 있으므로 사용하는 스킨에 맞춰 실제 위치는 조정해야 합니다.
skin.html 파일에서
스킨 제작 가이드나 레퍼런스 스킨을 기준으로 만든 스킨들은 대부분
<header id="header">...</header>안에 헤더 내용들(검색, 메뉴, 타이틀 등)이 오게 됩니다.
<header></header> 태그 바로 바깥 위쪽에 애드센스 코드를 붙여넣으면 헤더 상단(일반적으로 블로그 레이아웃 최상단에 표시됨)에 애드센스 광고가 표시되고, 끝나는 태그 바로 아래에 붙여넣으면 헤더 하단에 표시됩니다.
예를 들어
<div class="wrap_adsense"> <!– tistory_top_responsive --> <ins class="adsbygoogle" style="display:block;max-width:930px;" data-ad-client="ca-pub-2490108415703807" data-ad-slot="7038205707" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>이런식으로 애드센스 코드를 붙여넣을 수 있습니다.
주의할 점이 있습니다.
스킨 CSS에서 <header> 태그 높이가 적절하게 설정된 스킨이 아닌 경우 헤더 영역과 애드센스가 겹쳐 보일 수 있습니다.
이런 경우
<hr style="display:block;position:relative;float:none;clear:both;border:0;"/>또는
<div style="display:block;position:relative;float:none;clear:both;"></div>이 태그를 애드센스 태그와 헤더 태그 사이에 배치해 헤더 영역과 애드센스 영역을 분리시킬 수 있습니다.
6. 컨텐츠 영역 상단/하단 영역에 붙이기
블로그 상단에 넗게 애드센스 광고를 붙일 경우 보통 이 위치에 붙여넣는다고 보면 됩니다.
가이드라인에 맞춰 제작된 티스토리 스킨의 경우 컨텐츠 영역은 보통
<article id="content"></article>태그로 정의하게 됩니다.
스킨 제작자 의도나 코딩 스타일에 따라, 또는 디자인 레이아웃에 따라 <article></article> 태그 대신 <div></div> 태그로 정의하기도 합니다.
애드센스 코드를 붙여넣을 때 반응형 가로 배너인 것을 기준으로 <article></article> 안쪽의 최 외곽에 넣는 것을 추천합니다.
<article></article> 태그 바깥에 붙일 경우 헤더나 사이드바 영역 레이아웃과 충돌이 발생하거나 레이아웃이 밀리는 현상이 발생할 수 있기 때문에
<article></article> 태그 안에 애드센스 태그를 넣는 것을 추천합니다.
제대로 광고를 붙였을 경우 아래와 같이 컨텐츠 영역 상단에 광고가 표시되게 됩니다.
7. 사이드바 영역에 붙이기
가이드라인에 따라 만들어진 스킨일 경우
<aside id="sidebar" class="sidebar">...</aside>또는
<div id="sidebar" class="sidebar">...</div>태그에 사이드바 컨텐츠가 위치하게 됩니니다.(클래스 속성은 다를 수 있습니다.)
이 태그 안쪽 최상단, 또는 최하단에 사이드바용 애드센스 태그를 붙여넣으면 됩니다.
예를 들어
<div id="adsense_side" class="adsense_sidebar"> <!– apost_sidebar --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2490108415703807" data-ad-slot="4942752337"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>이런식으로 <div id="adsense_side" class="adsense_sidebar"></div> 태그로 애드센스에서 생성한 코드를 한번 더 감싸서(관리상, 또 레이아웃과 배치를 편하게 하기 위해) 붙여넣어주면 됩니다.
어디까지나 예이고 실제 붙여 넣는 코드는 스킨 종류에 따라 다를 수 있습니다.
4번째 줄에 보면 붙여넣는 애드센스의 스타일을 강제로 지정하는 CSS코드가 있습니다.
반응형 사각형 광고를 붙인 경우 사이드바 너비에 따라 자동으로 100% 크기로 표시가 되겠지만, 사이드 너비에 제대로 맞지 않거나 강제로 크기를 지정하고 싶은 경우
inline-block;width:250px;height:250px이렇게 크기값을 직접 지정하는 CSS코드로 변경해줄 수 있습니다.
인라인 블록 형태로 가로/세로 250px 크기로 붙여넣는다는 뜻입니다.
여기서 주의할 것이 너비값인데 width:250px; 로 지정하면 애드센스 너비값이 250px로 고정됩니다.
나중에 스킨 커스터마이징을 위해 사이드바 너비를 수정하게 될 경우 이 값도 함께 수정해줘야 애드센스 광고 크기가 변경된 사이드바 너비에 맞춰지게 되므로 기억하고 있어야 합니다.
반응형 광고를 붙이는 경우에는 해당 사항이 없습니다.
8. 푸터 영역에 애드센스 붙이기
가이드라인에 따라 만들어진 티스토리 스킨에서 푸터는 보통
<footer id="footer"></footer>태그로 정의합니다.
이 태그 바깥 위, 또는 아래에 애드센스 반응형 가로 배너를 배치하면 해당 위치에 애드센스 광고가 표시됩니다.
9. 반응형 스킨에 티스토리 애드센스 플러그인으로 광고를 붙이는 것은 피해라.
현재 버전의 티스토리 애드센스 플러그인은 반응형 웹을 잘 지원하도록 만들어진 플러그인이 아닙니다.
구버전 스킨 시절에 만들어진 플러그인이고, 반응형 웹을 100% 정상적으로 지원하지 못합니다.
특히 최근에 배포되는 반응형 스킨들과는 일부 호환성 문제가 있는 경우가 있습니다.
반응형 애드센스 플러그인의 경우 무리없이 잘 동작하기도 하지만
제작자 의도에 따라, 또는 레이아웃 특성상 티스토리 애드센스 플러그인이 표시하는 애드센스 광고 영역과 컨텐츠 영역이 겹치는 경우가 발생할 수 있습니다.
PC용이나 모바일용인 애드센스 플러그인은 광고를 붙일 경우 광고 영역이 레이아웃 바깥으로 밀려 나오거나 한쪽으로 쏠린 광고가 표시될 수 있습니다.
아울러 광고 영역이 레이아웃 영역 안의 다른 컨텐츠와 겹치는 경우가 생길 수 있으며, 이럴 경우 애드센스는 부정클릭을 유도하기 위한 어뷰징으로 인식될 수도 있습니다.
애드센스 광고는 인접한 클릭 가능한 컨텐츠 요소와 애드센스 광고가 너무 가까이 붙어있다고 판단될 경우 애드센스 사용자에게 주의를 주고, 지속적으로 이런 상태가 지속되고, 해당 광고에서 이런 인접한 컨텐츠로 인한 클릭이 발생한다고 판단되면, 광고 표시를 정지하게 됩니다.
단순한 문제일 경우 광고 미표시 한달 정도로 끝나겠지만, 부정클릭으로 인한 어뷰징으로 판단될 경우 심한 경우에는 애드센스 계정 자체가 정지되기도 하므로 수동으로 애드센스 광고를 붙일 때는 반드시 체크를 해야합니다.
특히 하단 영역에 붙이는 티스토리 애드센스 플러그인의 경우 티스토리 관련글, 다른글 표시 영역과 겹치지 않는지 확인을 꼭 해야 합니다.
블로그 메인 목록이나 커버페이지에 인피드 광고(목록 사이에 자동으로, 또는 일정 간격으로 광고가 표시되게 하는 애드센스 광고)를 붙이려면
-> 신스킨에 구스킨 인피드 애드센스 적용 방식으로 글목록 애드센스를 붙이는 방법
을 보시기 바랍니다.