Google Analyticsランキングモジュールを表示してみよう
a-blog cms Ver.2.6.1からGoogle Analyticsと連携してエントリーのアクセスランキングのリストを表示することができるようになりました。このハンズオンは普段ご利用のGoogle Analyticsのアカウントが必要です。
ハンズオン内容
- Google API Consoleから「サービス アカウント ID」と「P12形式のファイル（証明書）」を取得する
- 「P12形式のファイル（証明書）」をサーバーにアップする
- Google Analyticsのアナリティクス設定にユーザーを追加する
- Google Analyticsランキングモジュールを表示する
作業場所
課題：Google Analyticsランキングモジュールを表示し、フィルターでエントリーのリストのみを表示する
普段ご利用のGoogle Analyticsと連携し、Google Analyticsランキングモジュールでエントリーのリストが表示されたら完成です。
Google API Consoleの設定
Google Analyticsとの連携の準備として、a-blog cms の管理ページ＞コンフィグ＞プロパティ設定 にあるGoogle Analytics API欄の「Service Account e-mail address」と「Client ID Key Location (p12)」の2つの情報が必要になります。「Service Account e-mail address」は、Googleのサービス アカウント キーを作成することで入手でき、「Client ID Key Location (p12)」は作成時パソコンに保存されたp12ファイルをサーバーにアップロードすることで確定します。
サービス アカウント キーの作成手順
1. Google API Console( https://console.developers.google.com/ )から、申請を行う必要があります。この時点でログインしているアカウントに関連づけられます。はじめにヘッダーの「プロジェクトを選択してください」から「プロジェクトの作成...」から新しいプロジェクトを作成を行います。
Google API Consoleの画面
プロジェクトを作成します
2. Analytics APIを有効にします。その他の一般的なAPIにあるAnalytics APIのリンクからAnalytics APIのページに移動し、「有効にする」をクリックします。
その他の一般的なAPIのAnalytics APIをクリックします
Analytics APIを有効にします
3.「認証情報を作成」から「サービス アカウント キー」を選択します。
「サービス アカウント キー」を選択します
4. サービス アカウント キーの作成を行います。サービス アカウントは「新しいサービス アカウント」を選択してください。わかりやすいサービス アカウント名（例：googleAnalyticsApi）を入力します。キーのタイプはP12を選択してください。
「新しいサービス アカウント」を選択し必要な情報を入力します
5. サービス アカウント キーの作成が完了すると、新しい秘密鍵というモーダルウィンドウが表示され、P12形式のファイル（証明書）がパソコンに保存されます。
サービス アカウント キーの作成が完了するとメッセージが表示されます
6. サービス アカウント IDを確認します。認証情報の「サービス アカウントの管理」からサービス アカウント一覧を表示します。先ほど作成したサービス アカウント名のサービス アカウント IDをメモしておいてください。
サービス アカウントの管理をクリックします
サービス アカウント IDをメモしておいてください
P12形式のファイル（証明書）をサーバーにアップロードする
サービス アカウント キーを作成した際にダウンロードしたP12形式のファイル（証明書）をa-blog cmsをインストールしているサーバーにアップします。ドキュメントルート以下にアップロードをするとブラウザからアクセスできてしまいますので、ドキュメントルートより上の階層にアップロードするのが望ましいです。
Google Analyticsの設定
普段ご利用のa-blog cmsのサイトのアクセスを収集しているGoogle Analytics のアカウントにログインをして、アナリティクス設定のユーザー管理から先ほどメモしておいたサービス アカウント IDのメールアドレスを「権限を付与するユーザー」に追加します。
Google Analyticsのアナリティクス設定からサービス アカウント IDを追加してください
a-blog cms 側の設定
Google Analyticsランキングを表示するための設定は大きく3つあります。
1. Google Analytics APIキーを登録
Google AnalyticsのAPIキーは管理ページ＞コンフィグ＞プロパティ設定 から設定できます。プロパティ設定画面の「ウェブサービス」からGoogle Analytics API欄に登録します。「Service Account e-mail address」は、先ほどメモしておいたサービス アカウント IDのメールアドレスを登録してください。「Client ID Key Location (p12)」には先ほどサーバーにアップしたP12形式のファイル（証明書）のパスを登録してください。入力欄の下にあるa-blog cmsが設置されているディレクトリのパスを参考にしてください。
「Client ID Key Location (p12)」は入力欄の下にあるa-blog cmsが設置されているディレクトリのパスを参考にしてください
2. テンプレートの編集
管理ページ＞コンフィグ から外部API連携の項目に、Google Analyticsランキングのモジュールがあります。スニペットを開いてテンプレートをコピーしてください。
コンフィグの画面
<!-- BEGIN_MODULE Api_GoogleAnalytics_Ranking -->
<!-- BEGIN notFound -->
<p>Not Found.</p><!-- END notFound -->
<ul><!-- BEGIN ranking:loop -->
<li>
<a href="（自分のブログのURL）{path}">[{views} views] {title}</a>
</li><!-- END ranking:loop -->
</ul>
<!-- END_MODULE Api_GoogleAnalytics_Ranking -->
3. モジュールのフィルターの設定
Google Analyticsランキングモジュールでは、表示件数、集計開始日、集計終了日、フィルターの設定ができます。フィルターは以下のコードを入力することよってランキングに表示する内容をエントリーのみにすることができます。
ga:pagePath=~/(.*)\.html
また、フィルターに以下のように記述すると特定のディレクトリーのみのリストにすることができます。
ga:pagePath=~/hoge/
ランキングが表示されました
以下のようにGoogle Analyticsランキングのエントリーのリストが表示されたら完成です。
Google Analyticsランキングが表示されました
おまけ
simple2016テーマであれば、ダッシュボードにGoogle Analyticsのセッション数のグラフを表示することができます。Google AnalyticsのビューIDを管理ページ＞ブログのカスタム情報からアクセス解析のGoogle Analytics View ID欄に、Google、Facebook、TwitterのAPIキーを取得してSNSログインを設定してみようのGoogle（ログイン）で設定したClient IDをGoogle Analytics API ClientID欄に設定してみてください。
対象テンプレート
- /themes/simple2016/admin/blog/analytics.html
- /themes/simple2016/admin/dashboard-left.html
simple2016テーマのブログのカスタムフィールド画面
Google Analyticsのアナリティクス設定のビューの画面
ダッシュボード