F.Ko-Jiの「一秒後は未来」

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を利用した認証

(追記) 「アカウント情報」からドメインの登録が必要。AuthSubを利用するページのドメインを登録しておく必要がある。

なお、「AuthSub target path prefix does not match the provided “next” URL.」というエラーで認証できない場合は、このドメインの登録がうまくいっていない可能性があるので要注意。(追記ここまで)

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

<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ライブラリを使ってみた(データ取得編)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など