지난 포스팅을 통해 구글스프레드시트에 ajax로 기록하는 방법을 알아봤습니다.

    구글 스프레드시트를 데이터베이스로 이용하기 - ajax POST를 통한 기록 편


    이번에는 이것을 응용하여 방문 로그 기록하는 방법을 알아보겠습니다.


    방문로그는 기본적으로 방문시각, 방문한 페이지를 기록하게됩니다.

    구글애널리틱스를 설치하면 이런 방문로그 데이터를 모아 통계적으로 분석을 해주는데, 이런 방문로그를 직접 수집하는 것입니다.


    직접 방문로그를 수집할 수 있기 때문에, 실시간으로, 원하는 정보만 골라서 얻을 수 있습니다. (구글 애널리틱스도 완전히 실시간이 아니고, 전체 로그를 제공하지도 않죠)


    아래는 현재 이 블로그에서 수집된 로그의 일부입니다.


    기본적으로 Timestamp(방문 시각), path(방문페이지)를 기록하고있고, path만으로 알아보기 힘들어 title도 수집했습니다.

    visits는 한 session내에서 이 블로그에 방문한 횟수입니다. 그 옆의 sessionID값과 비교하면, 어떤 글을통해 처음 유입되었고, 어떤글로 이동했는지도 살펴볼 수 있습니다. (완전하지는 않습니다.)



    방문로그 기록 스크립트

    이미 이전 글에서 기록가능한 스프레드시트는 가지고 계실겁니다.


    스프래드시트의 1행에 Timestamp, path, title, visits, sessionID 를 순서대로 입력합니다.



    티스토리 HTML/CSS편집에서 skin.html의 </body>윗줄에 다음을 입력합니다.

    <script>

      if (!sessionStorage.visits) {

        var visits = 1;

        sessionStorage.visits = visits

      } else {

        var visits = sessionStorage.visits;

        visits++;

        sessionStorage.visits = visits

      }

      $.ajax({

        url: "웹앱URL",

        data: {

    path: decodeURIComponent(location.pathname),

    title : document.getElementsByTagName("TITLE")[0].text,

    visits : visits,

    sessionID : getCookie("visited") 

        },

        type: "POST"

      });

    </script>

    웹앱URL을 얻는 방법은 이전 포스트에 설명되어있으며 https://script.google.com/macros/s/~~~~~~~~~~~~~~~~~~~/exec 와 같은 형태를 갖고 있습니다.


    저장 후에 스프레드시트를 확인하시면, 실시간으로 방문로그가 기록되는 것을 확인할 수 있습니다.



    위의 항목 이외에도 원하는 항목을 얼마든지 추가하거나 제거할 수 있습니다.

    예를들어 유입로그(Referrer)를 기록하고 싶다면 스프레드시트에 'referrer'라는 열을 추가한 뒤, 

    ajax에서 data에 referrer:document.referrer 를 추가하면 됩니다.

    예) 

        data: {

    path: decodeURIComponent(location.pathname),

    title : document.getElementsByTagName("TITLE")[0].text,

    visits : visits,

    sessionID : getCookie("visited"),

    referrer : document.referrer

        },


    한계점

    이전 포스트에 언급했다시피 구글스프레드시트는 40만셀의 제한이 있습니다.

    현재 8열을 사용하고 있으므로 로그를 5만개까지 밖에 저장할 수 없습니다.

    그래서 로그가 가득차기 전에 수동으로 로그를 삭제해주어야합니다.

    저처럼 일 방문자수가 그리 많지 않은경우는 그렇다 치더라도, 일방문자수가 만단위인 분들은 매일 로그를 수동으로 삭제해주어야합니다.


    ※업데이트

    앱스크립트를 통해 주기적으로 오래된 데이터를 삭제하는 스크립트를 완성했습니다.


    구글 스프레드시트를 데이터베이스로 이용하기 - 1.1.1오래된 데이터 자동 삭제 스크립트




    .


    방문로그를 바탕으로 조회수, 조회수 순위 분석하기

    이 부분은 제가 엑셀을 체계적으로 배우지 못해서 부족한 부분이 많습니다.

    저보다 뛰어나신 분들이 많을 것이라 생각됩니다. - 효과적인 분석 방법을 아시는 분들은 알려주세요 ㅠㅠ


    방문 로그를 바탕으로한 조회수와 그에따른 순위

    분석 방법은 엑셀에서와 같습니다.


    A2에 입력할 함수는 =sort(unique(Sheet1!B2:B),unique(Sheet1!B2:B),true) 입니다.

    시트 이름은 본인에 맞게 고쳐서 사용하세요.


    B2에는 =COUNTIF(Sheet1!B:B,A2)를 붙여넣고 A열이 비어있지 않은 맨 아래칸까지 끌어주시면 됩니다.

    C2에는 =Rank(B2,B:B)를 입력하고 B와 마찬가지로 아래까지 끌어주시면 됩니다.



    다음 글에서는 DB에서 입력을 알아봤으니, 출력에 대해서 알아보겠습니다.


    구글 스프레드시트를 데이터베이스로 이용하기 - 2.Query 편


    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon 아릿다운장미
      2014.12.14 21:16 신고

      감사합니다~ 조회수알고싶었는데 덕분에 알려주신대로 다 설치했어요~~ 인제 방문자가 들어오면 기록남는거 보는일만 남았네요 ^^ 좋은정보 감사합니다.

    • BlogIcon Edgemine
      2017.02.22 21:23 신고

      저는 계속undefined만 나와요 ㅠㅠ

      • BlogIcon 뭐하라
        2017.02.22 21:27 신고

        스프레드시트의 1열의 데이터들을 대소문자 정확히입력했는지 확인해보시기바랍니다

    • BlogIcon Edgemine
      2017.02.22 22:07 신고

      https://drive.google.com/file/d/0B5RtPI6Vb0OgS3NNcHpuVENlRDQ/view?usp=sharing
      스프레드시트 사진입니다
      그리고 블로그에는
      </head>위에
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script>

      if (sessionStorage.visits === undefined) {

      var visits = 1;

      sessionStorage.visits = visits

      } else {

      var visits = sessionStorage.visits;

      visits++;

      sessionStorage.visits = visits

      }

      $.ajax({

      url: "제 스프레드시트주소",

      data: {"path": decodeURIComponent(location.pathname), "title":document.getElementsByTagName("TITLE")[0].text , "visits":visits,"sessionID":getCookie("visited"), "referrer":document.referrer },
      type: "POST"

      });
      </script>
      <script>
      $.ajax({

      url: "제 스프레드시트주소",

      data: {A:"a", B:"b"},

      type: "POST"

      });
      </script>
      요렇게 했습니다
      긴글 읽어주셔서 감사합니다^^

      • BlogIcon 뭐하라
        2017.02.22 22:17 신고

        <script>
        $.ajax({

        url: "제 스프레드시트주소",

        data: {A:"a", B:"b"},

        type: "POST"

        });
        </script>

        이부분은 삭제하셔야합니다

    • BlogIcon Edgemine
      2017.02.22 22:28 신고

      친절한 답변 정말 감사합니다~^^
      ㅠㅠ
      삭제도 해보고 별짓 다해봐도... (아래 소스는[endif]-->와 </head>사이의 소스입니다)
      <script>

      if (sessionStorage.visits === undefined) {

      var visits = 1;

      sessionStorage.visits = visits

      } else {

      var visits = sessionStorage.visits;

      visits++;

      sessionStorage.visits = visits

      }

      $.ajax({

      url: "스프레드시트",

      data: {"path": decodeURIComponent(location.pathname), "title":document.getElementsByTagName("TITLE")[0].text , "visits":visits,"sessionID":getCookie("visited"), "referrer":document.referrer },
      type: "POST"

      });

      </script>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <title> :: </title>
      </head>

    • BlogIcon 뭐하라
      2017.02.22 22:32 신고

      jquery소스는 스크립트보다 위에 삽입해야합니다.
      혹시나 본문에 data부분을 방금 수정해놨는데 그부분대로 다시적용도 해보시기바랍니다

      • BlogIcon 뭐하라
        2017.02.22 22:33 신고

        그리고 이전포스트에서 A와 B를 넣어보는 예제를 성공하신뒤에 이 글을 적용하신다는 전제하에 드리는말씀입니다~

    • BlogIcon Edgemine
      2017.02.22 22:41 신고

      흠...
      A B는 잘 나오던데
      저것만 하면 안되네요;;
      아마 제가 뭐를 잘못 건드렸나봐요...
      바쁘실텐데 신경 써 주셔서 감사합니다~^^

      • BlogIcon 뭐하라
        2017.02.22 22:42 신고

        스크립트를 head말고 body맨밑에 넣어도보세요~


    • 2020.03.24 21:49

      비밀댓글입니다


    • 2020.11.20 04:39

      비밀댓글입니다