본문 바로가기

BLOG SKILL/BLOG TIP

티스토리 모바일웹 제목하단 구글 애드센스(Adsense) 배치 팁

반응형
티스토리(Tistory)에서는 모바일웹 홈페이지를 지원합니다. 그리고, 모바일로 유입되는 적지 않은 트래픽 유입으로 인해서 수익형 블로그를 운영중인 분들 중에서 상당수가 티스토리 모바일 웹페이지에도 애드센스를 함께 나오게 할 수 있도록 설정을 해 놓고 있는데요. 대부분은 티스토리 블로그에 포스팅 제목 하단에 애드센스 광고 두개를 나란히 설치해서 광고를 배치하는 레이아웃을 사용합니다.

다들 알다시피 구글의 애드센스는 모바일웹 홈페이지의 경우 1개만 설치가 가능합니다. 일반 홈페이지에서는 콘텐츠형 3개까지 가능한데요. 얼마전에 구글의 모바일 애드센스 광고 정책이 일정부분 바뀌면서  웹페이지와 모바일페이지간 모바일 애드센스를 혼용해서 사용할 수 있도록 바뀌었습니다. 즉, 모바일 지원 애드센스 규격 광고를 일반 웹페이지에 설치해 놓으면 모바일 페이지에서도 그대로 보이게 되는데요.

 


티스토리에서는 현재까지 이 모바일 페이지, 즉 자신의 티스토리주소 끝에 '/m' 으로 접속하면 모바일 웹 페이지로 이동되지만, 구글의 애드센스 모바일 광고는 일반적인 티스토리 스킨을 수정한다고 되는것이 아닌 포스팅 글을 작성할 때마다 본문내의 HTML에 삽입해주어야 모바일 웹페이지에서 정상적으로 나타나게 됩니다. 

따라서, 보기 좋게 웹페이지 티스토리 화면에서는 제목 하단에 나란히 두개의 애드센스가 보이게 하고, 모바일 페이지에서도 제목 하단에 한개의 구글 애드센스가 그대로 보이도록 설정하는 방법에 대해서 알아봅니다.


1. 구글 애드센스 광고단위 새로 만들기

구글 애드센스의 광고단위는 사이즈별로 여러가지가 있는데요. 티스토리 모바일 홈에서 보이는 것이 가장 적절하고 영역이 넓게 나올 수 있는 300x250 사이즈의 콘텐츠 광고를 2개 만들어 줍니다. 일반적인 아이폰이나 안드로이드에서의 가로 화면 픽셀이 320정도이므로 이것을 넘지 않는 티스토리 모바일 페이지에서 볼 수 있는 가장 적절한 사이즈입니다.



2. 생성한 애드센스 광고 2개 적절히 활용하기




생성한 구글 애드센스 코드 두개 중 한개는 티스토리 글쓰기를 선택해서 상단의 '서식'에 체크한 후, HTML 모드로 들어가서 그대로 광고코드 소스를 붙여 넣고 적당한 서식이름을 글제목에 입력하고 저장해 줍니다. 글을 쓸 때마다 이 서식을 글 상단 맨 처음 글쓰기 모드에서 제일 처음에 서식을 입력해서 티스토리 모바일홈에서 글 하단에 바로 볼 수 있도록 매번 서식을 삽입해주어야 합니다.
 


3. 티스토리 스킨 수정

이제 고정으로 나오게 될 나머지 하나의 애드센스 코드를 티스토리 스킨수정에서 HTML을 적당히 수정해 주어야 합니다. 티스토리 관리자 모드로 들어가서 HTML 수정을 선택합니다. 여기서, 치환자를 찾아줍니다. 티스토리  치환자는 바로 본문내용을 보여주는 변수 정도로 이해하시면 됩니다.

찾으셨으면 
를 아래와 같이 추가적인 소스와 함께 변경해 줍니다. 

참고로, 아래의 코드와 방법은 구글애드센스 팀에서 공지하고 이용자를 위해서 알려준 코드와 방법입니다.

<div calsss="article">
<div style="float:right; margin=0 0 0 10px">
두번째 애드센스 코드 삽입위치
</div>

</div>
 


위와 같은 방법으로 설치했다면 이제 일반적인 티스토리 블로그를 PC로 접속하거나 아이패드 같은 태블릿에서 PC화면으로 접속하면 일반적인 웹페이지처럼 제목 하단에 구글 애드센스(Adsense)광고가 나란히 두개가 나오게 됩니다. 위의 3번항에 삽입해준 코드가 우측으로 정렬되어 우측에 있는 애드센스 콘텐츠광고 입니다. 또한, 티스토리 모바일웹 홈페이지로 접속하게 되면 역시나 제목하단에 한개의 300x250 모바일 애드센스가 설치되어 자리잡습니다.

마찬가지로, 글쓰기에서 제일 처음에 만들어준 서식을 넣어주게되면 좌측에 해당 구글애드센스가 자리잡게 되는것인데요.

모바일에서는 좌측의 모바일 구글 애드센스 광고가 나오고, 일반 PC 웹브라우저 접속일 경우에는 두개의 광고가 나란히 병렬배치로 티스토리 포스팅 제목 하단에 바로 나오게 됩니다. 두 애드센스 광고의 사이 간격은 3번 코드에서 마진 10px를 적당하게 수정해서 올려주면 됩니다.
반응형