【GA】GoogleアナリティクスでFacebookのいいね!ボタンを計測する方法(事前知識編)

4月9日追記: Facebookいいね!ボタンについて認識が足りていない部分があったので追記・修正しました。その結果、IE6・7でGA計測する場合、古い(同期)のXFBML版だけでなく、古い(同期)のHTML5版でも計測が可能ということが分かりました。

————————————————–

実装編もアップしました。

————————————————–

Facebookのいいね!ボタンのクリック状況をGoogleアナリティクスで取得する必要があったので色々と調べてみたのですが、本当に大変でした…。

なぜ大変だったかと言うと、GoogleもFacebookもどんどん仕様を変えているので、取得方法を紹介してくださっているブログの情報と公式ページの情報が違っていたり、違うバージョンの仕様をベースにしたブログ同士がリンクしあっていたり、とにかく理解するのに時間がかかりました。

もちろん今後も仕様が変わってこのブログ記事の情報も古くなってしまうと思うのですが、なるべく最新の情報を記すということで、計測方法をまとめてみたいと思います。

まず実装方法に入る前に必要な事前情報です。これを理解するのに本当に時間がかかりました。
表でまとめると以下の通りです。

IE9やSafariは調べてないんですが、基本的にIE8やFirefox、Chromeと同じと思って問題ないと思います。

詳しく説明します。

Facebookのいいねボタンについて

  • いいねボタンの実装方法は複数ある。今のところ「HTML5」「XFBML」「iframe」の3つ。
  • Googleアナリティクスで計測できるのは「HTML5」と「XFBML」のみ。「iframe」ではできない。
  • 「HTML5」と「XFBML」の記述は、「Facebook JavaScript SDKの読み込み部分」と「いいねボタンの表示部分」と2つから構成される。「iframe」はいいねボタンの表示部分のみ。(4月9日追記)
  • 現在公式で提供されているXFBML版コードは非同期(async)のもの。以前は同期(sync)だった。(iframeはずっと一緒。HTML5は非同期のみ) 現在公式で提供されているコードではJavaScript SDKの読み込み部分が非同期(async)になっている。以前は同期(sync)だった。(4月9日訂正)
  • 古いJavaScript SDK読み込みコード(同期のコード)というのが、Googleアナリティクスのログに「?fb_xd_fragment=」付きのページビューを大量に発生させるバグ付きのコード。
  • 新しいJavaScript SDK読み込みコードだと、IE6・7でGoogleアナリティクスを使った計測ができない。(いいね自体はできる) !重要
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'Facebook appID', // App ID
    channelUrl : 'your-url', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here

  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/ja_JP/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>
<script type="text/javascript" src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>
<div data-href="your-url" data-send="false" data-layout="button_count"></div>
<fb:like href="your-url" send="false" layout="button_count"></fb:like>

Googleアナリティクスのソーシャルトラッキング用コードについて

  • 公式ヘルプに書かれている実装方法は、古いXFBML版のコードの場合について。(新しいコードの場合については書かれていない)
  • ただ、サンプルコードのページを見ると古いコードの場合も新しいコードの場合も書かれている。なので、これがすごく参考になります。
  • サンプルコードのページ右側のChange logという囲みの中にある「Go to:」で「facebook_js_async.html」(新しいコード)や「facebook_js_sync.html」(古いコード)などを参考に。
  • 公式ヘルプはいいねボタンのHTML5版について何も書かれていません。(おそらくヘルプページが作られたときには、まだHTML5版がなかったため)
  • 公式ヘルプに書いてあるのはいいねボタンのXFBML版についてです。iframe版はトラッキングできないので無視されてます。(iframe版ではトラッキングできないという記載すらない…)

ということで、要するにIE6・7でFacebookのいいねボタンをGoogleアナリティクスを使って計測しようとするなら、古いXFBMLのコードを使わないとだめですよ、っていうことと、Googleの公式ヘルプは古いXFBMLコードのことが書いてあるのでこれを参考にしましょう、特にサンプルコードが役に立ちます、ということでした。

ということで、要するにIE6・7でFacebookのいいねボタンをGoogleアナリティクスを使って計測しようとするなら、古いJavaScript SDK読み込み(同期)のコードを使わないとだめですよ、っていうことと、Googleの公式ヘルプは古いJavaScript SDK読み込み(同期)のコードのことが書いてあるのでこれを参考にしましょう、特にサンプルコードが役に立ちます、ということでした。(4月9日訂正)

事前情報だけでブログ記事が1つ書けてしまったので、具体的な実装方法は次の記事で書きたいと思います。

————————————————–

実装編もアップしました。

————————————————–

 

【GA】GoogleアナリティクスのGIFリクエストパラメータまとめ(随時更新)

まったくの自分用メモですが、GoogleアナリティクスのGIFリクエストパラメータをまとめます。GAの仕様も少しずつ変わっていきますので、なるべくアップデートして最新版にしていきたいです。

utmwv
ga.jsのバージョン。2012/03/28現在の最新は5.2.6

utms
1回の訪問内でのGIFリクエスト(ページビュー or イベント)の回数カウンター。これが500に達するとGIFリクエストをしなくなる(らしい)。

utmn
GIFリクエストごとに変わるランダムな数値。リクエスト用のGIF画像(__utm.gif)がキャッシュされるのを防ぐ。

utmhid
GIFリクエストごとに変わるランダムな数値。utmnとの違いがよく分からないけど、こっちはAdsenseとGAのGIFリクエストを紐付けるために使われているらしい。

utmhn
ホスト名。アクセスしているサイトのドメイン名ですね。

utmcs
文字コード。

utmsr
画面解像度

utmvp
ブラウザの表示領域。ツールバーやスクロールバーを抜いた実際のページ表示エリア。こんなの昔からあったっけか?ちなみに、iPhoneの場合は基本的に320×480ですが、Androidだとページの大きさが画面解像度を超えるとブラウザの表示領域=ページの大きさになります。

utmsc
色深度。表示できる色の数です。32bitとか、24bitとか。

utmul
言語。ja。

utmje
Javaの使用可否。1=可能。

utmfl
Flashプラグインのバージョン。

utmdt
ページタイトル。日本語はURLエンコードされる。

utmr
完全な参照元URL。ノーリファラーの時は「-」、同じドメインからのアクセス(ランディングページではない場合)は「0」がセットされます。

utmp
リクエストされているページのパス。ドメイン名までは記載されず、「/index.html」みたいな形でセットされます。

utmac
WebプロパティID(UA番号)

utmcc
Cookie値。
__utma = ドメイン名(ハッシュ).ユーザ識別ID.初回訪問時刻.前回訪問時刻.今回訪問時刻.累計訪問回数
__utmz = 参照元の情報
#__utmbとかはパラメータにつかないのか。

utmu
「qRAg~」とか「q~」とか。謎のパラメータ。おそらく利用目的はGoogleの中の人しか分からない。

utmt
リクエストの種類。イベント(event)、トランザクション(tran)、アイテム(item)、カスタム変数があるらしいが、カスタム変数ってリクエスト飛ばないですよね。
何もセットされていないとページビューと認識されるらしい。

utme
イベントやカスタム変数の引数。
イベントは「5(object*action*label)(value)」の形式。
カスタム変数は「8(name)9(value)11(scope)」の形式。ざっくり言うと。

 

————————————————–
随時更新していきます。
とりあえず今日はここまで。

【GA】Googleアナリティクスで完全なリファラーURLがフィルタを使わず取得できるようになっている

いつからか分からないのですが、今気づいたので投稿します。

Googleアナリティクスで完全なリファラー(参照元)URLを取得する場合は、

http://www.hide10.com/archives/11948

こういうフィルタの設定をしておく必要があると思っていたのですが、そんなことしなくても普通に(デフォルトで)取得できるようになっていますね。

標準レポートのトラフィック > 参照元

からドメイン名をクリックしてドリルダウンして見ることもできますし、

カスタムレポート新規作成 > ディメンション > コンテンツ > 完全なリファラー

を選んで新しいレポートを作成しても確認できます。

カスタムレポート新規作成 > ディメンション > コンテンツ > 完全なリファラー

 

便利ですね。

【GA】Androidブラウザでは画面解像度=Webページのサイズになる

あるとき、スマホからのアクセスが多い割にスマホ対応していないサイトがありまして、「ユーザはこんな小さい解像度でサイトを閲覧しているんですよ!」というために、GAの画面解像度レポートをスマホ(Android・iPhone)で絞り込んでみたところ、

  • 1000×1533
  • 1000×1400
  • 1000×1588

と、横幅が1000pxで高さがマチマチの解像度が500項目以上出てきて、頭が一瞬真っ白になりました。

セカンダリディメンションでOSを出してみたところ、このおかしな解像度はすべてAndroidのものでしたが、特定のデバイスではなく全てのデバイスで発生していました。

Androidと言えば解像度はほとんど480×854のはず。なんだこれは、としばらく考えていたところ、横幅が全て1000pxなのが気になってWebページの横幅(body要素の横幅)を調べてみたら、1000pxだったので、ピン!ときました。

つまりは、

Androidブラウザでは、Webページの大きさが画面解像度になる

ということです。高さが色々あるのは、Webページのコンテンツ量によって高さが違うためです。なお、Webページの大きさがデバイスの画面解像度(480×854とか)に収まっている場合は、デバイスの画面解像度がGAのレポートに表示される解像度になります。

これはGAの問題ではなくAndroidブラウザの問題ですよね…。

しかし、最近のGATCリクエストの内容を見ていると画面解像度だけでなく、実際のブラウザ表示サイズも取得しているみたいなので、GA側が頑張れば何とかなるかも知れませんね。あれ、というか既にブラウザ表示サイズが画面解像度レポートに表示されている??(もうちょっと調べます)

 

以上ですので、Androidの画面解像度を知りたい場合は、デバイス名(携帯端末の情報)から1個1個のデバイスの解像度を調べるしかなさそうです。合掌。