구글 애드센스 (Google Adsense) - 3. 모바일 광고 달아보기

구글 애드센스 ( Google Adsense) - 3. 모바일 광고 달아보기 

이전의 구글 애드센스 블로그에 광고 달아보는 방법에 이어서

오늘은 모바일 애드센스 광고를 다는 과정을 포스팅 합니다.

2011/11/03 - [Blog Life] - 구글 애드센스 (Google Adsense) - 1. 가입하기 

2011/11/08 - [Blog Life] - 구글 애드센스 (Google Adsense) - 2. 내 블로그에 광고 달아보기

요새 스마트폰의 보급으로 인해서 모바일 페이지로 접속하는 경우가 많이 증가하였습니다.

실제로 제 블로그의 경우에 PC로 보여지는 광고와 모바일의 비율이 약 5:1 정도 됩니다.

물론 제 블로그는 방문자가 적어서 정확한 건 아니지만 

일 방문자가 매우 많은 수익 목적의 전문 블로거나 사이트 운영자 분이시라면 모바일광고 역시 필수적이라고 생각됩니다.

그런데 티스토리의 경우 모바일 광고를 다는 것은 

이전의 PC에서 보이는 광고 다는 것과는 다르게 2가지 번거로움이 따릅니다.

첫째로는 티스토리에서는 모바일 블로그 스킨의 html 편집을 지원하지 않기 때문에

이전의 스킨 편집을 통해 자동적으로 보이게 하는 방법은 불가능합니다.

즉, 웹페이지 스킨 편집에 모바일 애드센스 코드를 넣는다고 해도 스마트폰을 통해 보면 나오지 않습니다.

아마도 이전 포스팅에서 언급했던 본문 치환자 _article_rep_desc_에 해당되는 부분만 모바일로 옮겨지기 때문에 

그런 현상이 생기는 것으로 추측됩니다.

따라서 모바일 페이지에 광고를 보여주기 위해서는 

본문 작성할때 일일히 html 편집으로 애드센스 코드를 넣어주어야 합니다.

(사실 PC버전의 애드센스도 단순히 상단에 표시하는 것보다 

본문 중간에 어울리게 섞어서 손수 일일히 html 편집을 통해 코드를 넣는 것이 

높은 클릭율을 가져온다고는 합니다만 저는 귀찮아서 그렇게는 해보지 않았습니다. ^^;; )

두번째로는 모바일 애드센스를 넣은 부분은 PC에서 보게 되면 빈공간으로 나오게 되기 때문에

여백이나 공간에 대해 민감하신 분들께서는 스트레스를 받으실 수도 있습니다.

사실 320x50의 작은 광고를 사용하면 크게 신경 쓰이진 않습니다만 빈공간이 보이는 것은 어쩔 수 없게 됩니다.

div 태그를 통해 빈공간을 안나오게 하는 방법도 있지만 

아이패드 등의 태블릿PC에서 일반 PC버전의 블로그를 보게 되면 모바일 광고가 본문을 가리게 되는 현상도 발생합니다.

이에 대한 최적화 등은 아직 많은 블로거 분들이 고민 중 인것으로 알고 있고 저 역시 고민 중에 있습니다. ^^;;

아무튼 번거로움을 이겨내고 모바일 애드센스를 달고 싶으신 분들을 위해 간단하게 넣는 과정을 설명드리도록 하겠습니다.

1. 구글 애드센스에 접속합니다. (http://www.google.com/adsense)

2. 이전과 마찬가지로 '내 광고' 탭을 클릭합니다.

3. 아마도 한번도 '모바일 콘텐츠' 항목을 사용한 적이 없다면 '제품 더보기' 항목에 위치하고 있을 것입니다.

모바일 콘텐츠를 클릭해서 '모바일 콘텐츠용 애드센스 시작'을 클릭합니다. 

(다시 표시해볼 방법이 없어서 그림을 생략하였습니다.)

4. 위와 같이 '모바일 콘텐츠 > 광고 단위' 화면에서 '새 광고 단위'를 클릭합니다.

5. '이름' 항목에는 자신이 알아볼 수 있는 이름을 입력합니다.

'기기 유형'은 'iPhone과 같은 고급형 기기만'을 선택합니다. (대부분 모바일 웹을 접속하는 기기에 해당하죠..)

'광고 형식'은 320x50을 선택합니다. 혹시나 다른 형태를 원하시면 다른 것을 선택하셔도 됩니다.

'광고 유형'은 적당한 것을 선택합니다. 여기에서는 '텍스트 및 이미지/리치 미디어 광고'를 선택하였습니다.

'인코딩'은 '자동 감지'를 해도 무방하지만 혹시나 티스토리의 경우 문제가 생긴다면 UTF-8을 선택합니다.

'색상 팔레트'는 자신의 모바일 블로그와 어울리는 적당한 것으로 선택하시면 됩니다.

'맞춤 채널'은 앞서 설명드린대로 안하셔도 되고 하셔도 됩니다.

'대체 광고 또는 색상' 또한 이전에 설명드린대로 하시면 됩니다. 일단 여기에서는 '빈 칸으로 표시'를 선택하였습니다.

다 입력한 뒤에 '코드 저장 및 생성'을 클릭하시면 됩니다.

6. 코드가 생성되면 모두 선택한 후 복사를 합니다.

7. 티스토리 글쓰기 화면에서 우측 중간쯤에 위치한 HTML을 클릭하여 html편집 모드로 들어갑니다.

8. html 편집 모드에서 아까 복사한 모바일 애드센스의 코드를 원하는 위치에 붙여넣습니다.

맨 처음 위치에 넣으면 제목 바로 다음에 광고가 나오게 되고 가장 마지막에 넣으면 본문 마지막에 위치하게 됩니다.

본문 작성하실때는 html 모드를 체크해제 하고 작성하면 됩니다.

첫번째 팁 : 모바일 애드센스 코드 처음과 끝에 위 화면처럼 

               div style="margin-left: -12px;" 태그와 /div 태그를 입력하세요.

               그러면 모바일화면에 딱 맞게 광고가 나오게 됩니다. 

               (안 넣을 경우 좌측에 여백이 생겨 화면과 약간 어긋나게 됩니다.)

두번째 팁 : 이라면 이 상태를 서식으로 저장해놓고 글 작성시마다 불러와서 작성하면 조금 더 편합니다.

9. 위와 같이 모바일 화면에서 광고가 나오는 것을 확인할 수 있습니다.

모바일 애드센스는 아직 클릭이 없어서 단가가 PC버전과는 어떻게 다른지는 정보가 없습니다. ^^;;

다음으로는 블로그에 검색용 애드센스를 다는 방법에 대해서 포스팅 하도록 하겠습니다.

밑의 추천 버튼을 클릭해주시면 조금 더 좋은 글로 보답하겠습니다.

(로그인 과정이 필요하지 않아요~! ^^)