OctopressにGoogle Analyticsを導入する

Google Analytics


Google AnalyticsはGoogleが提供するアクセス解析ツールです。

サイトページ内にトラッキングコードと呼ばれるJavaScript コードを埋め込み、訪問者がサイトへアクセスした際の閲覧情報がGoogle Analyticsサーバへ送信される仕組みです。Webサーバのアクセスログ等を解析する等とは違い、開発者はこのトラッキングコードを埋め込むだけでアクセス解析ツールを利用できるという手軽さと、様々なアクセス情報を取得・閲覧できることが特徴です。

Octopressの場合、このトラッキングコードの大枠のコードがテーマのテンプレートHTMLファイルとして用意されているケースがあります。このような場合には_config.ymlのgoogle_analytics_tracking_id:という箇所にトラッキング IDを記述するだけです。

トラッキング IDとはUA-000000-01のような文字列で、データの送信先となるアカウントやプロパティを Google アナリティクス側で特定するためのIDです。

トラッキングIDの取得

先述したトラッキング IDを取得します。

Google AnalyticsからGoogleアカウントでログインし、アナリティクス設定 > 管理 > 新しいアカウント の順にアクセスし、サイト情報を登録してトラッキングIDを取得します。

取得したトラッキングIDを設定

Octopressでは既にGoogle Analytics用のテンプレートHTMLが用意されているテーマもあり、デフォルトのClassicや先日変更したoctostrap3でも同様です。

### Octopress Themesに組み込まれているGoogle Analyticsテンプレート

octopress
└── .themes
    ├── octostrap3
    |   └── source
    |       └── _includes
    |           └── google_analytics.html
    |
    └── classic
        └── source
            └── _includes
                └── google_analytics.html

従って、設定は_config.ymlのgoogle_analytics_tracking_id:の項に先ほど取得したトラッキングIDを記述して静的ファイルを再生成するだけでいいようです。

_config.yml
1

google_analytics_tracking_id: UA-54XXXXXX-1

静的ファイルの再生成とデプロイ

静的ファイルを再生成します。

1
2
3
4

rake generate

## ローカル環境で確認する場合はpreviewタスクも実行します
rake preview

GitHub Pagesへデプロイします。

1

rake deploy

確認

GitHub Pagesへアクセスした際に表示されるHTMLコードを確認し、HEADタグ内に以下のscriptコードが組み込まれていれば設定できています。

1
2
3
4
5
6
7
8
9
10

   <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-54XXXXXX-1', 'auto');
    ga('send', 'pageview');

  </script>

Google Analyticsのアクセス解析結果が表示させるまで24時間程度かかるので表示されるのを待ちましょう。