XE독학하기 그 25번째 걸음-모바일 홈페이지에 구글광고 띄우기 그2번째

안녕하세요?

지난번 시간에는 XE 모바일 홈페이지에 구글 애드센스 광고를 띄우는 것을 보여주었는데, 이번에는 이 광고를 조금은 더 다듬어 보도록 해 보겠습니다.

지난번 포스팅에서도 다루었지만, 알FTP로 접속을 하여서 XE폴더내에 있는 m.layout폴더 안에 있는 sketchbook5mobile에 있는 layout.html을 메모장으로 열어서 수정하는 것에 들어갔습니다. 여기서 [메인메뉴]라는 항목 아래에 우선 구글 애드센스 코드를 입력해 보았습니다.

우선 수정을 가한 layout.html을 원래 있던 폴더로 알FTP상에서 업로드 시켜서, 덮어쓰기를 합니다. 그리고 폰으로 어떻게 변화가 일어났는지를 확인합니다.

보기좋게 설치는 되었습니다만, 위치가 역시 오클릭을 유도할 수 있기에, 위치를 변경할 필요성이 있어 보인다는 생각이 들었습니다.

위 스크린샷에 보이는 것 처럼 이번에는 좀 더 아래로 내려온 부분에 구글 애드센스에서 얻어온 코드를 삽입하였습니다. 그리고 저장을 한 다음에, 알FTP상에서 업로드를 하여서 역시 원래 있던 layout.html을 덮어쓰기 하였습니다. 그 다음 폰으로 어떻게 변화가 생겼는지 알아 보았습니다.

이번에는 오클릭을 유도하지는 않는 위치이기는 하지만, 광고가 제대로 나오지 않는 문제점이 발생하였습니다. 이래서야 광고의 효과를 볼 수도 없으니, 하는 수 없이 방향을 선회하기로 결정하였습니다.

제가 원하는 것은 게시물을 읽을 때와 게시판의 글 목록을 볼때 구글 애드센스 광고를 띄우는 것입니다. 그 목적을 위해서 이번에는 모바일 레이아웃이 아닌, 게시판 모듈로 가서, 저장된 m.skins라고 모바일 스킨 폴더로 들어갑니다. 그리고 위 스크린샷에 보이는 것 처럼, 글 목록의 스킨으로 예상이 되는 list.html을 다운로드 받아서, 메모장에서 엽니다.

그리고는 본문이라는 내용 바로 아래에 구글 에드센스에서 얻어온 코드를 가져와서 붙여넣기를 하여서, 저장을 하고 알FTP를 이용, 원래 있던 폴더에다가 덮어쓰기를 하는 형식으로 업로드를 합니다. 그리고 스마트폰에서 어떻게 변경이 되었는지를 살펴보았습니다.

제 예상처럼 게시판의 목록 보기 상단에 광고를 띄워졌습니다만, 추가로 글을 읽을 때 상단에 광고가 여전히 노출이 되고 있는 것을 볼 수 있습니다. 이것으로 보아서, 한번의 조작으로 두마리 토끼를 한꺼번에 잡았다는 생각이 듭니다. 물론 이것은 XE게시판 모듈 스킨 중에서 모바일 스킨인 sketchbook5에 있는 list.html파일을 조작할 때의 이야기이고, 다른 게시판 모듈 스킨에서는 같은 결과가 나오지 않을 수도 있습니다.

다음으로는 모바일 화면에서 하단에 추가한 광고가 너무 높이가 크게 나와서, 보기가 그다지 좋지 않은 문제점이 노출되었습니다. 그래서 이번에는 XE관리자 페이지로 가서 [사이트 제작/편집]탭으로 가서 [사이트 디자인 설정]항목으로 들어갑니다.

여기서 모바일 레이아웃으로 사용되고 있는 sketchbook5 Mobile의 상세설정을 누릅니다. 그리고 이전에 푸터 설정으로 하단에 추가한 구글 애드센스 코드에 다음과 같은 코드를 추가합니다.

<div style="width:100%;height:5%">

구글 애드센스 코드

</div>

이런식으로 구글 애드센스 코드의 첫 머리와 끝 꼬리에 div태그를 붙여서, 넓이는 100%로 하되, 높이는 전체 높이의 5%만으로 하도록 한다는 식으로 스타일을 짜서 코드를 수정했습니다.

일단 코드의 효과인지 광고의 높이가 낮아지기는 낮아졌습니다. 하지만 이것도 새로고침을 여러번 하다보면 가끔가다가 광고의 높이가 큰 광고가 뜨는 경우도 있었습니다. 그래서 100%는 아니지만, 어느정도는 광고의 크기를 조정하는 데는 성공했습니다만, 완전히 통제가 되지 않는 것을 볼 수 있었습니다.

완전히 마음에 들지는 않지만, 그래도 어느정도 모바일 홈페이지상에서 광고를 통제할 수 있는 것만으로도 많은 성과라는 생각이 듭니다.