XE독학하기 그 24번째 걸음-모바일 페이지에서 애드센스 광고 띄우기

안녕하세요?

지난번 포스팅에서는 XE홈페이지에서 애드센스를 띄웠는데, 아직 모바일 홈페이지에서는 뜨지 않습니다. 그래서 이번에는 모바일 홈페이지에서도 애드센스 광고를 띄울 수 있도록 하는 것이 이번 포스팅의 목표입니다.

우선 XE관리자 페이지에서 사이트 제작/편집 탭에서 사이트 디자인 설정으로 들어가서 아래와 같은 화면을 띄웁니다.

현재 사용중인 모바일 레이아웃인 Sketchbook5 mobile인데, 여기서 상세 설정을 누르도록 합니다.

우선 헤더 스크립트 항목에다가 구글 애드센스에서 얻은 반응형 배너의 코드를 입력한 다음, 어떻게 모바일 상에서 보이는 지를 알아보도록 합니다.

일단 광고가 뜨기는 떴는데, 무언가 그다지 좋은 모양으로 뜨지는 않는 것을 볼 수 있습니다. 그래서 이번에는 XE관리자 페이지에서 다음과 같은 항목에 구글 애드센스 코드를 입력합니다.

지금 사용중인 sketchbook5 mobile의 경우에는 [푸티설정]이라는 것이 있는데, 여기 빨간색 동그라미로 강조된 부분에다가 구글 애드센스 코드를 입력하도록 합니다.. 그 다음 저장을 누르고, [모바일 설정 저장]까지 다 누른 다음에, 결과가 어떻게 바뀌는 지 알아봅니다.

이번에는 깔끔하게 모바일 홈페이지의 하단에 나오는 것을 볼 수 있습니다. 비록 최 하단이라는 단점이 있기는 하지만, 그래도 이게 모바일 이라는 것을 생각해 보면, 제법 크게 나왔다는 것을 알 수 있습니다. 하지만 이렇게 나왔다고만 해서 만족하지 않고 이번에는 직접 수정을 들어가기로 하였습니다.

우선 m.layouts라는 폴더가 알FTP상에서 보여지고 있습니다. 여기서 m.layouts안에 들어가서 sketchboo5 mobile에 해당하는 폴더를 찾아 들어가도록 합니다. 여기서는 layout.html이 있었습니다.

위 스크린샷은 layout.html을 메모장으로 열어서 코드를 수정하는 장면입니다. 위에서 빨간색으로 가려진 부분이 구글 애드센스의 코드로, 우선 여기에 위치하면 괜찮을 것이라고 예상되는 부분에다가 구글 애드센스의 코드를 입력합니다.

하지만 어떻게 된 것인지 광고는 커녕, 제대로 메뉴조차 나오지 않는 것을 볼 수 있었습니다. 이건 광고삽입과는 별개로 다음과 같은 에러로 인해서 발생한 것이었습니다.

메인메뉴 항목에서 따로 지정을 하지 않자, 아무런 메뉴가 나오지 않는 문제점이 발생한 것이었습니다. 이제 main menu에 넣어서 결과가 어떻게 바뀌는지 살펴 보았습니다.

가장 극단적으로 최상위 메뉴 아래에 광고가 뜨는 것을 볼 수 있었습니다. 이 부분은 좋을 수도 있지만, 잘못하면 사용자에게 오클릭을 유도할 수도 있는 그다지 좋은 위치가 아니기에, 위치를 바꾸는 시도를 일단 해 보았습니다.

하지만 유감히도, 아무리 코드의 위치를 바꾸어도 위 스크린샷처럼 제대로 광고가 보이지 않는 위치에다가 구글 애드센스의 광고가 뜨는 것을 볼 수 있었습니다. 아무래도 XE 모바일 홈페이지에서는 하단에 구글 애드센스 광고를 띄우는 것이 한계라는 생각이 듭니다.