이전에 google spreadsheet를 db로 이용하여 조회수 확인하는 방법을 포스팅한 적이 있는데요.

    구글 스프레드시트를 데이터베이스로 이용하기 - 1.1 방문로그 기록 편

    티스토리 개별 포스트 조회수 및 순위 표시하기 - 구글 스프레드시트를 데이터베이스로 이용하기


    생각해보니 google analytics에 훨씬 정확한 정보가 있는데 굳이 방문로그를 왜 기록해야하나 싶어졌습니다.

    (방문로그 기록편에서는 호기롭게 이게 구글 애널리틱스보다 더 좋다!고 했지만 구글 애널리틱스가 훨씬 분석도 잘해주고 좋습니다..)


    구글 애널리틱스에 정보가 있으면 그걸 불러올 수만 있으면 되겠죠? 당연히도 구글애널리틱스는 여러가지 api를 제공하고있습니다. 

    그 중에 조회수 확인에 필요한  Analytics Reporting API V4를 이용해보도록 하겠습니다.


    구글 스프레드 시트를 이용하는 방법보다는 직관적이고 쉽습니다. (누군가에겐 더 어려울수도..)

    당연히도 구글 애널리틱스를 설치해서 이용중이라는 가정 하에 진행합니다.


    ※이 방법을 통해서는 구글애널리틱스 계정으로 로그인 중일 때만 조회수 확인이 가능합니다. 본인뿐만 아니라 다른사람에게도 조회수를 보여주려면 기존의 스프레드시트를 통한 방법을 이용하세요.

    준비사항

    API를 사용하기 위해서는 다음 과정을 따라야합니다.

    0. API대시보드에서 프로젝트 생성 및 Google Analytics Reporting API를 대시보드에 추가합니다.


    1. 사용자 인증 페이지에서 사용자 인증정보를 생성합니다.

    OAuth클라이언트ID를 만들어줍니다.

    유형은 웹애플리케이션, 이름은 아무렇게나 정해줍니다. 승인된 자바스크립트 원본은 블로그주소를 입력해줍니다. 맨뒤에"/"는 빼고 입력하도록 합니다,

    그러면 클라이언트 ID가 나타납니다 이걸 잘 복사해둡시다.


    2. Account Explorer를 통해 View ID를 잘 복사해둡니다.

    view아래에 있는 숫자가 View ID입니다.


    .

    HTML 및 JS 예시

    1. 조회수 확인에 쓸 버튼을 삽입합니다.


    <div class="getViews">조회수 확인</div>

    어차피 관리자만 볼 수 있기때문에 <s_ad_div>안에 삽입 했습니다.

    (<s_ad_div>는 티스토리에서 관리자 계정으로 로그인 했을 때 글수정,삭제같은 메뉴가 나타나는 부분입니다.)


    2. </body>윗줄에 스크립트를 삽입합니다.

    <script>

      // Replace with your client ID from the developer console. https://console.developers.google.com/apis/credentials

      var CLIENT_ID = 'client_ID';

      // Replace with your view ID. from https://ga-dev-tools.appspot.com/account-explorer/

      var VIEW_ID = 'view_ID';

      var DISCOVERY = 'https://analyticsreporting.googleapis.com/$discovery/rest';

      var SCOPES = ['https://www.googleapis.com/auth/analytics.readonly'];


      function authorize(event) {

        // Handles the authorization flow.

        // `immediate` should be false when invoked from the button click.

        var useImmdiate = event ? false : true;

        var authData = {

          client_id: CLIENT_ID,

          scope: SCOPES,

          immediate: useImmdiate

        };

        gapi.auth.authorize(authData, function(response) {

          if (response.error) {

    $(".getViews").text("인증필요");

          }

          else {

    $(".getViews").text("불러오는 중");

            queryReports();

          }

        });

      }


      function queryReports() {

        // Load the API from the client discovery URL.

        gapi.client.load(DISCOVERY

        ).then(function() {

            // Call the Analytics Reporting API V4 batchGet method.

            gapi.client.analyticsreporting.reports.batchGet( {

              "reportRequests":[

              {

                "viewId":VIEW_ID,

                "dateRanges":[

                  {

                    "startDate":"7daysAgo",

                    "endDate":"today"

                  }],

                "dimensions": [

                  {

                    "name": "ga:pagePath"

                  }],

                "dimensionFilterClauses": [

                  {

                    "filters": [

                      {

                        "dimensionName": "ga:pagePath",

                        "not": false,

                        "expressions": [

                          "\\"+location.pathname

                        ],

                        "caseSensitive": false,

                      }

                    ]

                  }],

                "metrics":[

                  {

                    "expression":"ga:hits"

                  }],

                "orderBys": [

                  {

                    "fieldName": "ga:hits",

                    "sortOrder": "DESCENDING",

                  }

                ],

              }]

            } ).then(function(response) {

              var parse = JSON.parse(response.body);

              var views = "지난 1주일간 조회수: "+parse.reports[0].data.totals[0].values[0];

              console.log(views);

      $(".getViews").text(views);

            })

            .then(null, function(err) {

                // Log any errors.

                console.log(err);

            });

        });

      }

     $(".getViews").click(function(){authorize(event);});

    </script>

    <script async src="https://apis.google.com/js/client.js"></script>

    파란색으로 표시된 client IDview ID는 앞에서 얻은 값으로 바꿔주세요.

    굵게 표시된 부분은 수정할 수 있는 쿼리입니다.

    자세한 내용과 문법은 https://developers.google.com/analytics/devguides/reporting/core/v4/rest/v4/reports/batchGet#reportrequest 여기를 참조하시고,

    쿼리가 어떤 결과를 불러오는지는 https://ga-dev-tools.appspot.com/query-explorer/ 여기서 확인할 수 있습니다.


    확인 예시

    관리도구 아래에 조회수 확인이 생겼습니다. 맨처음 클릭하면 


    위와 같이 인증창이 실행됩니다. 이 아이디는 구글 애널리틱스 아이디여야합니다.

    로그인하면 승인요청이 나타나는데 승인합니다.

    잘못된 아이디로 로그인했을 경우 구글에서 로그아웃한뒤 다시 시도하시면 됩니다.

    정상출력되는 모습입니다.


    공지사항 글 처럼 관리자도구가 없어서 조회수 확인 버튼도 보이지 않는경우,

    F12를 눌러 개발자도구 콘솔에서 authorize()를 입력하면 콘솔에도 나타납니다.

    (크롬에서 개발자도구에 콘솔이 없는경우 esc를 누르면 나타납니다)


    이 밖에도 구글 애널리틱스 API는 훨씬 다양한 기능을 지원합니다.

    이 글에서는 단순히 조회수만을 불러왔을 뿐이지만,

    dimension과 metrics, filter를 사용하여 구글 애널리틱스의 모든 정보를 불러올 수 있습니다. 활용하시는 분의 실력에 따라 가능성이 무궁무진해보이네요!

    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함

    • 2016.08.13 02:39

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.08.13 06:35 신고

        아 API관리자페이지에서 대시보드에 따로추가를 해야하나요?
        제경우는 따로 추가한적이없어서요.
        혹시 애널리틱스의 대시보드를 말씀하시는건가요?

    • BlogIcon md.sj
      2017.11.19 19:00 신고

      수고하십니다.
      이 스트립트 지금도 작동하는가요? 위 대로 따라했는데 조회수 클릭하고 인증 거치면 불러오는중 이라고 표시되고 결과값을 못가져오네요.
      콘솔보니까 결과값 url이 달라진것 같은데 확인좀 부탁합니다.

      • BlogIcon 뭐하라
        2017.11.19 19:05 신고

        네 지금도 그대로 사용중입니다.
        도움 드릴수 있을지 모르겠지만.. 오류메시지가 정확이 뭐였는지 알려주시면 한번 확인해보겠습니다

      • BlogIcon md.sj
        2017.11.19 19:14 신고

        cb=gapi.loaded_0:150 POST https://content-analyticsreporting.googleapis.com/v4/reports:batchGet?alt=json 403 ()

        {result: {…}, body: "{↵ "error": {↵ "code": 403,↵ "message": "Go…41996"↵ }↵ ]↵ }↵ ]↵ }↵}↵", headers: {…}, status: 403, statusText: null}

        이정도 입니다.

      • BlogIcon 뭐하라
        2017.11.19 19:24 신고

        가장먼저 구글애널리틱스에서 조회수 확인이 가능한지 살펴보시고,
        client_ID와 view_ID를 제대로 발급받고 넣었는지 확인해보세요
        그밖에는 오류 원인을 모르겠네요

      • BlogIcon md.sj
        2017.11.19 19:33 신고

        애날리틱스에는 원래부터 보고서를 통해 조회수 확인가능하지 않나요? 그리고
        클라이언트 아이디란게 길다란 문자열 맞죠?

        아래있는 클라이언트 보안 비밀키를 말하는거 아니죠?

        그렇다면 똑바루 했는데... 이상하네요 ㅠ

      • BlogIcon 뭐하라
        2017.11.19 19:38 신고

        네 맞아요 viewID에 보안비밀키넣으신건 아니죠?
        그렇다면 알수없네요.. 403은 서버에서 접근차단한것인데 키들이 오류가 있는것밖에 모르겠습니다..

      • BlogIcon 뭐하라
        2017.11.19 19:40 신고

        아 혹시 윗분이 댓글로 API에 대시보드를 추가해야한다는데 한번 해보시겠어요..?

      • BlogIcon md.sj
        2017.11.19 19:45 신고

        그럴리가요 id넣었구요? 대시보는 비어있네요. 근데 대시보드에 어떤 api를 추가해야 돼죠?

      • BlogIcon 뭐하라
        2017.11.19 19:49 신고

        제 경우는 Google Analytics Reporting API
        이게 추가되어있네요 추가해보시고 성공하시면 알려주세요!

      • BlogIcon md.sj
        2017.11.19 19:55 신고

        해결했네요 ^^
        Google Analytics Reporting API를 대시보드에 추가해야 하네요. 감사합니다.

        다른분들도 참고하세요.

      • BlogIcon 뭐하라
        2017.11.19 19:56 신고

        감사합니다 본문에 추가해야겠네요