QAOS.com | 구글 CSE의 인기 검색어 달기

구글 CSE의 인기 검색어 달기
게시일: 2007/08/24 | 글쓴이: doa | 10102 번 | 프린트 | 메일

CSE(Custom Search Engine)에서는 검색어에 대한 통계 또한 지원한다. 이 통계를 이용하면 일별, 주별, 월별 검색 통계를 확인할 수 있으며, 또 인기 검색어까지 확인할 수 있다. 국내 포털에서 지원하는 실시간 인기 검색어와는 다르지만 로컬 검색엔진에서 나름대로 사용할 수 있는 기능이다.

아직 시간대를 설정하는 기능을 지원하지 않기 때문에 어제의 인기 검색어가 아니라 그제의 인기 검색어가 뜨는 문제가 있지만 CSE를 로컬 검색엔진으로 달았다면 충분히 고려할만한 기능이다. 그런데 이 기능에는 두가지 문제가 있다. 첫번째는 UTF-8만 지원한다는 점이다. 따라서 필자의 홈페이지처럼 EUC-KR을 사용하는 홈페이지에서 사용하면 글자가 깨지는 문제가 나타났다.

두번째는 인기 검색어를 달 수 있는 코드를 지원하지만 문제는 이 코드를 사용하면 다음과 같은 오류가 발생한다는 점이다.

필자 역시 인기 검색어를 달려고 시도했지만 이 오류때문에 인기 검색어의 기능을 확인할 수 없었다. 그러다 뉴스 그룹에 올라온 글

을 보고 이문제를 해결할 수 있었다. CSE의 인기 검색어를 검색창이나 결과 창에 달려면 다음 절차를 따른다.

검색엔진 코드 확인 구글에서 제공하는 JS 파일과 코드 모두 바꿔야 하기 때문에 먼저 자신의 검색엔진 코드를 확인해야 한다.
1. My search engines/control pannel/Code를 차례로 클릭한다.
2. 코드를 복사, 붙여넣기 한 뒤 검색엔진 코드를 확인한다.
  코드확인 <input type="hidden" name="cx" value="013201085123733714985:0hks2nj4dgi" />

JavaScript 파일 변경 코드를 확인했으면 이제 JS 파일을 바꾼 뒤 자신의 서버에 올려야 한다.

query_renderer.js.txt를 내려받은 뒤 파일 이름을 query_renderer.js로 바꾼다.

메모장으로 이 파일을 연뒤 검색엔진코드를 전단계에서 확인한 자신의 검색엔진 코드로 바꾼다.

변경전

PopularQueryRenderer.prototype.render = function(queries) { 
  for (var i = 0; i < queries.popularQueries.length; i++) { 
    var a = document.createElement("a"); 
    a.setAttribute("href", queries.popularQueries[i].href); 
	a.appendChild(document.createTextNode(queries.popularQueries[i].query)); 
    var myDiv = 
	document.getElementById("queries_<SPAN style='color: red'>검색엔진코드</SPAN>"); 
    myDiv.appendChild(a); 
    myDiv.appendChild(document.createTextNode(" ")); 
  } 
};

변경후

PopularQueryRenderer.prototype.render = function(queries) { 
  for (var i = 0; i < queries.popularQueries.length; i++) { 
    var a = document.createElement("a"); 
    a.setAttribute("href", queries.popularQueries[i].href); 
	a.appendChild(document.createTextNode(queries.popularQueries[i].query)); 
    var myDiv = 
	document.getElementById("queries_<SPAN style='color: red'>013201085123733714985:0hks2nj4dgi</SPAN>"); 
    myDiv.appendChild(a); 
    myDiv.appendChild(document.createTextNode(" ")); 
  } 
};

자바스크립트의 코드를 바꿨으면 파일을 저장한 뒤 query_renderer.js 파일을 서버의 적당한 폴더(/includes)에 올린다.

인기 검색어 코드 변경 구글 CSE에서 제공하는 인기 검색어 코드는 바로 사용할 수 없다. 다음 절차에 따라 인기 검색어 코드를 바꾼 뒤 필요한 곳에 붙여야 한다.
1. CSE에 접속한 뒤 My search engines/ststistcs를 차례로 클릭한다.
2. Popular queries code의 코드를 클립 보드로 복사한 뒤 내용을 메모장에 붙여 넣고 다음처럼 바꾼다.
  변경전 <div id="queries_013201085123733714985:0hks2nj4dgi"></div> <script src="http://google.com/coop/query_renderer.js"></script> <script src="http://google.com/coop/api/013201085123733714985/cse/0hks2nj4dgi/queries/js?callback=(new+PopularQueryRenderer(document.getElementById(%22queries_013201085123733714985%3A0hks2nj4dgi%22))).render"></script>
  
  변경전 <div id="queries_013201085123733714985:0hks2nj4dgi"></div> <script src="http://qaos.com/includes/query_renderer.js"></script> <script src="http://google.com/coop/api/013201085123733714985/cse/0hks2nj4dgi/queries/js?callback=(new+PopularQueryRenderer()).render"></script>
  
  여기서 http://qaos.com/includes/query_renderer.js는 자신의 환경에 맞게 바꾸어야 한다.
코드 붙이기 전단계에서 바꾼 코드를 인기 검색어를 표시할 곳에 붙여넣는다.

이렇게 실시간 인기 검색어를 달고 검색을 실행하면 그림처럼 인기 검색어가 표시되는 것을 알 수 있다. 인기 검색어에 오르는 기준을 따로 설정할 수 있는 방법은 없으며, 10회 이상 사용된 검색어가 인기 검색어에 오르는 것으로 보인다.

참고로 발상의 전환이기는 하지만 생각만 잘하면 인기 검색어 역시 티스토리에 달 수 있다.

구글 CSE와 애드센스 연동하기 애드센스에서 사용할 수 있는 상품은 크게 콘텐츠용 애... (8404)	2007-08-24

구글 CSE 설정하기 이전 팁에서 구글 CSE(Custom Search Engine)에 대한 소개부터 간단... (11492)	2007-08-24

QAOS.com에 게시된지 1년 이상된 자료와 관리자가 공개한 자료는 누구나 제한없이 읽을 수 있습니다.
그러나 QAOS.com의 자료를 퍼가는 것은 금지하고 있습니다.

이 정보가 유용하다고 생각되시면 QAOS.com과 많은 다른 사람들을 위해 퍼가기 보다는 링크로 알려주시기 바랍니다.

세상사는 이야기