Google API Client Library for JavaScriptを使ってAnalytics APIに接続するメモ

ちょっと要件があって色々調べてました。そのメモなんですが、Google APIsの認証方式ってOAuth2だと思うのですが、OAuth2のRefresh Tokenだとかそういう所に関しては今回はノータッチです

でまるっきりやってる事は https://developers.google.com/analytics/resources/tutorials/hello-analytics-api と同じです。なので「英語ドキュメントなんて楽勝だぜ」ていう方はこの記事を読まない方が良いです

APIキー及びクライアントIDを取る

https://developers.google.com/console から設定を行なってAPIキー及びクライアントIDを取得する。でその際にServicesから今回Analytics APIにアクセスするのでAnalytics APIな所をONにしておく

index.html

Google API Client Library for JavaScriptを使ってAnalytics APIに接続して利用する側のJavaScriptを含むHTMLを作成する。要件として単純にプロファイル名とそのアクセス数を取って出すだけ

<html>
  <body>
    <button id="btn">Authorize</button>
    <div id="profiles"></div>

    <script>
      var apiKey = "[APIキー]";
      var clientId = "[クライアントID]";
      var scope = "https://www.googleapis.com/auth/analytics.readonly";

      var config = { "client_id": clientId, "scope": scope };

      function load() {
        gapi.client.setApiKey(apiKey);

        setTimeout(checkAuth, 1000);
      }

      function checkAuth() {
        config.immediate = true;

        gapi.auth.authorize(config, handleAuthorize);
      }

      function handleAuthorize(result) {
          if (result) {
            document.getElementById("btn").style.display = "none";

            gapi.client.load("analytics", "v3", initAnalytics);
          } else {
            document.getElementById("btn").addEventListener("click", function() {
              config.immediate = false;

              gapi.auth.authorize(config, handleAuthorize);

              return false;
            });
          }
      }

      function initAnalytics() {
        gapi.client.analytics.management.accounts.list().execute(handleAccounts);
      }

      function handleAccounts(results) {
        var accountId = results.items[0].id;

        gapi.client.analytics.management.webproperties.list({
          "accountId": accountId
        }).execute(function(results) {
          var profiles = document.getElementById("profiles");

          results.items.forEach(function(result) {
            var name = result.name;

            gapi.client.analytics.management.profiles.list({
              "accountId": accountId,
              "webPropertyId": result.id
            }).execute(function(results) {
              results.items.forEach(function(result) {
                gapi.client.analytics.data.ga.get({
                  "ids": "ga:" + result.id,
                  "start-date": "2012-09-05",
                  "end-date": "2012-09-05",
                  "metrics": "ga:visits"
                }).execute(function(results) {
                  var count = 0;

                  results.rows.forEach(function(result) {
                      count += parseInt(result);
                  });

                  var h2 = document.createElement("h2");
                  h2.innerText = name + " (" + count + ")";

                  profiles.appendChild(h2);
                });
              });
            });
          });
        });
      }
    </script>
    <script src="https://apis.google.com/js/client.js?onload=load"></script>
  </body>
</html>

変数名が色々かぶっててリーディング的にイタい事になってますが

でちょっと問題として、Chrome Extensionによってエラーが発生するとこれの処理途中で止まってしまったりするケースが発生する。実際に発生したケースとして、認可ウィンドウが許可を出した後に消えてくれないとか。とりあえずはGoogle API Client Libraryを使えば簡単にGoogleなサービスのAPIにアクセスするのも結構容易な模様げ

ちなみにGoogle APIに認可したサービスをチェックする場合は https://accounts.google.com/IssuedAuthSubTokens を見ると良いかも