JavaScriptでGoogle Analyticsのデータを取得する方法

Google Analytics Data Export APIを使用すれば、Google Analyticsのデータを簡単に取得できます。ここではこのData Export APIを、JavaScriptから利用する方法について解説します。

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

HTMLのhead要素内に、以下の記述をします。

<!-- Google AJAX APIライブラリのインクルード -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

  // Google Analyticsライブラリのロード
  google.load( 'gdata', '1.x', { packages: [ 'analytics' ] } );

</script>

ライブラリのロード時のバージョンで「1.x」とすることで、メジャーバージョン1の最新版を指定したことになります。

また、このライブラリのリファレンスがGData JavaScript Client Libraryにあります。

認可 (Authorization)

データを取得するためには、Googleのアカウントを使用してGoogle Analyticsにログインする必要があります。

認可の方法にはAuthSubとOAuthがありますが、JavaScriptから認可を受けるにはAuthSubを使用します。Google Data APIの認可については、Authentication and Authorization in the Google Data Protocolが詳しいです。

ログインやログアウトには、google.accounts.userクラスのメソッドを使用します。

ログイン

Google AnalyticsのURLを与えてlogin()メソッドを呼び出します。このURLは頻繁に使用されるため、変数に格納しておきます。

var scope = 'https://www.google.com/analytics/feeds';

google.accounts.user.login( scope );

なお認証を得るためには、ログインページ上に同一ドメインに置かれた画像が表示されている必要があります。表示する画像に関する制約はなく、1ピクセルの透明な画像でも構いません。また見えている必要もないため、次のようにスタイルを設定すると良いでしょう。

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

ただの1ピクセルの画像ですが、必要ならば認証用の画像をダウンロードしてご利用ください。

ログイン状態を確認

checkLogin()メソッドで、ログインされているか確認できます。ログインされていれば認証トークンが、さもなければ未定義値が返されます。

var authenticationToken = google.accounts.user.checkLogin( scope )

ログアウト

google.accounts.user.logout();

アカウントフィードの取得 (Account Feed)

Google Analyticsのデータを取得するためには、プロファイルのIDが必要となります。よって先にそれを取得します。

まずAnalyticsServiceのオブジェクトを作成します。その引数にはアプリケーション名などの、任意の文字列を指定します。

var analyticsService
    = new google.gdata.analytics.AnalyticsService( 'ApplicationName' );

次にそのAnalyticsServiceのgetAccountFeedメソッドで、アカウントフィードの取得をリクエストします。2番目の引数には成功したときに呼び出される関数を、3番目にはエラーを処理する関数を指定します。

var feedUri = scope + '/accounts/default';

analyticsService.getAccountFeed( feedUri, HandleAccountFeed, HandleError );

アカウントフィードの取得に成功すると、AccountFeedオブジェクトを引数に関数が呼び出されます。AccountFeedのページに、フィードURLやプロパティについての解説があります。

function HandleAccountFeed( accountFeedRoot )
{
    var entries = accountFeedRoot.feed.getEntries();

    for( var i = 0; i < entries.length; i++ )
    {
        var entry = entries[ i ];

        document.write( entry.getTitle().getText() );                 // プロファイル名
        document.write( entry.getPropertyValue( 'ga:ProfileId' ) );   // プロファイルID
        document.write( entry.getPropertyValue( 'ga:AccountName' ) ); // アカウント名
    }
}

ここで取得できるプロファイル名やアカウント名は、Google Analyticsのレポート画面で次のように表示されているものです。


プロファイル名
アカウント名

エラーが返されたときには、引数のエラーオブジェクトからエラーの詳細を取得できます。

function HandleError( e )
{
    var errorMessage = 'There was an error!\n';

    if( e.cause )
    {
        errorMessage += e.cause.status;
    }
    else
    {
        errorMessage += e.message;
    }

    alert( errorMessage );
}
サンプルコード (accountFeed.js - Project Hosting on Google Code)

データフィードの取得 (Data Feed)

アカウントフィードによりプロファイルIDを取得できたならば、それを使用してgetDataFeedメソッドでデータフィードを取得できます。

データの取得条件をURLのパラメータで指定します。この指定方法については、カスタム レポートの解説が参考になります。

var feedUri = [
    scope + '/data',
    '?ids=ga:' + profileID,
    '&dimensions=ga:pageTitle,ga:pagePath',
    '&metrics=ga:pageviews',
    '&sort=-ga:pageviews',
    '&filters=' + encodeURIComponent( 'ga:country==Japan' ),
    '&start-date=2008-01-01',
    '&end-date=2008-12-31',
    '&max-results=100'
    ].join( '' );

analyticsService.getDataFeed( feedUri, HandleDataFeed, HandleError );
データフィード リクエストパラメータ
パラメータ 説明
ids プロファイルID (テーブルID)
dimensions※1 レポートのデータが分類されたカテゴリ ディメンションの定義
metrics※1 指標 ディメンションと指標 - アナリティクス ヘルプ
sort 並べ順。dimensionsかmetricsのパラメータで指定。負号を付加すると降順
filters フィルタ。レポート作成の条件を設定 (フィルタとは機能的に異なる)
start-date データ取得期間の最初。書式はYYYY-MM-DD
end-date データ取得期間の最後。書式はYYYY-MM-DD
start-index データ取得の開始番号。省略時は1
max-results データ取得の最大件数。省略時は1,000。上10,000
※1 dimensionsとmetricsの指定には、組み合わせに関する制限があります。
Data Feed Request

アカウントフィードと同様に、ここでDataFeedオブジェクト引数に関数が呼び出されます。

function HandleDataFeed( dataFeedRoot )
{
    var entries = dataFeedRoot.feed.getEntries();

    for( var i = 0; i < entries.length; i++ )
    {
        // Dimensions
        var dimensions = entries[ i ].getDimensions();

        for( var idx = 0; idx < dimensions.length; idx++ )
        {
            var string = [
                'Dimension Name  = ' + dimensions[ idx ].getName(),  // ディメンション名
                'Dimension Value = ' + dimensions[ idx ].getValue(), // 取得結果
                ].join( '\n' );
        }

        // Metrics
        var metrics = entries[ i ].getMetrics();

        for( var idx = 0; idx < metrics.length; idx++ )
        {
            var string = [
                'Metric Name  = ' + metrics[ idx ].getName(),   // 指標名
                'Metric Value = ' + metrics[ idx ].getValue(),  // 取得結果
                'Metric Type  = ' + metrics[ idx ].getType(),   // 結果の型
                'Metric CI    = ' + metrics[ idx ].getConfidenceInterval(), // 指標の信頼区間
                ].join( '\n' );
        }

        /* ディメンション名や指標名を指定しても取得できます。
         *
         * var pageTitle = entries[ i ].getValueOf( 'ga:pageTitle' );
         * var pageviews = entries[ i ].getValueOf( 'ga:pageviews' );
         */
    }
}

取得例

ディメンション

Dimension Name  = ga:pageTitle
Dimension Value = ネットテレビで動画ニュースを視聴 NetTV-News

Dimension Name  = ga:pagePath
Dimension Value = /software/nettv-news/index.htm

指標

Metric Name  = ga:pageviews
Metric Value = 2552
Metric Type  = integer
Metric CI    = 0
サンプルコード (dataFeed.js - Project Hosting on Google Code)

参考

利用例

実際の利用例やサンプルコードがJavaScript Interactive Samplesにあり、こちらもとても参考になります。

関連ページ