티스토리 skeleton 반응형 스킨에서 구글 애드센스 본문 상단에 2개 배치하기
- 블로그 관련 정보
- 2013. 12. 12.
티스토리 skeleton 반응형 스킨에서 구글 애드센스 본문 상단에 2개를 배치해봅시다.
이번에 Skeleton 반응형 스킨으로 디자인을 바꾸면서 구글 애드센스의 코드도 함께 바뀌었습니다. 애드센스 자체의 코드가 바뀐건 아니고, 애드센스 주변을 구성하는 틀 자체가 바뀌었다고 해야겠군요. Skeleton 스킨은 반응형 스킨이기 때문에, 일반적으로 티스토리에 애드센스 광고를 넣듯이 고정형 애드센스를 배치해버리면 모바일이나 해상도가 낮은 기기에서도 크기가 줄어들지 않은 광고가 나타납니다. 마크쿼리님이 제공해주시는 스킨을 사용하시는 티스토리 블로거분들을 몇 곳 방문해 보았는데, 실제로 고정형 애드센스를 넣어둔 분도 계시더군요. 지금 당장은 큰 문제가 없는 것처럼 보입니다만, 모바일 화면에서 사이즈가 큰 광고가 표시될 경우애드센스 정책 위반에 해당하기 때문에 주의를 해야합니다.
이번 글은 PC화면처럼 사이즈가 큰 화면에서 가장 인기가 높은 사이즈의 구글 애드센스인 300*250 을 기준으로 포스팅합니다. 기존에 사용하시는 구글 애드센스 광고 그대로 사용하시면 될 것 같습니다.
모바일과 관련된 애드센스 배치 및 삽입 방법은 내용이 좀 있는 관계로 다음 포스팅에서 다룰 예정입니다.Note
티스토리 자체에서 제공하는 모바일용 애드센스 플러그인은 더 이상 사용하지 않습니다. 별도의 모바일 스킨 또한 필요없습니다. 현재의 스킨 그대로 모바일로 가져감으로써 사용자에게 어떤 기기에서든 동일한 경험을 줍니다(반응형). 단, 구글 애드센스의 크기와 구조는 줄어든 화면의 크기만큼 줄어들어야 하기 때문에 모바일용 비동기식 구글 광고를 사용할 예정입니다. 아직 BETA라고 나와있습니다만 현재로선 이 방법이 최선입니다.
구글 애드센스를 삽입할 위치 찾기
가장 먼저 구글 애드센스를 삽입할 위치를 찾아야 합니다. 지금 찾고자하는 위치는 본문 최상단입니다. 제목 바로 아래, 본문 시작보다는 위쪽에 구글 애드센스 광고를 넣으려고 하는 것입니다. 가장 많은 유저가 사용하고 있는 공간이기도 하며, 오랜기간동안 그 효과가 거의 증명되다시피 한 위치이기도 합니다.
이 위치는 티스토리의 본문 시작 치환자를 검색하는 것만으로 쉽게 찾을 수 있습니다.
중요!
티스토리에서 본문 시작을 뜻하는 치환자는
티스토리에서는 본문에 치환자를 표시할 수 없기 때문에 위의 치환자에서 '샵'을 #으로 변경해주어야 검색이 됩니다. 즉, 샵샵이면 ##이 됩니다.[샵샵_article_rep_desc_샵샵]입니다.HTML 수정 창에서 검색(Control + f)을 활용하여 애드센스 코드 삽입 위치를 쉽게 찾으세요.
치환자 관련하여 샵이고 뭐고 헷갈리시는 분들을 위해 텍스트 파일을 준비했으니, 텍스트 파일을 다운로드하여 치환자를 복사 할 수도 있습니다.
구글 애드센스를 삽입하기
바로 윗칸에 넣는 것이 추후 관리하기 편하더군요. 일반적인 티스토리 스킨에서는 구글 애드센스를 가로로 2개 정렬하여 배치하는 과정에서 `<table>` 태그 등을 이용하는 것으로 알고 있는데요. 이번 스킨에서는 구조화가 잘 된 Spec이 따로 있으며, HTML5에 어울리는 방법으로 적용할 수 있습니다.이제 구글 애드센스를 배치해주면 됩니다. 소스코드는 아래와 같습니다.
간편하게 소스코드 TXT를 다운로드 하세요.
구글 애드센스 가로 2개 배치 소스코드(Skeleton Skin) Download
div class="col-sm-6" 부분은 레퍼런스를 참고하여 구조를 만들었습니다. 레퍼런스 및 커뮤니티의 답변에 의하면 col-sm은 12까지 있다고 합니다. 본문을 좀 살펴보니 사이드바를 제외한 크기는 col-sm-9 인 듯 합니다. 이렇게 하는게 맞는지는 모르겠습니다만, 최대한 WIDE 풀사이즈 화면에 대응하기 위해 구글 애드센스 1개당 col-sm-6을 넣어두었습니다.
본문 텍스트와 광고, 제목과 광고에 약간의 여백을 주기 위해 margin이 들어가 있으며, 좌우 여백은 필요없습니다.
동기식과 비동기식 구글 애드센스
저도 이번에 새롭게 개편하면서 알게 된 사실인데, 구글 애드센스의 코드 유형이 동기식과 비동기식으로 구분이 되어 있더군요. 과거에는 그냥 동기식만 있었던 것 같은데... 아무튼 비동기식 코드는 모바일에서 사용할 예정이며, PC화면의 구글 애드센스는 동기식으로 코드를 얻었습니다.
배치가 완료되었고 정상적으로 광고가 2개 출력되면 완벽합니다. 해당 소스코드는 모바일 같은 작은크기의 해상도에서는 광고가 나타나지 않도록 되어 있습니다. 브라우저 크기를 줄였다 늘렸다 해가며 잘 동작하는지 체크해보시기 바랍니다.