2014 年も終わりなので Google Analytics API を使ってアクセス数の多いページを取得してみた - しばやん雑記 を今年最後にしようと思ったんですが、アクセス数の多い記事の情報を JavaScript と OAuth 2 でも取れるのではないかと思ったので、実際にサービス化してみました。
使い方は単純で、OAuth 2 でログインしてドロップダウンから取得したい Web プロパティを選択し、生成ボタンをクリックするだけで終わりです。
数秒後には実行結果がはてな記法、HTML、Markdown で出力されるので、適当に再利用してください。
実装の話
Google API を JavaScript から使う場合にはライブラリを読み込みます。API キーにだけ注意。
<script> var apiKey = '公開 API へのアクセスキー'; function handleClientLoad() { gapi.client.setApiKey(apiKey); } </script> <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
API キーは OAuth 2 のクライアントシークレットとは別物です。間違えると 1 時間ぐらい無駄にします。
OAuth 2 認証はクライアント ID とスコープを指定して authorize メソッドを呼び出します。これも同じようにコールバック先で成功したか失敗したか判別します。
var clientId = '********'; var scopes = 'https://www.googleapis.com/auth/analytics.readonly'; gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: false }, function(result) { if (result && !result.error) { // ログイン成功 } });
OAuth 2 で認証が完了したら API を呼び出せるようになります。
Google Analytics API を使う前に load メソッドでバージョンを指定して、ライブラリを追加で読み込む必要があります。コールバックが呼ばれた後に使えるようになります。
gapi.client.load('analytics', 'v3', function () { var req = gapi.client.analytics.management.profiles.list({ 'accountId': '~all', 'webPropertyId': '~all' }); req.execute(function (res) { self.webProperties(res.items); }); });
この例では現在の Google アカウントに関連付いている Web プロパティをすべて取得します。この実行結果にビュー ID や Web サイトの URL が含まれているので、PV を取れるようになります。
とりあえず基本的な流れはこんな感じです。今度こそ今年最後の記事になります、良いお年を。