kakakakakku blog

Weekly Tech Blog: Keep on Learning!

Hatena Blog で記事下に関連記事を表示する Tips と約4ヶ月運用した効果

あまり気付かれてなさそうな気もするけど,実験的な施策として,今年9月から PC 限定でブログの記事下に関連記事を表示するようにデザインを変更していた! ( ゚д゚) 施策を約4ヶ月運用したので,設定方法と効果を1度まとめておこうと思った.

もともとあった課題感

Google Analytics に「ページ/セッション」というメトリクスがある.これは「1セッション中に閲覧されたページ数の平均値」のことで,ブログで言うと,流入後に複数の記事を閲覧してもらえると,値が上がっていく.逆に言うと「ページ/セッション」の値が 1 の場合,それは「直帰」となる.このブログの「ページ/セッション」は,月平均で 1.20 ぐらいで,せっかく毎週記事書いてるし,同じような技術領域の記事も多いし,もっと回遊してもらえないのかな?という課題感があった.

まずは記事下に関連記事を表示したいなと思って調べたところ,Hatena Blog で関連記事を記事下に出すテクニックは複数ありそうだった.ただし,個人的には外部サービスに依存したくなかったし,API を叩いて結果を取得するような仕組みも避けたくて,もっとシンプルな方法はないのかなと考えていたら,Hatena Blog 公式の関連記事機能(サイドバーモジュール)をカスタマイズすることで実現できることがわかった.求めてたシンプルさはこれだ!と思ってすぐに適用することにした.

www.aritai.net

Hatena Blog で記事下に関連記事を表示する 3 ステップ

ステップ 1

「デザイン → カスタマイズ → サイドバー」で「関連記事」を追加する.

デフォルトの「関連記事」だと以下のように表示される.

f:id:kakku22:20161223154018p:plain

ステップ 2

サイドバーから関連記事を非表示にするために「デザイン → カスタマイズ → デザイン CSS」に以下の CSS を入力する.

.hatena-module-related-entries {
  display: none;
}

ステップ 3

サイドバーから記事下に移動させるために「デザイン → カスタマイズ → 記事 → 記事下」に以下のスクリプトを入力する.

<div id="relateArticle"></div>

<script>
var timer = setInterval(function() {
    if (typeof jQuery != 'undefined') {
        $("#relateArticle").html($(".hatena-module-related-entries").html());
        clearInterval(timer);
    }
}, 1000)
</script>

すると,以下のように記事下に関連記事を表示することができる.

f:id:kakku22:20161223154457p:plain

効果

気になる運用効果としては,Google Analytics で以下の条件で KPI 推移を確認した.

  • 期間 : 2016/03 - 2016/12
  • メトリクス : ページ/セッション(月次)
  • セグメント : PC
  • データ : 精度優先

結果として 2016/09 以降は 1.23 or 1.24 となっていて,適用前より少しは改善しているように感じられる.ただし「大成功!」と言える効果ではないと思う.

YYYY/MM ページ/セッション ステータス
2016/03 1.20 □適用前
2016/04 1.21 □適用前
2016/05 1.20 □適用前
2016/06 1.19 □適用前
2016/07 1.22 □適用前
2016/08 1.22 □適用前
2016/09 1.24 ■適用後
2016/10 1.23 ■適用後
2016/11 1.23 ■適用後
2016/12 1.24 ■適用後

施策を実施する際は Google Analytics のメモ機能を使って日付を記録しておくと,振り返りやすくなって最高に便利!

f:id:kakku22:20161223161953p:plain

Google Analytics はとにかく機能が多すぎて難しい印象があるけど,逆引き本を読んでから幅広く活用できるようになった.仕事にも活かせるし,Google Analytics を使うなら買っておいて損はしない1冊だと思う.

できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応

できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応

記事に付けるタグの順番に意味がある

関連記事のロジックは観測する限りだと「記事の1個目のタグと同じタグを持った最新記事」だと思う.よって「重要なタグを1個目に付けると良い」という Tips があるので,覚えておくと良いかと!!!

まとめ

今年は週2回ブログを書くことを目標にアウトプットを続けていて,既に 120 記事以上書いている.記事を書く以外にも楽しさがあったら良いなと思って,Google Analytics と Search Console をメインに様々な KPI を計測しているんだけど,今回は KPI 改善施策の1個として「記事下の関連記事」を紹介した.多少なりとも効果はありそうなので,導入してみてはいかがでしょう!