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

2013/08/28 2014/11/22

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

（追記）
コンテンツ挿入に関わらず、ヘルプに記載されたHTML直接編集でも、
正しくトラッキングされていない症状に現在直面しています。

継続して推移を見守っていきますが、
トラッキングステータスが取れているが、リアルタイムには表示されないという状態です。
追って、またご報告します。

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

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

はじめに

無料ブログには既に独自のアクセス解析ツールが付属していて、
サービスを始めるとともにすぐにアクセス数等が確認できて便利なものです。
ファンブログではアクセス解析ツールが廃止されましたので、
現状では外部のアクセス解析を利用することになります。

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

GoogleAnalyticsをファンブログで！

利用規約上問題はないか

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

Google Analyticsアクセス解析をファンブログ(A8.net)で利用する上の規約確認

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

とはいえヘルプに設定方法が載っていましたので認められています。
ファンブログにGoogleAnalyticsを設定する

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-13', 'fanblogs.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-13', 'fanblogs.jp');

ga('send', 'pageview');

</script>

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

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

ファンブログ(A8.net)ブログに対する設定

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

直接HTMLを編集する方法

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

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

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

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

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

テンプレート編集

ブログ管理のTOP画面から[デザインの変更]をクリックします。

デザインの変更の選択

表示されたスキン変更画面の[フリースキンの編集]から、
変更したいテンプレートをクリックします。

変更するテンプレートの選択

テンプレートの編集画面にて</head>タグの前に、
GoogleAnalyticsトラッキングコードを挿入します。

画像ではUniversal Analyticsと標準アナリティクスの
両方のトラッキングコードを貼っていますが気にしないでください。
動作確認の為に仮に貼っています。

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

表示の確認

ブラウザでブログを開き、ページが正しく表示されることを確認します。

Webページの確認

GoogleAnalyticsのレポート確認

GoogleAnalyticsのレポートを開き、トラッキングを確認しますが、
レポートはすぐに反映はされないので翌日以降に確認をしてください。

私の環境ではファンブログではリアルタイムレポートの表示がされず、
通常のレポートのみ翌日に確認することができました。

GoogleAnalytics動作の確認

さいごに

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

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

もっとさっくりと挿入したいと思った方は、フリースペースを利用する方法も可能です。
Google Analyticsアクセス解析をファン(A8)ブログで利用する方法にコンテンツは使えない？

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

ファンブログ及び、A8.netは株式会社ファンコミュニケーションズの商標であり、
ファンブログまたはA8.netのロゴ、アイコンその他のマーク等は
株式会社ファンコミュニケーションズの商標であり、株式会社ファンコミュニケーションズの著作物です。

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