구글 스프레드시트를 데이터베이스로 이용하기 - 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을 파란색 표시한 곳에 붙여넣습니다.


    이제 방문로그 기록하기 설치는 끝났습니다!



    .


    방문로그를 기초로하여 조회수 표시하기.


    먼저 스프레드시트를 웹에 게시하는 과정이 필요합니다.

    '파일'-'웹에 게시'를 클릭합니다

    게시버튼을 눌러 '게시됨' 상태가 된것을 확인합니다.


    이번엔 위에서 방문로그 기록에 쓴 웹앱URL과 다른 URL이 필요합니다. (구글 스프레드시트를 데이터베이스로 이용하기 - 2.1에 자세히 소개되어있습니다.)

    위에서 사본으로 만든 스프레드시트의 주소를 확인하여 key값을 복사해둡니다.
    혹시 닫아버렸다면 https://drive.google.com/drive/ 에서 찾을 수 있습니다.
    빨간 박스 부분이 key입니다.

    복사한 key값을 아래 url의 key대신 넣으세요.(띄어쓰기 들어가지 않게 주의)

    <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를 이용한 조회수 확인 버튼 만들기


    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon 아스트로9
      2015.03.30 05:08 신고

      안녕하세요 정말 자세하게 캡쳐까지 첨부해서 설명해주신 덕분에 마지막까지 수월하게 따라할 수 있었습니다. 감사합니다. 그런데 조회수 확인을 눌러도 전 아무것도 안뜨는데요. 혹시 막 설치하자마자 눌러서 안 뜨는 걸까요? 시간이 좀 지나고 나서 눌러야 숫자가 뜨는 건지 궁금합니다! 조금 늦은 댓글이라 봐주실지 모르겠지만 ㅠㅠ 어쨌든 다시 한 번 좋은 정보 감사드립니다~

    • BlogIcon WA.RMA
      2015.04.06 19:23 신고

      안녕하세요 .
      작성해주신 포스트는 잘 보았습니다.
      위에 방법으로 따라해서 적용까지는 했으나, 조회수 조회를 클릭하면 불러오기에서 무한 루프 상태입니다.
      결과가 나오지 않는 상태인데요 .
      혹시 해결방법이 있을까요 ?

      • BlogIcon 뭐하라
        2015.04.07 16:35 신고

        확인해보니 조회수 기록이 잘 안되고있네요.
        웹앱으 배포 과정에서 권한설정을 누구나로 했는지 확인해보세요
        스프레드시트 확인해보니 기록이 2개밖에 없어서 기록이 없는 게시물에선 확인이 안되네요. 기록이 있는 67번 게시글은 확인될겁니다

    • BlogIcon 팥_
      2015.04.26 12:44 신고

      안녕하세요, 친절한 게시물 감사합니다! 그런데 조회수 조회 버튼이 클릭이 되지 않네요 ㅠㅠ 잘 따라한 것 같은데 어디서 문제가 있었을까요?

      • BlogIcon 뭐하라
        2015.04.26 15:17 신고

        클릭이 안된다면 체크해볼게 몇가지 있습니다.
        1. 로그가 잘 기록되고 있는지 확인 - 보통은 로그가 기록되지 않아서 불러오는데 에러가발생합니다.
        2. 잘 기록되고 있다면 스프레드시트를 게시했는지 확인 - 불러올때 쓰는 url로 접속했을 때 json형식의 데이터가 나와야 정상입니다.
        3. jQuery 적용을 안해서.

        보통은 1번에서 에러가발생합니다. 기록이 잘 되고 있는지 확인해보세요

    • BlogIcon 모피우스
      2015.06.08 21:33 신고

      성공했습니다. 정말 멋진 분 같습니다.^^

    • BlogIcon 투야
      2015.06.19 23:39 신고

      정말 감사합니다 ㅎ 잘 적용했네요 ㅎ

    • BlogIcon Alice_bongbong
      2015.08.06 17:45 신고

      친절한 설명으로 무사히 끝까지 설정할 수 있었습니다 감사합니다.
      뒤늦은 댓글이라 답글을 달아주실지 모르겠지만 질문 남기고 갑니다 ㅠㅠ

      어떤 게시글은 바로바로 확인이 되고, 어떤 게시글은 로그가 있음에도 불구하고 불러오는중에서 멈춰있습니다.
      어떤 설정이 잘못되어서 그런건지 설명 부탁드려도 될까요?

      • BlogIcon 뭐하라
        2015.08.07 10:30 신고

        아마도 추측하건대
        카테고리를 눌렀을때, 즉 url이 블로그주소/카테고리
        이런식으로 나왔을때 조회수를 조회하면 오류가날겁니다.
        url이 포스트 번호일때, 예를들면 블로그주소/44 일때는 정상적으로 불러와질겁니다
        이를 방지하려면 티스토리 설정-화면설정에서 카테고리를 내용이 아닌 목록만 보기로 설정해주세요
        아 그리고 블로그주소형식이 숫자로 해야 제대로 작동할겁니다.
        지금은 /entry/포스트제목 형식으로 돼있네요

      • BlogIcon Alice_bongbong
        2015.08.10 12:41 신고

        꽤 오래된 글인데도 답글 달아주셔서 감사합니다ㅠㅠ 알려주신대로 적용해보도록 하겠습니다.

    • BlogIcon 카나리스
      2015.08.18 22:34 신고

      감사합니다 적용 완료했습니다~ ^^


    • 2015.09.07 10:19

      비밀댓글입니다

      • BlogIcon 뭐하라
        2015.09.07 14:17 신고

        기록이 안되고있는데요.
        방문로그 기록하기에서 웹앱으로 배포 과정이 잘 되어있는지 잘 확인해보세요
        확인 후에
        스프레드시트에 방문로그가 기록이 되는지 확인하면됩니다


    • 2015.09.18 09:43

      비밀댓글입니다

      • BlogIcon 뭐하라
        2015.09.18 11:58 신고

        스프레드시트에 접근이 안되네요~
        이번엔 두번째단계에서
        웹에 게시부분을 하셨는지 확인해보세요

        --------------------------------
        아 접근은 되는군요 하지만 로그가 없습니다. 기록되고있는 스프레드시트로 웹에게시과정부터 다시해보시기바랍니다~
        아마도 기록중인것과 불러오는 시트가 불일치하고있는것같네요


    • 2015.11.22 15:09

      비밀댓글입니다

      • BlogIcon 뭐하라
        2015.11.22 15:38 신고

        기록은 잘 되는데 불러오기에서 무한로딩인경우 다음 사항들을 점검해보시길
        1. 조회수 삽입 스크립트에서 ajax_url이 제대로 들어갔는지 확인
        2. 스프레드시트 웹에 게시가 제대로 이뤄졌는지 확인
        3. 블로그 주소체계가 숫자형식인지 확인


    • 2015.12.25 04:04

      비밀댓글입니다

      • BlogIcon 뭐하라
        2015.12.25 14:46 신고

        그냥 html의 맨마지막에 넣으시면됩니다~


    • 2017.03.01 04:10

      비밀댓글입니다

      • BlogIcon 뭐하라
        2017.03.01 07:07 신고

        네 티스토리 한개더만드는방법밖에없습니다