Google Analytics API と JavaScript クライアントを使って人気記事ランキングを作る Web サービスを作ってみた

2014 年も終わりなので Google Analytics API を使ってアクセス数の多いページを取得してみた - しばやん雑記 を今年最後にしようと思ったんですが、アクセス数の多い記事の情報を JavaScript と OAuth 2 でも取れるのではないかと思ったので、実際にサービス化してみました。

2017 年の人気記事ランキング生成

使い方は単純で、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 を取れるようになります。

とりあえず基本的な流れはこんな感じです。今度こそ今年最後の記事になります、良いお年を。