티스토리 반응형 모바일 애드센스 삽입하기 : 반응형 웹 skeleton 스킨
- 블로그 관련 정보
- 2013. 12. 12.
티스토리 반응형 모바일 애드센스 삽입하기 : 반응형 웹 skeleton 스킨
블로그를 운영하는 분들이라면 이제는 모바일을 통한 유입도 신경쓰지 않을 수 없습니다. 스마트폰이나 테블릿 등의 통칭 모바일기기가 엄청나게 보급되어 있을 뿐만 아니라 접근성이 좋다는 이유(지하철이나 버스, 이동 중 등의 상황에서)에서 모바일 웹 검색이 PC로 인터넷을 사용하는 것 만큼 보편화 되었습니다. 모바일 유입이 상승한만큼 모바일에서의 트래픽도 더 이상 간과할 수 없는 수준에 이르렀습니다. 구글 애드센스 등 블로그에 광고 플랫폼을 설치하여 운영 중인 블로거라면 이러한 모바일 트래픽을 어떻게 수익으로 연결할 수 있을지 생각해 볼 필요가 있습니다.
티스토리에서는 여타 다른 블로그 서비스와는 차별화되게 별도로 모바일 스킨을 제공하고 있습니다. 사용자가 디자인 등의 일부 요소를 간편하게 수정할 수 있다는 장점이 있습니다만 HTML 등의 소스를 볼 순 없기 때문에 디테일하게 수정할 수 없다는 것은 단점이 되기도 합니다. (네이버나 다음에서는 별도로 모바일 스킨을 제공하지 않고 있으며, 모두 동일한 화면으로 표시됩니다.)
티스토리에서 모바일 애드센스를 설치하는 방법
티스토리 사용자라면 구글 애드센스를 모바일에 어떻게 적용해야 할지 고민이 됩니다. 티스토리 블로그에 모바일용 구글 애드센스를 설치하는 방법에는 다음과 같이 크게 4가지 방법이 있습니다.
1. HTML 수정으로 모바일용 애드센스 코드 삽입
과거에 모바일용 애드센스와 모바일 스킨 등이 제공되지 않을 때 많이 사용했었던 방법입니다. 광고를 PC와 모바일 구분하여 관리하기 힘들다는 점으로 인해 거의 사용되지 않은 것으로 보입니다.
2. 본문에 애드센스 소스코드 본문에 삽입(글 쓸 때, 글쓰기 에디터에서 삽입하는 방법)
일반적으로 많이 사용되는 방법으로 알고 있습니다. 즉, 본문 안에 HTML 소스코드를 삽입하는 방식입니다. 이렇게 활용할 경우 본문 시작에서부터 본문 끝, 본문 중간 등 위치를 자유롭게 설정할 수 있다는 장점이 있습니다. 티스토리 글쓰기 에디터에서 제공하는
서식기능을 활용하면 한번의 클릭으로 삽입할 수 있습니다. 또한, 글쓴이가 넣고 싶은 글에만 넣을 수 있다는 점도 괜찮은 부분입니다. 즉, 매우 중요하거나 광고보다는 글 자체에 주목을 시키고 싶을 경우에는 애드센스 광고를 삽입하지 않음으로써 이 포스트의 광고를 관리할 수 있습니다.
단지 차후 확장성을 고려하면 딱히 좋은 방법이라고 하기엔 힘든 부분도 있습니다. 가령, 광고 크기나 광고의 스펙을 바꾸고 싶은 경우, 이 애드센스 코드가 삽입되어 있는 모든 포스트의 본문을 수정해야 하는 상황이 발생합니다. 포스트가 수십개 정도면 노가다로 어떻게 해볼 수 있겠지만, 100개 이상이 된다고 하면 매우 낭비적인 작업량이 됩니다. 그렇기 때문에 본문 상단보다는 거의 변경할 일이 없다고 판단되는 하단 정도의 광고 채널에 많이 활용합니다.
3. 티스토리에서 제공하는 모바일용 애드센스 플러그인 사용
가장 보편적인 방법이 아닐까 싶습니다. 티스토리에서 제공해주는 플러그인에다가 자신의 구글 애드센스 광고 소스코드를 넣어주기만 하면 됩니다. 하지만 광고 크기와 형태, 위치를 마음껏 관리할 수 없는 단점이 있습니다. 본문 상단과 하단에 배치할 수 있도록 기능이 제공되는데, 상단 같은 경우 현재 상황에서는 본문 상단이 아니라 제목 위에 배치되어 버리면서 이질적인 느낌으로 인해 클릭율이 저조한 것으로 판단됩니다. 하단 또한 본문 하단이 아니라 본문이 끝나고 난 다음의 위치에 삽입되어 마찬가지로 클릭율이 저조한 것으로 판단됩니다. 반대로 손쉽게 소스코드를 삽입하거나 제거할 수 있고 전체 블로그에 통합 적용할 수 있어서 일반 유저들에게 가장 쓰임새 있는 기능입니다.
4. 반응형 웹 일 경우 구글에서 제공하는 비동기식 반응형 웹용 애드센스 활용
만약 티스토리 스킨을 반응형 웹으로 구성해두었다면 구글 애드센스에서 제공하는 비동기식 반응형 웹용 애드센스 코드를 삽입할 수 있습니다.
반응형 웹용 애드센스는 구글에서 새롭게 출시한 애드센스 광고 유형입니다.앞으로 이 광고 유형이 많이 사용될 것 같다는 추측을 해 봅니다.
여러번의 테스트를 해 본 결과, 반응형 웹용은 구글 애드센스는 접속자의 웹 가로 사이즈(width)를 체크하여 알맞은 사이즈로 광고를 뿌려주는것 같습니다. 하지만 아직 BETA 버전이라 그런지 완벽하게 작동하진 않습니다. 가령, 아이패드를 세로모드로 쓰다가 가로모드로 변경하면 한번 나타난 광고가 제대로 사이즈 조절이 되지 않습니다. 새로고침을 해야 정상적으로 동작하더군요. BETA가 끝나면 정상 작동할 것 같다는 추측이 있습니다만 언제쯤 완료될진 알 수 없습니다.
오늘 글에서는 4번 유형, 그러니까 반응형 웹용 모바일 애드센스 설치방법에 대해 포스팅합니다. 이 방법은 제가 사용하고 있는 스킨인 Skeleton 스킨용이며, 같은 Spec을 따르는 HTML 소스에도 활용할 수 있습니다.
모바일을 타겟으로 한 구글 애드센스 설치 방법
위 이미지는 구글측에서 권장하는 모바일용 애드센스 설치에 대한 가이드라인입니다. 말이 권장사항이지 거의 반강제라고 볼 수 있습니다. 일반적으로 구글에서는 애드센스의 배치 및 활용을 사용자에게 자유롭게 맡겨둡니다. 너무 과한 경우 정책위반을 근거 삼아 제재를 가하는 방식을 취하는데요. 이 과한 경우라는 것을 도무지 일반 사용자가 판단할 수가 없습니다. 처음 한번은 경고 정도가 들어오는데, 계속 수정이 안 될 경우 계정 정지나 애드센스 정지 등 강력한 조치를 취하기도 합니다.
한번 정지가 걸려버리면 해결하기가 매우 힘들고, 또 귀찮기도 한 것 뿐만 아니라 고객센터와의 커뮤니케이션이 여전히 어렵다는 점 때문에 처음부터 안전하게 권장사항을 지키는게 상책입니다. 한 번 정지를 먹게되면 한동안 애드센스 자체가 노출되지 않아 경우에 따라서는 꽤 많은 수익의 손해를 볼 수도 있습니다.
구글 애드센스 프로그램 정책 ↩ 에서는 애드센스와 관련된 내용이 자세하게 설명되어 있습니다만, 구글에서 제공하는 가이드라인이라고는 보기 힘들만큼 추상적이고 애매모호하게 설명되어 있습니다. 따라서 왠만해서는 구글 애드센스에서 제공하는 권장사항을 지키는게 현재로서는 상책입니다.
위 이미지 또한 구글 애드센스의 권고사항 이메일입니다. 구글은 모바일용 애드센스와 관련해서는 매우 강력하게 제재를 가하는 모션을 취합니다. 모바일 기기 같은 경우 웹의 사이즈가 매우 다양하여 어떤 기기에서 접속하여 구글 광고를 보게될지 판단할 수 없기 때문인 듯합니다. 모바일 상단에 300*250의 광고 사이즈가 배치되어 버리면 화면의 절반 이상이 광고로 가려지게 되고, 정책위반 대상이 되겠지요. 또한, 이보다 좀 더 작은 사이즈의 광고 유형도 꽤 많은편입니다만 320 X 50 혹은 300 X 50 의 작은 사이즈의 광고를 노출하길 권장하고 있습니다. 그래서 이 규정을 지키는게 가장 좋아보입니다.
반응형 웹용 비동기식 구글 애드센스 코드 얻기
반응형 웹용 비동기식 구글 애드센스는 코드를 얻는 방법이 조금 다릅니다. 광고 크기에서 위 이미지처럼 기타 - 반응형의 반응형 광고 단위로 만들어야 합니다. 광고 크기가 가변적이기 때문에 따로 유형이 다양하지 않고 1개만 있습니다. 별 다른 신경쓸 필요없이 그냥 만들면 됩니다.
이 구글애드센스 코드를 보면
@media 라는 미디어 쿼리가 있습니다. 구글에서는 자체 사이트의 유형에 맞게 미디어 쿼리를 적절하게 수정하라고 요구합니다만 티스토리 블로그 등 왠만한 사이즈의 크기에서는 별 다른 수정사항이 없어도 됩니다. 소스코드의 .my_adslot { width: 320px; height: 50px; } 부분은 광고의 기본 크기를 나타냅니다. 즉, 미디어 쿼리가 적용되지 않는 IE 7버전 이하 등에서 나타나는 기본 광고 사이즈입니다.
두번째에 있는 미디어 쿼리인 @media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }와 @media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }은 전형적인 미디어 쿼리 사용 방법으로 구성되어 있습니다. 즉 화면 사이즈가 최소 500 일 경우에는 468의 광고 크기로, 800 일 경우에는 728의 크기로 노출된다는 의미입니다. 사용자 입맛에 따라 적절하게 수정해도 됩니다만 비동기식 광고 코드인 만큼 광고 길이가 가변적으로 변하는 특성상 미디어쿼리와 관계없이 적절하게 노출되는 것으로 테스트 되었습니다. 따라서 변동사항은 특별히 없습니다.
자세한 사항은 구글 애드센스 정책의 반응형 광고 단위 만들기 ↩
를 참고하세요.
또한, 마크쿼리 커뮤니티 게시판 ↩에는 반응형 비동기식 광고 코드가 아니라 일반 광고코드를 사용할 수 있는 소스코드가 공개되어 있으니 이것도 참고해보세요!
Skeleton 반응형 웹 스킨에 모바일용 구글 애드센스 설치하기
이제 본격적으로 소스코드를 넣어봅니다.
가장 먼저 구글 애드센스를 삽입할 위치를 찾아야 합니다. 지금 찾고자하는 위치는 본문 최상단입니다. 제목 바로 아래, 본문 시작보다는 위쪽에 구글 애드센스 광고를 넣으려고 하는 것입니다. 가장 많은 유저가 사용하고 있는 공간이기도 하며, 오랜기간동안 그 효과가 거의 증명되다시피 한 위치이기도 합니다.
이 위치는 티스토리의 본문 시작 치환자를 검색하는 것만으로 쉽게 찾을 수 있습니다.
티스토리에서 본문 시작을 뜻하는 치환자는
티스토리에서는 본문에 치환자를 표시할 수 없기 때문에 위의 치환자에서 '샵'을 #으로 변경해주어야 검색이 됩니다. 즉, 샵샵이면 ##이 됩니다.[샵샵_article_rep_desc_샵샵]입니다.HTML 수정 창에서 검색(Control + f)을 활용하여 애드센스 코드 삽입 위치를 쉽게 찾으세요.
치환자 관련하여 샵이고 뭐고 헷갈리시는 분들을 위해 텍스트 파일을 준비했으니, 텍스트 파일을 다운로드하여 치환자를 복사 할 수도 있습니다.
구글 광고 설치가 모두 완료되었습니다. 모두 정상적으로 적용되었다면 PC화면에서는 구글 광고 2개(300X250), 모바일 등의 기기에서는 가변하는 동기식 (가로로 길쭉한 모양)의 광고가 노출됩니다.
클릭율이나 수익을 늘리기 위해서라면 모바일 화면에서 조금 더 큰 광고 유형을 선택하고 싶어지는 마음이 간절할텐데요. 소탐대실의 경우가 생길 수 있기 때문에 지양하고 있습니다. 추후 비동기식 광고가 BETA가 완료되면 사용자가 적절히 선택할 수 있는 광고 유형이 나와서 공식적으로 제공해주기만을 기다리는게 현재로선 최선의 방법이 되겠네요.