ブログをリニューアルします〜その３・完結編

X (Twitter) Facebook Hatena Pinterest Email Pocket

　グーグルアナリティクス、携帯・スマホ・PC完全対応。

　何とか間に合いました。ライブドアさんのブログメディア大賞の締切が今月中でしたので、何とか間に合わせたかったのですが、ようやく完成。

　以下、リニューアル時のまとめ、ということで。
　

この記事の目次

１．Ktai Style 2 にグーグルアナリティクス
２．iPhone、Android対応〜WPtouchプラグイン
３．PCサイト〜アナリマティックデザイン
４．まとめ〜グーグルアナリティクス設置

１．Ktai Style 2 にグーグルアナリティクス

　当ブログはWordpressを使っていますので、携帯用プラグインを使い、まずは携帯対応。モバイル版グーグルアナリティクスへの対応方法も、プラグイン作者の池田さんのサイトに書いてありますので、それを使わせて頂きました。

　Yuriko.Net » Ktai Style 2 への Google Analytics 設置方法
　Google Analytics　携帯版のレポートがとれません – ウェブマスター公式ヘルプフォーラム
　【WordPress】Ktai styleにGoogle Analyticsのトラッキングコードを埋め込む方法 | 渡辺大祐ブログ
　WordPress Plugins/JSeries » Ktai Style (携帯対応プラグイン)　※cache関連対策

　なお、私の環境では、「/ga.php」のところを「./ga.php」とすることで動作。あとルートに、ga.phpを置きました。
　

２．iPhone、Android対応〜WPtouchプラグイン

　WordPress › WPtouch « WordPress Plugins

　WPtouchというWordpress用プラグインを使用しました。上記URLからダウンロードしWordpressのpluginフォルダにアップロードし「使用する」にすればokです。

　また、私の環境ではdocomoのHT03Aに反応しませんでしたので、以下のように「Advanced Options」欄に、Androidと手入力。
　

　さらに下のほうに、グーグルアナリティクスのコードを入れる欄があります。Amazonへのリンクに入れてあるイベントトラッキングもしっかり動作してました。
　
　

３．PCサイト〜アナリマティックデザイン

　造語です。アナリティクスとオートマティックを合わせました。
　

　デザインに取り込むアクセス解析

　こんなコンセプトで、デザインと更新ポリシーをリニューアルしています。

　皆さんのブラウザでは、上図のようにTOPが表示されてますでしょうか？？

　リピーターの方は、上図のようになっていないはずです。新規の方のみコンセプトを明示してみました（他にも変わってる部分ありますよ！）。このように、アクセス解析をデザインに取り込んでみませんか？という提案を、今後していこうと考えました。

　その際、大いに影響を受け、そして活用させて頂いていますのがryownetさんのga.utils.jsというグーグルアナリティクス用ライブラリです。

　GAのクッキー情報を手軽にJS変数として使う「ga.utils.js」 – Web Analytics Latte

　訪問者のクッキーを取得しJavaScriptで利用できるようになるんです。これが無かったら今回のコンセプトは生まれなかったと思います。この場を借りてお礼申し上げたいと思います。本当にありがとうございました。

　なお、3カラムになりましたでの、ちょっと五月蠅く感じる方もいらっしゃるかもしれませんが、当サイトは8割が新規の方なんです。ですから、最初からある程度は、いろいろなリンクをお見せした方がいいかな、と判断。一方、テンプレートのソースはシンプルになったはずですので、パフォーマンスは上がったと思います（サーバー増強も予定しています）。どうぞご理解のほど、よろしくお願いします。

　あとはこんな感じ。プラグインも整理しました。

　・コメント欄に海外サイトでよく見るようになったDisqusを使用。良い感じ。
　・WordPress › Like « WordPress Plugins プラグイン（「いいね！」ボタン）
　・WordPress › Social Bookmarking JP « WordPress Plugins プラグイン（Twitterなどソーシャルブックマーク）
　・WordPress › Theme Test Drive « WordPress Plugins プラグイン（テーマをテスト出来ます）
　・関連記事表示　＞＞参考記事
　・Amazon、改行、タイトル、PRE、関連記事表示もろもろCSSの調整
　