XE 독학하기 그 23번째 걸음-구글 애드센스 광고 띄우기

안녕하세요?

이번 포스팅에서는 XE로 제작된 홈페이지에서 어떤 식으로 구글 애드센스 광고를 띄울 수 있는지 여부를 알아볼까 합니다. 우선은 사이트에 새로운 레이아웃을 설치하러 갑니다.

우선은 XE관리자 메뉴에서 쉬운설치를 통해서 밑줄을 친 두 종류의 스킨을 설치합니다. 그 다음으로는 XE관리자 메뉴에서 사이트 제작/편집 메뉴로 가서 [사이트 디자인 설정]탭을 누릅니다.

여기서 레이아웃 항목을 클릭한 다음 PC버전에서는 방금전에 설치한 레이아웃을 선택하도록 합니다. 그리고 상세설정을 클릭해서 아래와 같은 메뉴가 나타나도록 합니다.

위 스크린샷에 보이는 것과 같이 [4.위젯,배너,광고설정]으로 가도록 합니다. 여기 빨간색 동그라미로 표시가 된 곳에다가 구글 애드센스에서 얻어온 광고 코드를 복사해서 붙여넣기 하도록 합니다. 제 경우에는 반응형 배너라서 페이지의 크기에 따라 배너의 크기가 자동으로 조절이 되는 형식을 사용하였습니다.

레이아웃 형태가 기존에는 1단으로만 되어 있었는데, 이런 상황에서는 광고가 뜨지를 않으므로, 일단 3단으로 형태를 변경하였습니다. 하지만 여기서 예상치 못한 문제가 하나 발생하였습니다.

구글 애스센스 광고가 뜨는 것은 좋았는데, 문제는 사이트의 모양이 망가지는 결과가 초래된 것입니다. 그래서 사이트의 레이아웃을 원래 쓰던 레이아웃으로 되돌리고, 거기서는 어떻게 광고를 띄울 수 없는지 여부를 조사하게 되었습니다.

기존에 쓰던 XE Design Team-pure라는 레이아웃에다가 2단 스타일로 변경한 다음, 사이드 바 광고 란에다가 구글 애드센스의 반응형 광고 코드를 붙여넣기 했습니다.

우선 홈페이지의 메인 페이지로 나왔을 때 광고가 옆에 제대로 붙어 있는 것을 확인할 수가 있었습니다. 다음으로는 게시물을 읽을 때는 어떻게 나오는 지 여부를 살펴보기 위해서 임의의 게시물을 하나 클릭해 보았습니다.

게시물을 읽을 때도 사이드바의 광고는 문제없이 나오는 것을 확인할 수 있었습니다. 이로서 그누보드5에서 제가 어렵게 광고코드를 추가했는지는 모르겠습니다만, XE에서는 간단한 몇몇가지 조작만으로 구글 애드센스의 코드를 추가할 수 있다는 것을 알 수 있었습니다. 다음 포스팅에서는 모바일 페이지에서 광고를 추가하지 않았으므로, 광고를 추가해 보도록 하겠습니다.