Google AnalyticsでPDFなどのダウンロード数を解析する方法(非同期トラッキング)

Google Analyticsで、PDFのダウンロード回数や外部ページへのリンクをクリックした数をカウントする方法をご紹介します。

【ここ1年くらいでGoogle Analyticsのタグを入れた人や、これから入れる人はこちら】

最近Google Analyticsのタグを入れた人は、最新の「非同期トラッキング」という方法が使えます。
旧来の方法と比べて機能的にどうよくなったのかはよく分かりませんが、「ちょっと解析までの時間が早くなる」みたいなこと書いてあるサイトもありました。

さて、最近Google Analyticsを入れた人は、埋め込みタグが下記のような感じになってると思います。

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

PDFのダウンロード率などをカウントするためには、上記タグを「<body>タグの直後」に入れてください。
※<body>タグの直後です。閉じタグ(</body>)の直後ではありません。

もしも何らかの理由で「全ページの直後に入れたくない」という場合は、PDFのダウンロード回数や外部ページへのリンククリック数をカウントしたページだけにタグを入れて、そのほかのページは従来とおりの直前に入れておく、ということもできます。

さて、次は実際にカウントを取りたいリンクの設定です。PDFなどのファイルや、通常のリンクのクリック数をカウントするには、カウントしたリンクに下記のように設定してください。

<a href="test.pdf" onClick="_gaq.push(['_trackEvent', 'カテゴリ名', 'アクション名','ラベル名', 値]);" >test.pdf</a>

上記のカテゴリ名、アクション名、ラベル名、値にお好きな名前を入れてください。ラベル名と値はそもそもなくてもOKですが、カテゴリ名とアクション名は必須です。

つまり、カテゴリ名とアクション名だけで事足りる場合は下記のような感じ。

<a href="test.pdf" onClick="_gaq.push(['_trackEvent', 'カテゴリ名', 'アクション名']);" >test.pdf</a>

Web担に書いてあったのだけど、「値」の部分は数値しか設定できないので、文字列はダメらしい。そして、数値なので”は取らないといけないとのこと。

私はWordPressや自作のCMSに上記タグを入れ込んで、ラベルの部分を動的に書き出すようにしてます(記事id_記事のタイトル、みたいな)。
上記の例では<a>タグにonClickで指定していますが、要はonClickが認識できればいいのでFlashの再生ボタンとかでもいけるらしいです。試していませんが。

無事に設定し終わったら何回かクリックしてみてください。しばらくするとGoogle Analytics管理画面の コンテンツ > イベントのトラッキング の中でクリックされた数などを解析できます。上記で設定したカテゴリ別、アクション別・・・などで分けて見れるので便利ですね。

ちなみに反映されるまでの時間ですが、初めて設定した時は1日以上かかったのに、次にタグを増やした時は2時間ほどで反映されました。なのでよくわかりません。

【1年以上前にGoogle Analyticsのタグを入れた人はこちら】

さて、もしあなたが下記のような古いタイプのGoogle Analyticsタグを設置している場合、上記とちょっとやり方が違います。

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXXX-X*);
pageTracker._initData();
pageTracker._trackPageview();
</script>

このタグの場合は非同期トラッキングという新しい手法が使えないので、カウントしたいリンクに下記のように設定します。

<a href="test.pdf" onClick="javascript:pageTracker._trackPageview('カテゴリ名', 'アクション名','ラベル名', '値');" >test.pdf<a>

まーこちらは古い方法なので、もしも新しいタグに移行できるならした方がいいと思います。

以上です。

ここで紹介した方法では、Google Analyticsの画面で「イベントトラッキング」で確認できる、と前述しましたが、もしも「通常のコンテンツと同じように「上記のコンテンツ」とかで管理したい」、ということであれば「バーチャルベージビュー」というちょこっとだけタグの違う機能を使います。

まぁ、リンクに貼るタグがちょこっと変わるだけです。こんな感じに.

<a href="test.pdf" onClick="javascript:_gaq.push(['_trackPageview', '/download.html']);" >test.pdf<a>

では。

PHPでMysqlからデータ抽出した値の文字化けを直す方法(さくらインターネットなど)

MysqlからPHPでデータ抽出した値が文字化けする場合の対処法です。

最近はWordPressの普及もありUTF-8が一般的になっていますが、さくらインターネットなどの一部サーバーではまだEUC-JPが使われていたりして、文字化けに頭を悩ますことになります。

Mysqlから抽出したデータが文字化けした場合は、Mysqlと接続するときに下記のように設定してあげれば文字化けしなくなるはずです。

$conn = mysql_connect(データベースのホスト名,アカウント名,パスワード);

mysql_query("SET NAMES utf8",$conn); //ここで文字コードを設定!

mysql_select_db(データベースのホスト名,$conn) or die("データベースがありません");

2行目の「utf8」をあなたの環境の文字コードに変えてください。いま思ったけど、「utf-8」じゃなくていいのかな?ハイフンいらないのかな?
まぁ問題なく化けなくなったからいいけれど。

もしも文字化けで悩んでいたら試してください。

さくらインターネットでCakePHPを使っている場合の文字化けを直す方法

また更新を1ヵ月も止めてしまいました。

飽きっぽいのが悪い癖です。これからはちょっとしたことでもいいから、ちゃんと更新できるようにがんばります。
目指せ1日1記事!

「目指せ」とか言ってる時点で望み薄ですねw

今回はCakePHPです。最近仕事でCakePHPやWordPressを使って情報サイトを作ったので、その辺の更新が増えるかも、です。

ここから本題です。

さくらインターネットのサーバーはMysqlの文字コードがEUC-JPのため、普通にCakePHPを使うと文字化けしてしまいます。
そんな時は、app/config/database.phpの中で下記のように指定してあげれば文字化けが直ります。

’encoding’ => ‘utf8′;

上記の「utf-8」のところはあなたの環境に合わせて変えてください。Shift-jisを使っている場合は「Shift-jis」に変えてね。

もう文字コードはUTF-8が基本になっているような気がしますが、さくらインターネットはEUC-JPが基本なので最初はいろいろと手間取りますね。
次回はさくらインターネットのサーバーを契約しているけれど、CakePHPでなく普通にPHPベタ書きでデータベースからデータを抽出したときに文字化けしたときの対処法を説明します。


ではまた。

windows版safari4以降でプルダウンメニューがFlashの背景に隠れるバグの対処法

ある案件で、プルダウンメニューの下にFlashを配置するウェブサイトを制作しました。

こういった状況で必ず問題になるのが、JavaScript(HTML)がFlashの背景に隠れてしまう、というものです。Flashはz-indexを認識しないため、CSSで重なりの設定しても効果がありません。

そんな場合の通常の解決策が、flashを設置しているタグにwmodeのtransparentを指定してあげるというものです。

●objectで指定する場合は下記を追加

<param name="wmode" value="transparent" />

●embedで指定する場合は下記を追加
<embed wmode="transparent"... />

●swobject.jsを使っている場合は下記を追加
so.addParam("wmode", "transparent");

この解決策にもデメリットがあり、Flashの中に入力要素があったりすると入力できなくなったりするそうです。
まぁ私の案件ではFlashは単純にonclick等で動かすだけのものだったので、特に問題なしと思っていました。

が、先日問題を発見。

windows版safariのバージョン4.0以降で見てみると、上記指定が効いておらず、プルダウンがFlashの背景にいってしまいます。
調べたところバージョン3.0では問題なかったようです。

海外のサイトを含め、かな~り調べて試しましたが、7月9日現在根本的な解決策は見つかっていません。
ただ、ここまでの調査で分かっているのは下記のとおりです。

・windows版safariのバージョン4以降で発生。mac版では問題ない。バージョン3以下でも問題なかった可能性大(他のサイトの情報から)
・IE6、IE7、IE8、Firefox2、Firefox3、Google Chromeでは問題なし
・インストールされているFlash playerが新しければ問題なし。10.1であれば問題が発生しないのを確認。

とりあえずはFlashのバージョンが新しければ問題ないので、win版safariのシェアも低いことですし今回はそれでなんとか収まればよいのですが。。。
根本的な問題解決策は、今後も探してみようと思います。

もし解決策をご存じの方がいらっしゃいましたら教えてください。m(_ _)m

【追記】

解決策、なし。まぁFlash更新されりゃ問題ないからいいでしょう。

iphoneアプリを作るべし!その1

先月会社でipadを買いまして、そのレビューというか、ちょっと触ってみた感想を公開しました。

社長に「ペンキチくん、うちの会社概要のe-pub作っといて」といわれて、簡単に作ったりしたのですが、やっぱりAppleカッコイイ。ステキ。
そんなわけで、PHPとJavaScriptだけじゃなく、やっぱiphoneアプリ作れなきゃダメだよね!と思い制作に乗り切りました。

1、思い立ったが吉日男なので、さっそくmacbook proを購入。

いきなり会社の先輩と新宿ヨドバシに突入。macbookと迷ったのですが、放熱性を考慮してproにしました。
全然熱さが違います。これ、非常に重要。

会社のデスクトップと並べてみたの図。



2、iphoneアプリ制作セミナーに出席

その週末にiphoneアプリ制作勉強会に出かけたのですが、勉強会というよりも「場所貸すからみんなで勝手に作って!」という感じでした。
iphoneアプリ制作どころかmacすら満足に使ったことない私は完全にチンプンカンプンで、あえなく途中退席。あぁ無念。

3、書籍購入

こうなったら自分でやるしかない。と思ってその勉強会の帰りに新宿紀伊国屋に訪問。
勉強会中にオススメの書籍を調べておいたので、その書籍を購入。これです。良書良書書かれていたので迷いなく購入。ちょっとくらい中見て買えという感じもするが。

4、本を片手に勉強&制作開始

会社でソッコー仕事を終わらせ、本片手に制作。以下、ハマったところを書きます。

●X-codeの使い方がわからん。
X-code、interface builderとかの使い方がサッパリわからん。というか全部英語てw そろそろ日本語化されててもいいじゃんか。

●文字サイズの文字間スペースの広げ方がわからん。
教えてgooで聞いてみたところ、Labelは広げることはできんということ。うーん。。

●iphone developer center(?)への登録とか、いろいろな手続きがチョー大変。
なんで全部英語なんだよ・・・しかも詳細をWebで公開することを規約で禁止してるもんだから、ちゃんとしたドキュメントがあんまりないでやんのww
案の定エラーが出てAppleサポートに連絡しました。のへー。

●Object-Cって。。。
いいもんC勉強するからいいもん!

5、というわけで完成

●全体日数:1週間
●実作業日数:丸1日

こんなのできました。1日にタバコを吸った本数をカウントするアプリ。着々と死へと進む、みたいな。


クリックすると数が増えて、ドクロマークがこんな感じに。ボタンの色が若干変わって背後に×印のタバコが現れます。


「C」をクリックすると数字がゼロに戻ります。
数字のマージンが気になるところだけれど、ちょっと作り方を間違えて直せなかった。次から気をつけます。

これだけだと「で?」って感じですが、やってること自体は単純なプログラムでも見せ方とコンセプトをちょっと変えることでいろいろ新しい世界が見えてくるのではないかと思います。
まぁ最初のとっかかりなのでこんな感じでしょう。

Object-Cさっぱりわからないまま、プログラム自体は本からまんま取ってきてなんとなくで作ったので、
次回からちゃんとしたものを作るためには習得必須ですね。


6、とりあえず作ってみての感想

制作自体に関しては、Object-Cが分かれば意外とサクサク作れると思いました。Object-Cが出来なくてもオブジェクト指向やフレームワークの概念を理解していれば本片手で結構いけるかと。
ただ、Interface builderが慣れるまでどこに何があるのかサッパリだなと思います。やっぱり日本語版が出てほしい。。。

また、一番面倒だったのはAppleの登録手続きでした。こちらに関しては下記サイトが非常に参考になりました。
http://ameblo.jp/micro-garden/entry-10308925350.html
http://report.station.ez-net.jp/registration/apple/iphone_dev.device.asp


とりあえずこんな感じ。その4くらいからオリジナルかな??という感じ。もっと頑張ります。