3ステップでオリジナルのGoogle Analyticsレポート画面を作成できる「Google Analytics Embed API」

Google AnalyticsにEmbed APIがあるのをご存知でしょうか。
これはGoogle公式のAPIで、利用すると難しい知識がほとんど不要で、知りたい数値を簡単にグラフ化してもらえちゃいます。

というわけで、このEmbed APIを紹介します。
What Is The Embed API - Overview - Google Analytics -- Google Developers
3ステップでオリジナルのGoogle Analyticsレポート画面を作成できる「Google Analytics Embed API」

下準備 利用するためには、まずAnalytics APIを有効にすることとclient IDの取得が必要です。
Analytics APIの有効化

  • Google Developers Consoleへ。
  • ・適当なプロジェクトを作成。
  • ・メニューから「APIと認証」にあるAPIをクリック。
  • ・Analytics APIを探してステータスを「ON」に変更します。
3ステップでオリジナルのGoogle Analyticsレポート画面を作成できる「Google Analytics Embed API」

client IDの取得
続いて「認証情報」に移り、「新しいクライアントIDを作成」を実行します。
3ステップでオリジナルのGoogle Analyticsレポート画面を作成できる「Google Analytics Embed API」 3ステップでオリジナルのGoogle Analyticsレポート画面を作成できる「Google Analytics Embed API」・ さてこれで準備が完了したので、記述に移ります。

レポート画面作成 #1: APIライブラリをロード

<script>
(function(w,d,s,g,js,fs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));
</script>

#2:表示させるためのHTMLを記述

<div id="embed-api-auth-container"></div>
<div id="chart-container"></div>
<div id="view-selector-container"></div>

#3:コードを記述

<script>
gapi.analytics.ready(function() {
gapi.analytics.auth.authorize({
container: 'embed-api-auth-container',
clientid: 'クライアント ID', //上記で取得したものです。
});

//IDを選択する要素
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector-container' //STEP2で3個目に記述したdivのidです。
});

viewSelector.execute();

//データ取得
var dataChart = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:sessions', //セッションをベース
dimensions: 'ga:date', //日付で見る
'start-date': '30daysAgo', //30日前から
'end-date': 'yesterday' //昨日まで
},
chart: {
container: 'chart-container',  //STEP2で2個目に記述したdivのidです。
type: 'LINE', //グラフのタイプ(PIE、COLUMN、TABLE、GEOなどがあります)
options: {
width: '100%' //要素幅
}
}
});

viewSelector.on('change', function(ids) {
dataChart.set({query: {ids: ids}}).execute();
});

});
</script>

なお、ディメンションなどは下記で確認ができます。
Dimensions & Metrics Reference - Google アナリティクス -- Google Developers

これらを組み合わせて行くことで、自分で確認したい数値を簡単に見ることができます。
同じようなことはレポート機能などを利用することでもできますが、
Embed APIを利用すると、自分で見たいディメンションで区切れて自由にデザインできるところが便利です。
例えば、ランディングページにおいて、直帰率や新規訪問率などを見るためには下記のようにすればいいです。
query: {
'dimensions': 'ga:landingPagePath',
'metrics': 'ga:sessions,ga:entranceBounceRate,ga:avgSessionDuration,ga:percentNewVisits',
'sort': '-ga:sessions',
'start-date': '30daysAgo',
'end-date': 'yesterday',
'max-results': '10'
},

Google Analytics Embed APIを活用して自分なりのレポート画面を作ってみましょう。

sponsors

「3ステップでオリジナルのGoogle Analyticsレポート画面を作成できる「Google Analytics Embed API」」をシェアする

記事作成:
記事URL:

TOP > > > 3ステップでオリジナルのGoogle Analyticsレポート画面を作成できる「Google Analytics Embed API」