티스토리 개별 포스트 조회수 및 순위 표시하기 - 구글 스프레드시트를 데이터베이스로 이용하기
구글 스프레드시트를 데이터베이스로 이용하기 - 1. ajax POST를 통한 기록 편
구글 스프레드시트를 데이터베이스로 이용하기 - 1.1 방문로그 기록 편
구글 스프레드시트를 데이터베이스로 이용하기 - 2.Query 편
구글 스프레드시트를 데이터베이스로 이용하기 - 1.1.1오래된 데이터 자동 삭제 스크립트
티스토리에 오류 제보하기 버튼을 만들어보자 - 구글 스프레드 시트를 데이터베이스로 이용하기
구글 스프레드시트를 데이터베이스로 이용하기 - 2.1 ajax로 json데이터 받아오기편
오늘은 티스토리에 오류제보하기 버튼을 만들어보자에 이은 두번째 응용편입니다.
1.1의 방문로그 기록편과 2.1의 ajax로 json데이터 받아오기편을 종합하면 티스토리 개별포스트 조회수 및 순위 표시하기가 가능합니다!
두 포스트를 이해하시면 직접 만들 수도 있지만, 이번 포스트에서는 더 쉽게, 따라하기만 해도 완성되도록 재구성해봤습니다.
방문로그 기록하기
https://docs.google.com/spreadsheets/d/1kBc5fBpYH0eGFHeIyfzMlIWkJqq4YcT6F3dHgyQCwtg/edit?usp=sharing
먼저 링크로 접속합니다.
파일 - 사본만들기를 선택합니다. (구글 로그인이 필요합니다.)
사본이 만들어졌습니다. 원본링크는 닫으셔도 됩니다.
이 사본은 본인의 구글드라이브에 존재하고, 제목은 얼마든지 수정하셔도 됩니다.
도구-스크립트 편집기로 들어갑니다.
스크립트는 이미 작성되어있습니다.
실행 - setup 을 선택합니다.
계속
동의를 해줍니다.
(구글 스프레드시트에 데이터 기록을 위한 동의작업입니다.)
동의 후에 다시한번 실행-setup을 해줍니다.
시계모양 아이콘을 선택하여 위와같이 새 트리거를 추가합니다.
cleanUp - 시간기반 - 시간타이머 - 2시간마다 - 저장.
게시 - 웹앱으로 배포를 클릭합니다.
프로젝트버전은 새버전저장, 앱을실행할 사용자는 '나', 웹에 액세스할 수 있는 사용자는 누구나(익명 사용자 포함)을 선택하고 배포합니다.
완성되었습니다. 현재웹앱 URL이라고 표시된 주소를 복사해둡니다.
이제 티스토리 스킨편집 - HTML/CSS편집으로 들어가 skin.html에서 </body>를 찾아 윗줄에 다음을 붙여넣습니다.
<script>
// 구글 스프레드시트에 방문로그 기록 - http://nubiz.tistory.com/
$.ajax({
url: " 여기에 복사한 주소 붙여넣기 ",
data: {
path: decodeURIComponent(location.pathname),
title: document.getElementsByTagName("TITLE")[0].text,
referrer: decodeURIComponent(document.referrer)
},
type: "POST"
});
</script>
위에서 복사해둔 웹앱URL을 파란색 표시한 곳에 붙여넣습니다.
이제 방문로그 기록하기 설치는 끝났습니다!
방문로그를 기초로하여 조회수 표시하기.
'파일'-'웹에 게시'를 클릭합니다
게시버튼을 눌러 '게시됨' 상태가 된것을 확인합니다.
<script>
//주간 조회수 삽입
var url=location.pathname;
function getViews(){
$("div.getViews").html("불러오는 중..");
if(url!="/"){
var ajax_url = "https://spreadsheets.google.com/feeds/list/key/2/public/basic?alt=json-in-script&callback=?";
$.getJSON(ajax_url,function(data){
var entry=data.feed.entry;
for(var i in entry){ // 노드 탐색
if(entry[i].title.$t == url){
var views = entry[i].content.$t.match(/views: (\d+)/)[1];
var ranking = entry[i].content.$t.match(/rank: (\d+)/)[1];
break;
}
}
$("div.getViews").html("주간 조회수 : "+views+"회, 주간 순위 : "+ranking+"위");
});
}
}
</script>
완성된 스크립트를 skin.html의 아까 첨가한 스크립트 아랫줄에 붙여넣습니다.(</body>윗줄)
마지막으로 클릭하여 조회수를 확인할 수 있는 버튼을 skin.html의 원하는 곳에 삽입합니다.
<div class="getViews" onclick="getViews();">조회수 확인</div>
예를들어 ##_article_rep_##아래에 붙여넣으면 본문 아래 표시되겠죠.
끝났습니다!
방문로그가 어느정도 채워지기를 기다려보세요~!
유의사항
- 나쁜용도로 쓰지 마세요!
- 일주일 페이지뷰가 10만이 넘는분들은 스프레드시트-스크립트 편집기에서 아래쪽 cleanUp함수부분에서 삭제할 날짜를 좀 줄이셔야합니다.
- 스킨에 jQuery가 적용되지 않은경우, </head> 윗줄에 다음을 붙여넣으세요. (대부분의 반응형 스킨에서는 필요 없습니다.)
<script>window.jQuery || document.write('<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"><\/script>');</script> - 추가항목 기록을 원하시면 구글 스프레드시트 데이터베이스로 이용하기 1편을 참조해주세요.
- 포스팅수가 1000개가 넘어가는 경우 Sheet2에서 아래쪽에 1000행 추가를 해주신 후, B,C열 아래쪽에 들어있는 함수를 2000행까지 끌어주세요.(엑셀 써보셨으면 아시죠?)
- Sheet2에서 정렬을 시도하지마세요. 정렬을 하려면 시트3을 만들어서 하시기 바랍니다
2016년 7월 현재는 아래 방법을 사용중입니다.
구글 애널리틱스 api를 이용한 조회수 확인 버튼 만들기
