Google Analyticsアクセス解析をJugemブログで利用する方法(HTML)

2013/08/27 2014/11/22

Google Analytics™は皆さんご利用でしょうか。
こうした優れたアクセス解析ツールを各社無料ブログで利用したい
そう思うことはよくあることでしょう。
今回はJUGEMブログ™でHTMLの直接編集をして、
Google Analyticsを利用する方法をご紹介します。

HTMLの直接編集を行わずに、
フリースペースを用いて利用する方法は以下でご紹介しています。
Google Analyticsアクセス解析をJugemブログで利用する方法(フリースペース)

他社の無料ブログでどのように設定するのかなどが、
気になるようでしたら以下の投稿をどうぞ。
無料ブログ各社のGoogle Analytics利用可否と方法

はじめに

無料ブログには既に独自のアクセス解析ツールが付属していて、
サービスを始めるとともにすぐにアクセス数等が確認できて便利なものです。
しかしこうした標準のアクセス解析ツールでは、
あくまでも標準で提供された内容のみが確認でき、
もっと詳細に解析データを確認したいと思っても、確認することができません。

そこで、アクセス解析でもっとも普及しているであろう、
Google Analyticsを利用しようと思うわけです。

GoogleAnalyticsをJugemで！

利用規約上問題はないか

Jugemブログといった無料ブログサービスなどの、
外部Webサービスを利用するにあたって、
まず確認しなければならないことは利用規約です。

Google Analyticsアクセス解析をJugemブログで利用する上の規約確認

確認した感じとして、特に問題があるような感覚はありませんでしたが、
実際に利用される際には、各自ご確認をお願いします。

Google Analyticsコードの取得

Google Analyticsにてトラッキングコードを取得する方法は、以下の投稿を参考にしてください。
GoogleAnalyticsの新規ユーザー登録
 GoogleAnalyticsのユニバーサルアナリティクスコードを取得する(追加)

尚、今回は今後主流となるであろう、
Universal Analyticsによるプロパティーを利用した、
Universal Analyticsトラッキングコードでご説明します。

取得したUniversal Analyticsトラッキングコードは以下のようなソースです。

<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-42XXXX93-12', 'jugem.jp');
  ga('send', 'pageview');

</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-42XXXX93-12', 'jugem.jp');

ga('send', 'pageview');

</script>

アナリティクスのトラッキングコードが上記のものと違っている場合には、
貴方の利用しているトラッキングプロパティーが、
標準アナリティクスを採用していることになります。

貼り付けるソースはどちらでも構いませんのでご利用のソースを貼り付けてください。
標準アナリティクスについては以下の投稿を参照ください。
GoogleAnalyticsの標準アナリティクスコードを取得する(追加)

JUGEMブログに対する設定

基本的にGoogle Analyticsは<head>タグ内にコードを記述することを推奨しています。
この推奨する実装方法を採用するならば、
直接HTMLを編集して実装するのがベストと言えます。

直接HTMLを編集する方法

直接HTMLを編集せずにJUGEMブログを利用している人は、ほぼいないと思いますが、
HTMLを編集してしまうということには、
以後のデザインの変更時には、変更箇所を新しいテンプレートなどに、
移植する覚悟をしておく必要があります。

当然ながら、もうデザインはこれ以後、大幅に変更しない！と、
決めている人は何でも自由に変更できる自由度がJUGEMのメリットですね。

HTMLの編集前には、今利用しているテンプレートを複製し、
編集前の状態を保存してから、編集を行うようにしましょう。

複製の方法をご存じでない方は、以下の投稿を参考にしてください。
JUGEMブログでテンプレートをコピー(複製)する方法

これからは既に複製が終わっているものとして話を進めます。

ブログ管理のテンプレート編集

新規投稿画面より[デザイン]をクリックします。

ブログのHOME画面より[デザイン]をマウスオーバーして表示される
[HTML ・CSS編集]をクリックします。

HTML・CSS編集の選択

開いたテンプレート編集の画面で
Google Analyticsのトラッキングコードを挿入しますが、
開いているテンプレートは現在適用されているものです。

もし現在適用されているテンプレート以外を編集する場合は、
[テンプレート一覧に戻る]をクリックしてテンプレート一覧を開きます。

HTML編集画面

開いたテンプレート一覧から編集したいテンプレート名をクリックします。

テンプレートの再選択

開いたテンプレート一覧の画面では、
今選択した編集対象のテンプレート名が表示されています。

再選択テンプレートの確認

では、トラッキングコードの挿入を行います。
テンプレート編集画面に表示されている[HTML編集フォーム]の中で、
</head>のすぐ上の行あたりに、
Google Analyticsのトラッキングコードを貼り付けます。

貼り付けが終了したら[HTMLを編集]をクリックして保存します。

トラッキングコードの貼り付け

保存が正常に終了すると、メッセージが表示されます。

HTML保存メッセージ

表示の確認

ブログをブラウザで開き、正常に表示されることを確認します。
Webページのソースを開き正しくGoogle Analyticsのトラッキングコードが
出力されていることを確認します。

Webページの確認

トラッキングの確認

ブログをブラウザで開き、画面に表示します。
Webページのソースを確認すると設定した通りに、
トラッキングコードが挿入されていることを確認できます。

Google Analyticsのレポートをすぐに開き、
[リアルタイム]－[サマリー]をクリックして現在のユーザー数を確認します。

正しくトラッキングが出来ている場合には、
自分のアクセスがグラフに表示され、１人が表示されているはずです。

GoogleAnalytics動作の確認

さいごに

こうしてHTML を直接編集して、様々な機能を利用できる無料ブログは少なく、
他社の無料ブログでは、JavaScriptの実行すら行う方法がなく、
こうしたGoogle Analyticsの利用が困難なブログも多くあります。

自由度の高さは、長くこのサービスを利用して、
今後の希望をより多くかなえていける環境になると思います。

もっとさっくりと挿入したいと思った方は、フリースペースを利用する方法も可能です。
Google Analyticsアクセス解析をJugemブログで利用する方法(フリースペース)

他社の無料ブログでどのように設定するのかなどが、
気になるようでしたら以下の投稿をどうぞ。
無料ブログ各社のGoogle Analytics利用可否と方法

JUGEMは株式会社ｐａｐｅｒｂｏｙ＆ｃｏ．の
登録商標（第４８５０２２４号及び第４８８３７２１号）です。
JUGEMロゴ、アイコンその他のマーク等は株式会社ｐａｐｅｒｂｏｙ＆ｃｏ．の商標であり、
株式会社ｐａｐｅｒｂｏｙ＆ｃｏ．の著作物です。

Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google Analytics™はGoogle Inc. の商標です。