텍스트큐브에 구글 애드센스 설치하기

텍스트큐브닷컴에서 스킨 수정을 정식으로 제공함으로써 본 포스팅은 유효하지 않게  되었습니다. (2009.04.25)

텍스트큐브(textcube.com)에 위젯을 이용하여 구글 애드센스(AdSense, 구글 광고) 설치하기

[IE 8, IE 7, FF 3, 크롬 1, Opera 9, safari 4(528.16)에서 테스트 완료됨]

 

[버전 관리]

• 1.0 2009.02.23 최초 공개
• 1.1 2009.02.23 성능 개선: 모든 엘리먼트를 탐색하며 배열화 시키는 로직에서 한개라도 원하는 대상이 수집되면 바로 리턴 되도록 개선
• 1.2 2009.03.02 버그 수정: 방명록에서 발생하는 adsText 객체 null 스크립트 오류 수정
• 1.3.1 2009.03.22 IE8 호환성 향상: IE8에서 overflow:auto;스타일이 IE7을 포함하여 다른 브라우저와 다르게 표현됨으로 인해 해당 속성 제거 및 보완을 위해 광고를 화면에 보이기 위해 사용했던 display = 'block'를 'table'으로 교체(IE버전에 따라 처리)

 

 

서비스형 블로그 텍스트큐브에서는 스킨 수정기능이 지원되지 않고 있습니다.
그래서 본문이든 제목이든 마음에 드는 곳 에 구글의 애드센스 코드를 html코드로 바로 삽입 할 수는 없습니다.

그나마 사이드바에 위젯기능을 이용하여 조그만 하게는 삽입이 가능하겠지만 위치상 클릭으로 이어지기에는
너무나 먼 당신이지요.

그래서 어쩔 수 없이 javascrip을 이용하기로 결심하고 2시간 뻘짓해서 코드를 만들어 보았습니다. 방법 자체는 심플합니다.
텍큐 위젯에 포스팅 화면을 구성하는 엘리먼트(div 등)를 일일이 검색하여 원하는 div의 위치를 찾아 광고를 삽입하는 자바스크립트 코드를 넣어 준다는 아주 원시적이고 비 효율적이며 망측한 방법 입니다.(어쩔 수 없이 방문자의 브라우저에 부하가 약간~ 걸리게 됩니다.)

 

 

각설하고 예제를 통하여 설명하겠습니다.

 

하단의 예제는 위와 같이 제목 아래에 큰 2개의 사각형 텍스트 광고와 본문의 하단에 한 줄짜리 링크 광고를 넣는다는 전제의 예제입니다.

 

 

1. 먼저 애드센스를 사용 하시려면 반드시 텍큐의 꾸미기에서 한 화면에 1개의 포스팅만 나오도록 설정을 변경하세요.(이유는 차후 설명)
  - 꾸미기/스킨설정/한 페이지당 보이는 글 개수를 한개로 조정

2. 자신의 애드센스 계정으로 로그인 하여 광고를 생성한다.

  - 애드센스 설정/광고 가져오기… 생략.

  - 그림과 같이 3가지 크기와 종류로 만든다.

 

3. 애드센스의 삽입용 코드를 가지고 온다.

 

4. 하단의 소스에 자신의 애드센스 단위 코드를 조합한다.

  - 소스를 다운 받고 메모장이나 아무 텍스트 에디터로 파일을 연다.

    소스

invalid-file

  - <!-- 이곳에 상단 좌측의 텍스트 광고 코드를 삽입합니다. --> 를 수정

  - <!-- 이곳에 상단 우측의 텍스트 광고 코드를 삽입합니다. --> 를 수정

  - <!-- 이곳에 하단의 링크 광고 코드를 삽입합니다. --> 를 수정

 

5. 조합된 코드를 블로그에 HTML 위젯으로 설정한다.

  - 꾸미기/위젯/ 위젯추가 버튼 클릭 / HTML 코드 위젯 선택

  - 새로 생성된 HTML 코드 위젯에 설정버튼 클릭/ 4.에서 만든 코드를 붙여넣고 확인 클릭

  - 저장된 HTML 코드 위젯을 사이드바 1 이나 사이드바 2로 옮긴다.(사이드바 2의 가장하단 추천)

  - 저장 버튼을 클릭하여 위젯의 배치를 저장한다.

 

6. 자신의 블로그에서 정상 작동 여부에 대하여 확인한다.

 

여기까지 잘 따라 하셨으면 wake가 사용하고 있는 레이아웃으로 광고가 삽입됩니다.
디자인 측면의 레이아웃 설명은 제외 시켰습니다. (너무 방대하고 이 포스팅의 포인트는 아닙니다.)

 

 

여기부터는 위의 소스코드에 대한 푸념(?) 혹은 팁입니다.

 

방법 자체가 화면의 모든 엘리먼트들이 로드가 된 후(애드센스광고 포함) 애드센스를 우리가 원하는 위치로 옮기는 방식입니다. 그러다 보니 삽입된 위치에서 주변의 텍스트를 감지하기에는 좀 어려운지 광고와 본문 내용과의 정확도는 약간 떨어지는 듯 합니다. 그렇지만 애드센스의 경우 브라우저 타이틀명(title 태그의 속성, 즉 포스팅 제목이 되겠죠.)이 애드센스의 광고내용에 가장 큰 영향을 미치게 됨으로 대부분 별 문제 없이 광고가 출력됩니다.
(텍큐에서 포스팅 제목을 클릭하거나 글 목록에서 제목을 클릭하여 글을 읽을 때에 브라우저 타이틀바의 명칭이 바뀝니다. )

 

이런 원시적이고 비 효율적인 코드가 나온 이유는 텍스트큐브의 포스팅 화면의 html에는 본문이나 제목의 div에 id값이 없습니다. (물론 id 속성의 값은 document 내에서 유일해야 한다라는 기본적인 룰이 있기 때문이겠지요.)
그래서 눈을 돌려 찾아보니 스킨을 위해 정의되어 있는 class name 속성이 보였습니다. 그 class name 속성을 활용 하기로 마음먹고 결국 어쩔 수 없이 모든 엘리먼트를 검색하며 최초의 각 class name의 속성이 admin과 entry-content를 찾아 그것들의 자식 노드로 애드센스 코드를 삽입하기에 이르렀다는 것 입니다.

여기에서  검색 대상의 class name 속성이 admin과 entry-content 가 된 이유는 제가 원하는 광고 삽입의 위치가 이들의 자식(서브)노드로 제일 마지막에 광고를 추가를 하고 싶었기 때문입니다. 광고를 삽입하기 원하는 위치에 따라 바뀔 수 있을 것입니다. 이런 Customizing을 원하신다면 소스에 달린 주석을 참고하시어 작업 하시면 큰 어려움 없이 작업 가능하시리라 봅니다.

 

1.에서 한 페이지당 보이는 글 갯수를 1으로 조정한 이유는 애드센스는 하나의 화면에 같은 광고를 2번 이상 삽입이 불가능 하기때문에 가장 처음의 admin과 entry-content에 대하여서만 광고를 삽입하게 하였습니다. 결국 한 화면에 포스팅이 2개 이상 보여질 경우 가장 상단에 표시되는 포스팅에만 광고가 삽입되고 그 하단에 위치한 포스팅 들에는 광고가 출력되지 않습니다.

 

푸념으로 좀더 크로스 브라우징에 대한 지식이 있었다면 몇 십분 정도면 나왔을 코드가 참 어렵게 만들어졌구나 하는 생각이 작업을 마치고 나서 문뜩 들었습니다. 개발자란 어쩔 수 없군요.. ^^; 아는 것과 개발시간은 반비례 ㅎㄷㄷ..;