Google Analytics APIのJavaScriptライブラリを使ってみた(準備/認証編)

Google Analytics APIがリリースされたということで、Googleから提供されているJavaScriptクライアントライブラリを使ってみた。

とりあえず使い始めと認証のところをざっとまとめておく。

ライブラリのインクルード

まずは GData のライブラリをロードすれば良いようなので、

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("gdata", "1.x");
</script>

を head タグの中に書く。そしてAnalyticsのサービスオブジェクトを生成する。

service = new google.gdata.analytics.AnalyticsService('sample');

このserviceを使ってGDataのフィードをリクエストしたり、データを取得したりできる。引数の文字列はなんでもいいっぽい。

AuthSubを利用した認証

データを取得するにはログインしてもらう必要がある。最初はログインしていない状態なのでログイン用のボタンを置く。

<input type="button" value="ログイン" onclick="login()" />

onclickに割り当てた login() 関数は以下のように書く。

function login() {
    var token = google.accounts.user.login('https://www.google.com/analytics/feeds');
}

実は、これだけではだめ。ログインしようとすると、

An image of the same domain is required on this page for authenticated reads and all writes.

というエラーが出る。ちょっとハマったが、ドキュメントには次のように書かれている。

Note: For the JavaScript client library to make authenticated Analytics requests in a web browser, your page must contain an image that's hosted at the same domain as your page.

どうやらページ上に画像を1個読み込ませておかないといけないらしい。その画像の存在確認をしているのだろうか。とりあえず1pxの画像を用意してアップロード。

<img src="google_auth.gif" width="1" height="1" style="position:absolute; top:-1000px;" />

こんな風にimgタグを書いておいた。これでログインはうまくいく。不思議不思議。ちなみにログアウトの処理は以下のようにする。

google.accounts.user.logout();

ログアウトしないとCookieが2年間残るらしい。

ログインしているかどうかの確認

ログインしているかどうかで処理を分けたい場合は、以下のメソッドでログイン状態をチェックできる。

google.accounts.user.checkLogin('https://www.google.com/analytics/feeds');

このメソッドの返す値が空であればログアウト状態。引数のURIは先ほどから何度も登場するので変数に入れておくといい。

var scope = 'https://www.google.com/analytics/feeds';
function isLogin() {
    if (google.accounts.user.checkLogin(scope) == "") {
        return false;
    }
    return true;
}

こんな感じでログイン状態をチェックできる。

とりあえず準備と認証周りはこんな感じ。次回はプロファイルやデータの取得など。やる気が残っていれば。

待てない方はこちらに適当なサンプルを作ってみたのでどうぞ。
Google Analytics API サンプル

# そういえばJavaScriptなのでローカルからも使えるかなと思ったが、うまく認証できなかったので、サーバ上でファイルを編集しつつ開発するのがよさそう。

続き → Google Analytics APIのJavaScriptライブラリを使ってみた(データ取得編)