読者です 読者をやめる 読者になる 読者になる

tech.guitarrapc.cóm

C#, PowerShell, Unity, Cloud, Serverless Technical Update and Features

はてなブログのアクセスを Ptengine でみてみた

はてなブログで記事を書いていると、記事のどのあたりに注目されているのか、どんなことを気にしているのかを考えることがあります。

この辺りは、検索キーワードや流入元だけではなく、記事内部のクリックやスクロールを見ないとわかりにくいところです。

ということで、私が利用しているのが Ptengine で、画面右下にちょこんとバーが出ています。

f:id:guitarrapc_tech:20151124055206p:plain

ptengine で見た結果と、見た目をちょっと調整してたのでわからないなりに少し書いてみます。

目次

Ptengine

はてばブログでいろいろ組み込むのは、できるけど面倒なものです。個人的には、自分のブログのアクセス解析も結構どうでもいい派ですが、記事が長くなってしまう傾向なので少しぐらいは気になります。

Google Analytics を見ていてもあまり楽しくないので、何かないかと見ていたときに見つけたのが、はてな開発ブログの記事でした。

staff.hatenablog.com

ヒートマップで、ブログの閲覧状況を見れるのは面白そう + はてなブログなら無料なのでよさそうなので早速申し込みをしてみました。

www.ptengine.jp

f:id:guitarrapc_tech:20151124054923p:plain

申し込み

実は初めに申し込んだとき、専用申し込みじゃないとだめと気づかずに普通に申し込んでしまいました。

f:id:guitarrapc_tech:20151124060310p:plain

Ptengine はてなブログユーザー向け特別無料プランは、株式会社Ptmindがはてなブログユーザーを対象に提供しています。利用中のプランや登録に関するご質問等は、電子メール support@ptmind.co.jp 宛にお問い合わせください。

また、Ptengineの使用方法については、Ptengineサポートサイト のドキュメントやFAQも参照してください。

※既に通常の無料プランでPtengineに登録している方は、当プランにアップグレードできます。独自ドメインを使用している場合などは、上記のメールアドレスからお問い合わせください。

ということで、独自ドメインにもしてるしと思いながらメールしたところ1日程度で返信がありプラン変更していただけました。サポート様、ありがとうございます!

はてなブログへの設定

実際に利用している記事もあるのでここを参考にどうぞ。

yutawatanabe.hatenablog.com

url の設定

url を設定します。独自URL でも問題ありません。

f:id:guitarrapc_tech:20151124060743p:plain

解析コードの設定

あとは、プロファイルにある解析コードをコピーして、

f:id:guitarrapc_tech:20151124060502p:plain

<script type="text/javascript">
    window._pt_lt = new Date().getTime();
      window._pt_sp_2 = [];
      _pt_sp_2.push('setAccount,2712711d');
      var _protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
      (function() {
        var atag = document.createElement('script'); atag.type = 'text/javascript'; atag.async = true;
        atag.src = _protocol + 'js.ptengine.jp/pta.js';
        var stag = document.createElement('script'); stag.type = 'text/javascript'; stag.async = true;
        stag.src = _protocol + 'js.ptengine.jp/pts.js';
        var s = document.getElementsByTagName('script')[0]; 
        s.parentNode.insertBefore(atag, s);s.parentNode.insertBefore(stag, s);
      })();
</script>

はてなブログ > デザイン > フッターに貼り付ければok です。*1

f:id:guitarrapc_tech:20151124060558p:plain

バッジ

私はアクセス解析をしているのは明示したいため、バッジをつけています。

f:id:guitarrapc_tech:20151124060634p:plain

他にはイベントなどがありますのでお好きに。

アクセス解析をみてみる

データを数日ためたら早速ヒートマップを見てみましょう。先日の VS Code の記事が20ハテブ程度なので 記事公開の19日についてみてみましょう。

tech.guitarrapc.com

アクセス概要

記事公開が AM3:00 だったので、その後のアクセスをみてみると、AM10:00 と 16:00 ごろにピークがあるようですね。

f:id:guitarrapc_tech:20151124061637p:plain

流入元や

f:id:guitarrapc_tech:20151124061703p:plain

デバイス別のアクセスがみれたりもします。

f:id:guitarrapc_tech:20151124061736p:plain

他にも流入元をタグクラウド風にみれたり

f:id:guitarrapc_tech:20151124061843p:plain

ユーザー環境もみれます。この辺は、アクセスカウンターや Google Analytics と同じなのでまぁどうでもいいですね。

f:id:guitarrapc_tech:20151124061951p:plain

少し面白いのは地図で、世界からのアクセスがわかります。

日本はもちろんのこと

f:id:guitarrapc_tech:20151124062154p:plain

アメリカやヨーロッパからのアクセスも見えます。

f:id:guitarrapc_tech:20151124062259p:plain

カリフォルニアなどは、週500PV 程度のようです。

ヒートマップ

ヒートマップです。記事のどの部分が、どの程度、どのようにみられているのか見えます。

f:id:guitarrapc_tech:20151124063244p:plain

どの記事でも共通しますが、ヘッダの意味のなさと

f:id:guitarrapc_tech:20151124063616p:plain

1ページ目が 100% なのは当然ですが、次のページで一気に 90% - 80% まで下がります。

f:id:guitarrapc_tech:20151124063552p:plain

私自身目次がほしいのでおいているのですが、ヒートマップでも目次に対する注目はかなり高いようです。

f:id:guitarrapc_tech:20151124062711p:plain

当然ですが、文章より画像に注目があります。

f:id:guitarrapc_tech:20151124062902p:plain

またアニメーションGIF に注目が集まるようですね。

f:id:guitarrapc_tech:20151124063017p:plain

見慣れないけど良さげな MarketPlace という言葉にも注目があるようです。

f:id:guitarrapc_tech:20151124063800p:plain

ページトップ

個別記事ではなく、ページトップでは記事を折りたたんでいます。それでも一ページ目が一番注目。ページタイトル事に注目されてそう?

f:id:guitarrapc_tech:20151124063952p:plain

f:id:guitarrapc_tech:20151124064000p:plain

あとはTag Cloud、GitHub、ブクマ、コメントへの注目もありそうです。

f:id:guitarrapc_tech:20151124064008p:plain

f:id:guitarrapc_tech:20151124064048p:plain

対応

ということで、ブログの見た目を少し手直ししてみました。

対応方針は次の通りです。

  • ページトップは適当に
  • ただし日付はわかりやすく
  • 1ページに収まる量を少し広げる
  • フォント修正
  • スマホ版
  • 読み込み速度の改善
ページトップは適当に

ページトップは見られてないので適当です。頑張っても仕方ないです。が、まぁ逆にいうと遊んでもいいってことなので少しフォントで遊びました。

今回は Google Font を使ってフォントを変更しています。

Google Fonts

f:id:guitarrapc_tech:20151124064437p:plain

自分の好きなフォントを選んで、トップ下で外部css を読み込ませて*2

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

デザインCSS に適用先を当てるだけです。

font-family: 'Open Sans', sans-serif;

このブログの場合は 2つですね。

gist.github.com

日付はわかりやすく

はてなブログのテーマとして Module を使っています。レスポンシブじゃない点以外はかなり好きなのです。

Module - テーマ ストア

が、日付が埋もれるので軽く強調だけいれておきます。

gist.github.com

記事が並んだ時に、パッと区切りになれば御の字です。

1ページに収まる量を少し広げる

Module は比較的に幅を広くとれるのですが、もう少し広くしたいのですね。

なので、Module テーマの作者の案内をいじって軽く広げておきます。

gist.github.com

これで1ページあたりの表示幅が広がるので、パット見の概要把握が楽になればいいです。

フォント修正

メイリオ飽きました。少し読みやすいフォントに変えておきます。今はこのセットでやっています。

gist.github.com

エントリカテゴリが埋もれるので、そこだけは bold で。

あと本文はフォント変更に伴い、わずかに詰めました。

スマホ版

こちらも軽く修正だけしておきます。

gist.github.com

読み込み速度の改善

Twitter が 11/21 から ツイート数表示のAPIをサポート終了しました。

blog.twitter.com

はてなブログ、読み込みがこのタイミングで一気に遅くなっていました。

f:id:guitarrapc_tech:20151124065852p:plain

今回は、ツイートボタンと FaceBook ボタンを排除して

f:id:guitarrapc_tech:20151124065935p:plain

ハテブコメントだけ削除しました。

f:id:guitarrapc_tech:20151124070042p:plain

注目がハテブコメントのようですが、、ハテブアイコンをおいて誘導ということで暫定処置です。*3

とりあえず、Google Page Spped Insight でもページロードの遅さはクリアして 72/100 ですね。

Google PageSpeed Insights

f:id:guitarrapc_tech:20151124071238p:plain

はてなブログせんせーのはちょっとむずかしい...

f:id:guitarrapc_tech:20151124071437p:plain

追記 : 2015/11/15

また変化があったので。

計測前

f:id:guitarrapc_tech:20151125033244p:plain

Twitter ボタンをもどしてみると

f:id:guitarrapc_tech:20151125033300p:plain

はてなブックマークコメントを戻すと

f:id:guitarrapc_tech:20151125033322p:plain

これはひどい

まとめ

ヒートマップ見た目、面白いですね!

はてなブログは無料なので、試してみるといいと思います。

*1:JavaScript 直書きなので SetAccount とか気にしてません。

*2:フッターだと遅いのでトップ下にしました

*3:速度とどっちか悩ましい