「音楽×テクノロジー」の話題を中心に、DTM、iPhone・iPad・Mac、最新テック情報、ガジェット・書評レビューなんでも書きます。ガンガンいこうぜ!みんなの訪問を、全力で待ってます。

4.24.2018

Bloggerで記事ページごとのPV数を表示させる方法

閲覧回数

Bloggerpageperpv

どうも。

サウンドオルビス( @soundorbis )です。

ふと思ったのですよ。YouTube・SoundCloud には動画再生数や、音楽ダウンロード回数など表示されるのに、どうしてブログ記事は PV 閲覧回数が表示されないのか?

表示されたって良くないですか? あったほうがおもしろいですよね? そんな常識を覆すために、Blogger で各記事ページごとの PV 数を表示させる方法をご紹介していきたいと思います。

PV 閲覧回数は、ブロガーの汗と涙の結晶なのだ!

Blogger で各記事の PV 数を表示させる方法

Pv数それぞれ

Blogger で各記事の PV 数を表示させる方法は、次の通りです↓

  1. Google の「Firebase」に無料登録をしよう
  2. Google の「Firebase」でプロジェクト作成してアプリ名をメモしよう
  3. ルールを「true」に書き換えよう
  4. Blogger に コードを書き込もう
  5. Blogger に スクリプトを書き込もう

大事なのは、Blogger テンプレートのバックアップを絶対に忘れないこと!バックアップできたら、手順通りに進めてください。今回は英語のページを参考に、カスタマイズしてみました。

参考記事;How To Add Post Views Counter To Blogger - The Yellow Bulb

参考動画:VIDEO TUTORIAL - How to add Post Views Counter to Blogger

それでは、各項目を詳しく解説していきましょう。

Google の「Firebase」の無料登録をしよう

Bloggerpostview1

https://firebase.google.com/

まずは「Firebase」に無料で登録しましょう。

「Firebase」とは、Google が提供しているモバイル開発者に向けた統一プラットフォームです。ユーザー認証、クラウドメッセージングといったわたしにも理解しきれないほどたくさんの機能が使えるらしですが……アプリ開発者でなければ、知っておくぐらいで十分です。

  • 無料プラン
  • 月額 $25 プラン
  • 従量制プラン

3 つのプランを選べますが、今回は無料プランで大丈夫です。「使ってみる」をクリックして、無料登録してください。

Google の「Firebase」でプロジェクト作成して URL をメモしよう

Bloggerpostview2

「Firebase」へようこそ画面になったら、「プロジェクトを追加」をクリックします。

Bloggerpostview4

矢印部分のDEVELOPDatabase使ってみるの順でクリックしてください。

Bloggerpostview5

ロックモードで開始有効にする の順にクリック。

Bloggerpostview11

できあがったプロジェクトをご覧ください。画像で赤いラインの URL 部分を、メモしてください。あとから使用します。

ルールを「true」に書き換えよう

Bloggerpostview6

できあがったプロジェクトのタブの ルール をクリックしてください。

画像の矢印部分が true になっていることを確認してください。“read” と “write” の両方です。これが違う単語だと、PV を読み取ることができません。

Bloggerpostview7

2 箇所を書き換えたら、公開実行 の順にクリックしてください。

Blogger に コードを書き込もう

Blogger の HTML 編集画面を開いてください。

っで、 <data:post.body/> を検索してください。見つけたら <data:post.body/> のすぐ上に、下記のコードを加えます↓

 <a expr:name='data:post.id'/> <i class='fa fa-eye'/>閲覧回数 <span id='postviews'/> 回

Bloggerpostview14

ここでワンポイントアドバイスです。

テンプレートによっては、すぐ上に上記のコードを追加すると全てのページのトータルPVが表示される場合があります。その時は Blogger のラベルタグや日付タグの近くに配置してみましょう。

わたしの HTML テンプレートでは、この位置につけると記事ごとの PV を正確に測ることができました。

Blogger に スクリプトを書き込もう

HTML 編集画面で </body> を検索してください。見つけたらすぐ上の行に、下記のコードを加えてください↓

 <script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($(&#39;a[name]&#39;), function(i, e) {
var elem = $(e).parent().find(&#39;#postviews&#39;);
var blogStats = new Firebase(&quot;https://YOUR-APP-NAME.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));
blogStats.once(&#39;value&#39;, function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr(&#39;name&#39;);
isnew = true;
}
elem.text(data.value);
data.value++;
if(window.location.pathname!=&#39;/&#39;)
{
if(isnew)
blogStats.set(data);
else
blogStats.child(&#39;value&#39;).set(data.value);
}
});
});
</script>

赤文字で書かれている部分は、事前に「Google の「Firebase」でプロジェクト作成して URL をメモしよう」でメモしたリンクに書き換えてください。

最後に「テンプレートの保存」をクリックして、作業内容を保存してください。

無事に PC と スマホで各記事の PV 数を表示できました!

Blogpostviewkansei

無事に記事ページごとの PV 数を表示させることができました。

皆さんも実装したあとしっかり確認して、記事ごとに閲覧回数が異なっているか確認してください。

IMG 0295

もちろん、スマホ版でもカウントされていました。

お疲れ様です。これにて作業は終了です。

まとめ

いかがでしたか? 無事に Blogger で記事ページごとの PV 数を表示させることはできましたか?

この方法、実は Blogger だけじゃなくて他のブログサービスでも使える予測は立てているのです。まぁ検証するすべがないのでもし試した方がいたらツイッターで教えてください。

 

それじゃあ、あなたの人生にドラマを!

サウンドオルビス(@soundorbis)でした。

↓10万回再生されたフリーBGM公開中↓

↓ おなじ話題をもっと読む ↓

このブログを書いてる人
soundorbis
サウンドオルビス -フリーBGMアーティスト-

ブログ・音楽・VTuberなど好きなコトで生きていく情報を毎日、発信しています。あなたのクリエイティブを応援するぞ!詳しいプロフィールは ⇨ こちら

soundorbis 公式アカウント

関連する記事

パワープッシュリンク