ヒビコレ

iPhone使いの携帯・スマホ関連の雑記ブログ

2717930.jpg

FC2ブログに人気記事ランキング表示ツール Ranklet [ランクレット] を導入

カスタマイズ』カテゴリの関連記事

スポンサードリンク

スマホ表示で先行で利用していた人気記事(ページ)ランキング表示ツールを、この度パソコン表示でも正式に導入する事にしました。

表示は個別記事下に表示させています。設置箇所は変更する可能性あり。

rgweef (1)

Ranklet [ランクレット]

今回新たに導入した人気記事ランキング表示ツールは、GoogleAnalyticsを利用して表示するRanklet [ランクレット]。

Ranklet [ランクレット]

この手のツールをブログで導入する上で、私が重視しているのは以下の三点。

①広告無しor少ない小さい
②表示が重くならない
③広告ブロックアプリに反応しない

①はランキングの最下部にRankletへのリンクが表示されるが、無料で利用できる(有料版もある)ので教養範囲。

②も体感的にも、そしてGoogleのサイト表示診断サイトの PageSpeed Insights で見ても遅くなってはいない。

③が3つの内でも一番重視する所で、現在パソコン表示で右プラグインに表示させているランキングより前に利用していた物は、拡張機能やスマホアプリの広告ブロックに反応して非表示になるからと、ランキングを見て手動で設置している。

画像と記事へのリンクを貼っているだけなので、広告ブロックで見れない何て事はないのだが、手動で入れ替えているのでこれが面倒&面倒。

という事で現在右プラグインに表示させているランキング自体は残しますが、入れ替えの手間をするために年間の数字でのデータにします。

記事下にあるRankletのランキングは当日と前日でのランキングになっています。

Ranklet導入効果

①~③をクリアしたとしても、やはり気になるのはその効果だと思います。

他のツールでは実際にその効果がどうなっているのかが分かりにくいのもありますが、Rankletはサイト内で導入効果を表示してくれます。

この効果が見やすいのはRankletのオススメする理由の一つ。

スマホ用のテンプレートだけのデータですが、導入した後と前の7日のデータは以下。
*導入したのは10月12日で前後の日数は自由に変更可。

セッション平均PVの改善:7%↑
直帰率の改善:4%↑

xsaxasx.png

このブログはアクセス流入が主なので日々のアクセス数に大きく変化は無い。それがRanklet導入で数%の効果がありました。たったこれだけ?と思う方もいるかもしれないが、これが1%あげるのも中々大変なんです。

また設置場所を変えると変化は出ると思うので、その際にもこのデータが気軽にチェックできるのはありがたい。上記に加え以下のデータもグラフ化や数値化で見やすくしている。

・順位別クリック数の推移
・ランキングクリック数
・ランキング表示回数
・よくクリックされているページ

Rankletのカスタマイズ性

Rankletはランキングにおいて何のデータで順位付けをするかを選択できます。今利用しているのは ページビューが多い順

これをユニークページビューや離脱率や直帰率の低い順など7つから選択可能となっている。また1~10位までで何位までを表示させるや、集計期間も選択できたりとカスタマイズの自由度は高い。

wfewe.png

上記に加えテンプレートの編集でデザインも弄くれます。

テンプレートの編集で凝ったデザインにするには知識が必要になりますが、右側にプレビュー画面を表示してくれるので素人の私にも優しい仕様になっています。

私が欲したのは順位とタイトルだけだったのでサムネイル画像は外しました。同じ様にサムネイル画像が不必要な方はHTMLの以下の部分を削除して下さい。

<td class="ranklet-image">
{{#image}}
<a href="{{url}}" class="ranklet-link">
<img class="ranklet-img" src="{{image}}" />
</a>
{{/image}}
</td>


画像に加えて、記事冒頭の文章も不必要な方は以下もカットで。

{{#description}}
<div class="ranklet-description">
<a href="{{url}}" class="ranklet-link">
{{description}}
</a>
</div>
{{/description}}


上記の変更を行うことで以下のようになります。

sfwaedwa.png

デフォルトに戻すも簡単に出来るので間違っても安心して編集できます。

ここで一つ私が陥った注意点なのですが、変更したらサイト下部にある 設定を更新ボタン を押さないと、変更が反映されません。

プレビューで反映されていて、且つ更新ボタンが下の方過ぎてこれに気付かなかった。これが前々から知っていたRankletの導入を見送っていた原因の一つ。

FC2ブログとRanklet

前項でも言及しましたが、私がRankletの導入に中々踏み出せなかった問題がある。

①デザイン変更が反映されない
②ブログのデザインが崩れる
③同じ記事がランクインされる

①に関しては前項通り私の確認不足。

②はパソコン用のテンプレートに設置すると、記事部分の枠と右プラグインがくっついてしまう不具合が起きていた。これについては私のテンプレートの問題。

今まで放置していたHTML素人の私が弄りまくって問題は山積だろうと放置していたHTMLの問題の修正に取り組みました。

HTMLの修正は先日書いた以下のツールを使って修正を行いました。

素人にもわかりやすいHTMLチェックツール3選

上記のツールのおかげで一応表示は崩れなくなった。←何が原因だったかは不明。また全部の指摘箇所を対処できていない。

③は恐らくだがFC2ブログはスマホ用とパソコン用でURLが違う事で発生する問題。

FC2ブログではスマホ表示用のURLの末尾には ?sp が付く。この仕様で同じ記事タイトルでURLが違う記事が出てくる。

そしてAnalyticsもスマホ用とパソコン用に解析タグを設置しているから、両方のデータを収集するようになっていた。

これに気付いたのはスマホ用の記事に、 -スマホ版 ヒビコレと入れるようにした。このお陰でAnalyticsでデータを見た時に同じ記事だが、パソコン用とスマホ用でデータが分かれているのに気が付いた。

スマホ用のテンプレートの表示を許可していない方はこの問題は起きていないかもしれないが、昨今Googleはモバイルページを重視していると聞くので表示は用意しておきたい。

これに対処するためにRankletの設定の ページの絞り込み条件 に手を加える事で記事が二重に出ないようにした。

rweff.png

上記の設定だとスマホ用のアクセスデータのみのデータになっていると思うが、パソコン用と殆ど変わらないので取りあえずこれで。

この考察が間違っている可能性も大いにあるが、一応上記の項目を変更することで記事の被りは収まった。記事が被っている方は上記項目の変更をお試し下さい。

まとめ

正式導入までの道のりは色々あった(←私の問題)が何とか導入する事が出来ました。

HTMLの修正も若干行えたのでそれも併せていい機会になりました。今まではデザイン的なスペースを作るのに平気で改行タグの <br> をぶっ込んだりしてましたから。

ちなにみHTML内に <br> を使うのは何故ダメなのかと、その影響力は未だによく分からず。

私は暫くは無料版で様子を見ますが、サービスクレジット 表示なしやランキングを複数可能な有料プランもあるようです。取りあえず現在導入しているRankletは人気記事の把握もし易いので、ランキングページを設置したい方にオススメしたいツール。

Ranklet [ランクレット]

 カスタマイズ

FC2ブログブログカスタマイズRanklet人気記事ランキング

スポンサードリンク

今日の人気ページ

Fireタブレットが4,000円OFF-

0 Comments

コメント *クリック